@use "../mixins/function.scss" as *;
@use "../mixins/mixins.scss" as *;

@include b(carousel) {
  width: 100%;
  position: relative;
  user-select: none;
  @include m(indicator-position-outside) {
    margin-bottom: 28px;
  }
  @include e(wrapper) {
    height: 100%;
    overflow: hidden;
  }
  @include e(arrow) {
    position: absolute;
    top: 50%;
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: getCssVar("radius", "circle");
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    color: #fff;
    z-index: 999;
    &:hover {
      background-color: rgba(0, 0, 0, 0.4);
    }
  }
  @include e(left-arrow) {
    left: 10px;
  }
  @include e(right-arrow) {
    right: 10px;
  }
  @include e(list) {
    width: 100%;
    height: 100%;
    display: flex;
  }
  @include e(item) {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    img {
      height: 100%;
    }
  }
  @include e(list-3d) {
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1500px;
    perspective-origin: center center;
    transform-style: preserve-3d;
    overflow: hidden;
  }
  @include e(item-3d) {
    position: absolute;
    height: 100%;
    left: 50%;
    user-select: none;
    transform-origin: center center;
    transform-style: preserve-3d;
    will-change: transform;
    transition:
      transform 0.4s getCssVar("bezier", "1"),
      opacity 0.4s;
    img {
      height: 100%;
      object-fit: cover;
    }
  }
  @include e(indicator) {
    position: absolute;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }
  @include e(indicator-item) {
    background-color: getCssVar("color", "fill-2");
    border-radius: getCssVar("radius", "medium");
    cursor: pointer;
    @include when("active") {
      background-color: getCssVar("color", "primary-6");
    }
  }
  @include m(indicator-top) {
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    @include be(carousel, indicator-item) {
      height: 4px;
      width: 12px;
      margin-right: 8px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  @include m(indicator-bottom) {
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    @include be(carousel, indicator-item) {
      height: 4px;
      width: 12px;
      margin-right: 8px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  @include m(indicator-left) {
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    @include be(carousel, indicator-item) {
      height: 12px;
      width: 4px;
      margin-bottom: 8px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  @include m(indicator-right) {
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    @include be(carousel, indicator-item) {
      height: 12px;
      width: 4px;
      margin-bottom: 8px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  @include m(indicator-outside) {
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    @include be(carousel, indicator-item) {
      height: 4px;
      width: 12px;
      margin-right: 8px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}