@import '../bootstrap'

v-snack-rtl()
  &__content
    .v-btn
      margin: 0 24px 0 0

rtl(v-snack-rtl, "v-snack")

.v-snack
  position: fixed
  display: flex
  align-items: center
  color: $snackbar-color
  pointer-events: none
  z-index: 1000
  font-size: 14px
  left: 0
  right: 0

  &--absolute
    position: absolute

  &--top
    top: 0

  &--bottom
    bottom: 0

  &__wrapper
    display: flex
    align-items: center
    background-color: $snackbar-background-color
    pointer-events: auto
    width: 100%
    elevation(6)

  &__content
    width: 100%
    height: 48px
    padding: 14px 24px
    display: flex
    align-items: center
    justify-content: space-between
    overflow: hidden

    .v-btn
      color: $snackbar-color
      flex: 0 0 auto
      padding: 8px
      margin: 0 0 0 24px
      height: auto
      min-width: auto
      width: auto

      &__content
        margin: -2px

      &::before
        display: none

  &--multi-line &__content
    height: 80px
    padding: 24px

  &--vertical &__content
    height: 112px
    padding: 24px 24px 14px
    flex-direction: column
    // https://stackoverflow.com/questions/35111090/text-in-a-flex-container-doesnt-wrap-in-ie11
    align-items: stretch

    .v-btn
      &.v-btn //specificity
        justify-content: flex-end
        padding: 0
        margin-left: 0
        margin-top: 24px

      &__content
        flex: 0 0 auto
        margin: 0

  &--auto-height &__content
    height: auto

v-snack-sm-and-up-rtl()
  @media $display-breakpoints.sm-and-up
    &__content .v-btn:first-of-type
      margin-left: 0
      margin-right: 42px

rtl(v-snack-sm-and-up-rtl, "v-snack")

@media $display-breakpoints.sm-and-up
  .v-snack
    &__wrapper
      width: auto
      max-width: 568px
      min-width: 288px
      margin: 0 auto
      border-radius: 2px

      .v-snack--left &
        margin-left: 0
      .v-snack--right &
        margin-right: 0

    &--left, &--right
      margin: 0 $snackbar-corner-offset
      &^[0]--top
        transform: translateY($snackbar-corner-offset)
      &^[0]--bottom
        transform: translateY(0 - $snackbar-corner-offset)

    &__content .v-btn:first-of-type
      margin-left: 42px

.v-snack-transition
  &-enter-active,
  &-leave-active
    transition: transform .4s $transition.swing
    .v-snack__content
      transition: opacity .3s linear .1s

  &-enter
    .v-snack__content
      opacity: 0

  &-enter-to,
  &-leave
    .v-snack__content
      opacity: 1

  &-enter,
  &-leave-to
    &.v-snack.v-snack--top
      // Extra 8px to hide the bottom shadow
      transform: translateY(calc(-100% - 8px))
    &.v-snack.v-snack--bottom
      transform: translateY(100%)