@use '../../styles/tools'
@use './variables' as *

.v-alert
  display: grid
  flex: 1 1
  grid-template-areas: "prepend content append close" ". content . ."
  grid-template-columns: max-content auto max-content max-content
  position: relative
  padding: $alert-padding
  overflow: hidden
  --v-border-color: #{$alert-border-color}

  @include tools.position($alert-positions)
  @include tools.rounded($alert-border-radius)
  @include tools.variant($alert-variants...)

  &--prominent
    grid-template-areas: "prepend content append close" "prepend content . ."

  &.v-alert--border
    --v-border-opacity: #{$alert-border-opacity}

    &.v-alert--border-start
      padding-inline-start: $alert-padding + $alert-border-thin-width

    &.v-alert--border-end
      padding-inline-end: $alert-padding + $alert-border-thin-width

  &--variant-plain
    transition: $alert-plain-transition

  @at-root
    @include tools.density('v-alert', $alert-density) using ($modifier)
      padding-bottom: $alert-padding + $modifier
      padding-top: $alert-padding + $modifier

      &.v-alert--border-top
        padding-top: $alert-padding + $alert-border-thin-width + $modifier

      &.v-alert--border-bottom
        padding-bottom: $alert-padding + $alert-border-thin-width + $modifier

.v-alert__border
  border-radius: inherit
  bottom: 0
  left: 0
  opacity: var(--v-border-opacity)
  position: absolute
  pointer-events: none
  right: 0
  top: 0
  width: 100%

  @include tools.border($alert-border...)

  .v-alert--border-start &
    border-inline-start-width: $alert-border-thin-width

  .v-alert--border-end &
    border-inline-end-width: $alert-border-thin-width

  .v-alert--border-top &
    border-top-width: $alert-border-thin-width

  .v-alert--border-bottom &
    border-bottom-width: $alert-border-thin-width

.v-alert__close
  flex: 0 1 auto
  grid-area: close

.v-alert__content
  align-self: center
  grid-area: content
  overflow: hidden

.v-alert__append,
.v-alert__close
  align-self: flex-start
  margin-inline-start: $alert-append-margin-inline-start

.v-alert__append
  align-self: flex-start
  grid-area: append

  + .v-alert__close
    margin-inline-start: $alert-append-close-margin-inline-start

.v-alert__prepend
  align-self: flex-start
  display: flex
  align-items: center
  grid-area: prepend
  margin-inline-end: $alert-prepend-margin-inline-end

  .v-alert--prominent &
    align-self: center

.v-alert__underlay
  grid-area: none
  position: absolute

  .v-alert--border-start &
    border-top-left-radius: 0
    border-bottom-left-radius: 0

  .v-alert--border-end &
    border-top-right-radius: 0
    border-bottom-right-radius: 0

  .v-alert--border-top &
    border-top-left-radius: 0
    border-top-right-radius: 0

  .v-alert--border-bottom &
    border-bottom-left-radius: 0
    border-bottom-right-radius: 0

.v-alert-title
  align-items: center
  align-self: center
  display: flex
  font-size: $alert-title-font-size
  font-weight: $alert-title-font-weight
  hyphens: $alert-title-hyphens
  letter-spacing: $alert-title-letter-spacing
  line-height: $alert-title-line-height
  overflow-wrap: $alert-title-overflow-wrap
  text-transform: $alert-title-text-transform
  word-break: $alert-title-word-break
  word-wrap: $alert-title-word-wrap