// Imports
@import './_variables.scss'

// Theme
+theme(v-alert) using ($material)
  .v-alert--prominent .v-alert__icon
    &:after
      background: map-get($material, 'dividers')

// Sheet
+sheet(v-alert, $alert-elevation, $alert-border-radius, $alert-shaped-border-radius)

// Block
.v-alert
  display: block
  font-size: $alert-font-size
  margin-bottom: $alert-margin
  padding: $alert-padding
  position: relative
  transition: $primary-transition

  &:not(.v-sheet--tile)
    border-radius: $alert-border-radius

  > .v-icon,
  > .v-alert__content
    +ltr()
      margin-right: $alert-margin

    +rtl()
      margin-left: $alert-margin

  > .v-icon + .v-alert__content
    +ltr()
      margin-right: 0

    +rtl()
      margin-left: 0

  > .v-alert__content + .v-icon
    +ltr()
      margin-right: 0

    +rtl()
      margin-left: 0

// Elements
.v-alert__border
  border-style: solid
  border-width: $alert-border-width
  content: ''
  position: absolute

  &:not(.v-alert__border--has-color)
    opacity: $alert-border-opacity

  &--left,
  &--right
    bottom: 0
    top: 0

  &--bottom,
  &--top
    left: 0
    right: 0

  &--bottom
    border-bottom-left-radius: inherit
    border-bottom-right-radius: inherit
    bottom: 0

  &--left
    +ltr()
      border-top-left-radius: inherit
      border-bottom-left-radius: inherit
      left: 0

    +rtl()
      border-top-right-radius: inherit
      border-bottom-right-radius: inherit
      right: 0

  &--right
    +ltr()
      border-top-right-radius: inherit
      border-bottom-right-radius: inherit
      right: 0

    +rtl()
      border-top-left-radius: inherit
      border-bottom-left-radius: inherit
      left: 0

  &--top
    border-top-left-radius: inherit
    border-top-right-radius: inherit
    top: 0

.v-alert__content
  flex: 1 1 auto

.v-alert__dismissible
  +ltr()
    margin: -16px -8px -16px 8px

  +rtl()
    margin: -16px 8px -16px -8px

.v-alert__icon
  align-self: flex-start
  border-radius: 50%
  height: $alert-icon-size
  min-width: $alert-icon-size
  position: relative

  +ltr()
    margin-right: 16px

  +rtl()
    margin-left: 16px

  &.v-icon
    font-size: $alert-icon-size

.v-alert__wrapper
  align-items: center
  border-radius: inherit
  display: flex

// Modifiers
.v-alert--border
  &.v-alert--prominent
    .v-alert__icon
      +ltr()
        margin-left: $alert-border-icon-margin

      +rtl()
        margin-right: $alert-border-icon-margin

.v-alert--dense
  padding-top: $alert-padding / 2
  padding-bottom: $alert-padding / 2

  .v-alert__border
    border-width: $alert-dense-border-width

.v-alert--outlined
  background: transparent !important
  border: $alert-outline !important

  .v-alert__icon
    color: inherit !important

.v-alert--prominent
  .v-alert__icon
    align-self: center
    height: $alert-prominent-icon-size
    min-width: $alert-prominent-icon-size

    &.v-icon
      font-size: $alert-prominent-icon-font-size

      &:after
        background: currentColor !important
        border-radius: 50%
        bottom: 0
        content: ''
        left: 0
        opacity: 0.16
        position: absolute
        right: 0
        top: 0

  &.v-alert--dense .v-alert__icon.v-icon::after
    transform: scale(1)

.v-alert--text
  background: transparent !important

  &:before
    background-color: currentColor
    border-radius: inherit
    bottom: 0
    content: ''
    left: 0
    opacity: 0.12
    position: absolute
    pointer-events: none
    right: 0
    top: 0