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

.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))

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

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

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

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

  &__content
    flex-grow: 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: 0

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

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

  &--multi-line &__wrapper
    min-height: $snackbar-multi-line-wrapper-min-height

  &--vertical &__wrapper
    flex-direction: column

    .v-snackbar__actions
      align-self: flex-end
      margin-bottom: $snackbar-vertical-action-margin-bottom

.v-snackbar-transition
  &-enter-active,
  &-leave-active
    transition-duration: .15s
    transition-timing-function: settings.$decelerated-easing

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

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

  &-leave-active
    transition-property: opacity

  &-leave-to
    opacity: 0