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

@include tools.layer('components')
  .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

    &:not(:has(.v-alert-title))
      .v-alert__content
        padding-block: calc((#{$alert-prepend-icon-size} - #{settings.$line-height-root} * 1rem) / 2)

  .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-btn
      margin-block: calc(-1 * (var(--v-btn-height) + 12px - #{$alert-prepend-icon-size}) / 2)

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

    > :first-child
      margin-top: 0

    > :last-child
      margin-bottom: 0

  .v-alert__append,
  .v-alert__close
    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
    min-height: $alert-prepend-icon-size

    > .v-icon
      font-size: $alert-prepend-icon-size
      height: $alert-prepend-icon-size
      width: $alert-prepend-icon-size

    .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

  @media (forced-colors: active)
    .v-alert
      &:not(&--variant-text, &--variant-plain)
        border-style: solid

      &--variant-outlined,
      &--variant-tonal
        border-width: medium

      &--variant-elevated,
      &--variant-flat
        border-width: thick