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

@include tools.layer('components')
  .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%)

      @at-root #{selector.append(':has(.v-window__controls--right)', &)}
        .v-window__left
          transform: translateX(200%)

      .v-window__right
        transform: translateX(200%)

      @at-root #{selector.append(':has(.v-window__controls--left)', &)}
        .v-window__right
          transform: translateX(-200%)

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

    &--vertical-arrows
      .v-window__controls
        flex-direction: column
        justify-content: center
        gap: $window-controls-vertical-gap

        &--left
          align-items: start

        &--right
          align-items: end

        .v-window__left,
        .v-window__right
          .v-icon
            transform: rotate(90deg)

    &--crossfade > .v-window__container
      isolation: isolate

      > .v-window-item
        mix-blend-mode: $window-crossfade-blend-mode

@include tools.layer('overrides')
  .v-window-item
    transition-duration: var(--v-window-transition-duration, revert-layer)

@include tools.layer('transitions')
  .v-window
    &-x-transition,
    &-x-reverse-transition,
    &-y-transition,
    &-y-reverse-transition
      &-enter-active,
      &-leave-active
        transition: $window-transition

        @media (prefers-reduced-motion: reduce)
          transition-duration: 0s

      &-leave-from,
      &-leave-to
        position: absolute
        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%)

  .v-window
    &-crossfade-transition
      &-enter-active,
      &-leave-active
        transition: $window-transition

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

      &-enter-from,
      &-leave-to
        opacity: 0