@import "mixins/mixins";
@import "common/var";

@include b(carousel) {
  // @include e(container) {
  //   // & > * {
  //   //   left: 50%;
  //   //   transform: translateX(50%) translateZ(-400px);
  //   //   // transform: translateX(-50%) translateZ(-400px);
  //   //   opacity: 0;
  //   //   animation: commonAnimation;
  //   // }
  // }
  @include e(item) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    overflow: hidden;
    z-index: #{$--index-normal - 1};

    @include when(active) {
      z-index: #{$--index-normal + 1};
    }

    @include when(animate) {
      transition: transform 0.4s ease-in-out;
    }
    @include when(canimate) {
      transition: transform 0.5s ease-in-out, opacity 1.5s;
      transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1);
      transition-duration: .3s;
      animation-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1);
      animation-duration: .3s;
    }
    @include when(current) {
      // transform: translateX(-50%) translateZ(0);
      opacity: 1;
      transition: transform 0.4s ease-in-out, opacity .5s;
      animation: arco-carousel-card-middle-to-top;
      // animation: carouselCurrent;
    }
    @include when(prev) {
      // transform: translateX(-100%) translateZ(-200px);
      opacity: 0.4;
      transition: transform 0.4s ease-in-out, opacity .5s;
      // animation: carouselPrev;
    }
    @include when(next) {
      // transform: translateX(0%) translateZ(-200px);
      opacity: 0.4;
      transition: transform 0.3s ease-in-out, opacity 1s;
      // animation: carouselNext;
    }

    // @include when(fade) {
    //   animation: fade 0.4s infinite;
    // }

    @include m(card) {
      width: 50%;
      transition: transform 0.4s ease-in-out;
      &.is-in-stage {
        cursor: pointer;
        z-index: $--index-normal;
        &:hover .el-carousel__mask,
        &.is-hover .el-carousel__mask {
          opacity: 0.12;
        }
      }
      &.is-active {
        z-index: #{$--index-normal + 1};
      }
      &.is-gray {
        opacity: 0.4;
      }
    }
  }

  @include e(mask) {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: $--color-white;
    opacity: 0.24;
    transition: 0.2s;
  }
}

@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}