@use 'mixins/mixins' as *;
@use 'common/var' as *;

@include b(carousel) {
  @include e(item) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    overflow: hidden;
    z-index: calc(getCssVar('index', 'normal') - 1);

    @include when(active) {
      z-index: calc(getCssVar('index', 'normal') - 1);
    }

    @include when(animating) {
      transition: transform 0.4s ease-in-out;
    }

    @include m(card) {
      width: 50%;
      transition: transform 0.4s ease-in-out;

      &.is-in-stage {
        cursor: pointer;
        z-index: getCssVar('index', 'normal');

        &:hover .#{$namespace}-carousel__mask,
        &.is-hover .#{$namespace}-carousel__mask {
          opacity: 0.12;
        }
      }

      &.is-active {
        z-index: calc(getCssVar('index', 'normal') + 1);
      }
    }

    @include m(card-vertical) {
      width: 100%;
      height: 50%;
    }
  }

  @include e(mask) {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: getCssVar('color', 'white');
    opacity: 0.24;
    transition: getCssVar('transition-duration', 'fast');
  }
}