code-lab/node_modules/vuetify/lib/components/VAlert/VAlert.sass

@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

  .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