@use './variables' as *

.v-window
  overflow: hidden

  &__container
    display: flex
    flex-direction: column
    height: inherit
    position: relative
    transition: $window-transition

  &__controls
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    display: flex
    align-items: center
    justify-content: space-between
    padding: $window-controls-padding
    pointer-events: none

    > *
      pointer-events: auto

  &--show-arrows-on-hover
    overflow: hidden

    .v-window__left
      transform: translateX(-200%)

    .v-window__right
      transform: translateX(200%)

    &:hover
      .v-window__left,
      .v-window__right
        transform: translateX(0)

  &-x-transition,
  &-x-reverse-transition,
  &-y-transition,
  &-y-reverse-transition
    &-enter-active,
    &-leave-active
      transition: $window-transition

    &-leave-from,
    &-leave-to
      position: absolute !important
      top: 0
      width: 100%

  &-x-transition
    &-enter-from
      transform: translateX(100%)

    &-leave-to
      transform: translateX(-100%)

  &-x-reverse-transition
    &-enter-from
      transform: translateX(-100%)

    &-leave-to
      transform: translateX(100%)

  &-y-transition
    &-enter-from
      transform: translateY(100%)

    &-leave-to
      transform: translateY(-100%)

  &-y-reverse-transition
    &-enter-from
      transform: translateY(-100%)

    &-leave-to
      transform: translateY(100%)