@use 'sass:map'
@use '../../styles/tools'
@use '../../styles/settings'
@use './variables' as *

@include tools.layer('components')
  .v-snackbar
    justify-content: center
    z-index: $snackbar-z-index
    margin: $snackbar-wrapper-margin
    margin-inline-end: calc(#{$snackbar-wrapper-margin} + var(--v-scrollbar-offset))
    padding: var(--v-layout-top) var(--v-layout-right) var(--v-layout-bottom) var(--v-layout-left)

    --v-snackbar-current-offset: var(--v-snackbar-offset)
    transform: translateY(calc(var(--v-snackbar-direction) * (var(--v-snackbar-current-offset) + var(--v-snackbar-mobile-notch, 0px))))
    transition: transform .2s settings.$standard-easing

    &:not(.v-snackbar--center):not(.v-snackbar--top)
      align-items: flex-end

    &__wrapper
      align-items: center
      display: flex
      flex-wrap: wrap
      max-width: $snackbar-wrapper-max-width
      min-height: $snackbar-wrapper-min-height
      min-width: $snackbar-wrapper-min-width
      overflow: hidden
      padding: $snackbar-wrapper-padding

      transition: .35s settings.$standard-easing
      transition-property: height, width

      @include tools.rounded($snackbar-border-radius)

      @at-root .v-snackbar
        @include tools.variant($snackbar-variants...)

        &--variant-outlined,
        &--variant-tonal
          background: $snackbar-fallback-background

      @media (forced-colors: active)
        border: thick solid

    &__header
      flex-basis: 100%

      &:after
        content: ''
        display: block
        flex-basis: 100%

    &__prepend
      align-self: center
      display: flex
      margin-inline: $snackbar-prepend-margin-inline

    &__prepend + &__content
      padding-inline-start: 0

    &__title
      font-weight: $snackbar-title-font-weight

    &__content
      flex: 1 1
      font-size: $snackbar-font-size
      font-weight: $snackbar-font-weight
      letter-spacing: $snackbar-letter-spacing
      line-height: $snackbar-line-height
      margin-right: auto
      padding: $snackbar-content-padding
      text-align: initial

    &__actions
      align-items: center
      align-self: center
      display: flex
      margin-inline-end: $snackbar-action-margin

      & > .v-btn
        padding: $snackbar-btn-padding
        min-width: auto

    &__timer
      width: 100%
      position: absolute

      &--top
        top: 0

      &--bottom
        bottom: 0

      .v-progress-linear
        transition: .2s linear

    &--absolute
      position: absolute
      z-index: $snackbar-absolute-z-index

    &--vertical .v-snackbar__actions
      flex-basis: 100%
      justify-content: end
      margin-bottom: $snackbar-vertical-action-margin-bottom

      &:before
        content: ''
        display: block
        flex-basis: 100%

    &--center
      align-items: center
      justify-content: center

    &--top
      align-items: flex-start

      @media #{map.get(settings.$display-breakpoints, 'sm-and-down')}
        --v-snackbar-mobile-notch: max(env(safe-area-inset-top), 0px)

    &--bottom
      align-items: flex-end

      @media #{map.get(settings.$display-breakpoints, 'sm-and-down')}
        --v-snackbar-mobile-notch: max(env(safe-area-inset-bottom), 0px)

    &--left,
    &--start
      justify-content: flex-start

    &--right,
    &--end
      justify-content: flex-end

    &--collapsed
      --v-snackbar-current-offset: calc(var(--v-snackbar-gap) * var(--v-snackbar-index, 0))

      .v-snackbar__wrapper
        min-width: 0
        width: calc(var(--v-snackbar-collapsed-width) - 2 * var(--v-snackbar-gap) * var(--v-snackbar-index, 0))
        height: var(--v-snackbar-collapsed-height)

        > *
          opacity: 0

      &.v-snackbar--start,
      &.v-snackbar--left
        .v-snackbar__wrapper
          transform: translateX(calc(var(--v-snackbar-gap) * var(--v-snackbar-index, 0)))

      &.v-snackbar--end,
      &.v-snackbar--right
        .v-snackbar__wrapper
          transform: translateX(calc(-1 * var(--v-snackbar-gap) * var(--v-snackbar-index, 0)))

      .v-progress-linear
        opacity: 0

    .v-avatar
      background: transparent

@include tools.layer('transitions')
  .v-snackbar-transition
    &-enter-active,
    &-leave-active
      transition-duration: .15s
      transition-timing-function: settings.$decelerated-easing

    &-enter-active
      transition-property: opacity, transform

      @media (prefers-reduced-motion: reduce)
        transition-property: opacity

    &-enter-from
      opacity: 0
      transform: scale($snackbar-transition-scale)

    &-leave-active
      transition-property: opacity

    &-leave-to
      opacity: 0