@use '../../_styles/mixin.scss' as *;

.o-carousel {
  position: relative;
  visibility: hidden;
  background: transparent;
  opacity: 0;
  transition: opacity var(--o-duration-m1);
}
.o-carousel-visible {
  visibility: visible;
  opacity: 1;
}

.o-carousel-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

// arrow
.o-carousel-arrow-prev,
.o-carousel-arrow-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  user-select: none;
  cursor: pointer;
  opacity: 1;
  transition: opacity var(--o-duration-m1) var(--o-easing-standard);
}

.o-carousel-hover-arrow {
  .o-carousel-arrow-prev,
  .o-carousel-arrow-next {
    opacity: 0;
  }
  @include hover {
    .o-carousel-arrow-prev,
    .o-carousel-arrow-next {
      opacity: 1;
    }
  }
}

.o-carousel-arrow-prev {
  top: 50%;
  left: 12px;
  transform: translate3d(0, -50%, 0);
}

.o-carousel-arrow-next {
  top: 50%;
  right: 12px;
  transform: translate3d(0, -50%, 0);
}

.o-carousel-arrow-icon {
  font-size: var(--carousel-arrow-size);
  color: var(--carousel-arrow-color);
  background-color: var(--carousel-arrow-bg-color);
  border-radius: 50%;
  opacity: var(--carousel-arrow-opacity);
  @include hover {
    opacity: var(--carousel-arrow-opacity-hover);
    color: var(--carousel-arrow-color-hover);
    background-color: var(--carousel-arrow-bg-color-hover);
  }
}

// indicator
.o-carousel-indicator-wrap {
  position: absolute;
  left: 0;
  bottom: var(--carousel-indicator-offset);
  display: flex;
  justify-content: center;
  z-index: 2;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

.o-carousel-indicator-item {
  & + .o-carousel-indicator-item {
    margin-left: var(--carousel-indicator-gap);
  }
}

.o-carousel-indicator-bar {
  position: relative;
  width: var(--carousel-indicator-width);
  height: 12px;
  display: flex;
  align-items: center;
  cursor: pointer;

  @include hover {
    .o-carousel-indicator-line {
      background-color: var(--carousel-indicator-bg-color-hover);
    }
  }

  &:active {
    .o-carousel-indicator-line {
      background-color: var(--carousel-indicator-bg-color-active);
    }
  }
}

.o-carousel-indicator-line {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: var(--carousel-indicator-height);
  border-radius: var(--carousel-indicator-height);
  background-color: var(--carousel-indicator-bg-color);
  transition: background-color var(--o-duration-m2) var(--o-easing-standard);

  &::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--carousel-indicator-height);
    border-radius: var(--carousel-indicator-height);
    background-color: var(--carousel-indicator-bg-color);
    transform-origin: 0 center;
  }
}

@keyframes indicator-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(100%);
  }
}

.o-carousel-indicator-bar-selected {
  .o-carousel-indicator-line {
    &::after {
      background-color: var(--carousel-indicator-bg-color-selected);
    }
  }
}
.o-carousel-autoplay {
  .o-carousel-indicator-line::after {
    transform: scaleX(100%);
  }
  &.is-playing {
    .o-carousel-indicator-bar-selected {
      .o-carousel-indicator-line::after {
        animation: indicator-grow var(--carousel-interval, '5000ms') var(--o-easing-linear);
      }
    }
  }
}

// gallery
.o-carousel-container-gallery {
  height: 100%;
  position: absolute;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  &.is-animating {
    will-change: transform;
    transition: transform var(--o-duration-l) var(--o-easing-emphasized);
  }
}
.o-carousel-item-gallery {
  position: absolute;
  left: 0;
  flex-shrink: 0;
}

// 处理点击切换时光标样式
.o-carousel-click-to-switch {
  .o-carousel-item-gallery:not(.o-carousel-toggle-current) {
    cursor: pointer;
  }
}

// toggle
@keyframes carousel-toggle {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.o-carousel-container-toggle {
  height: 100%;
  position: absolute;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
}
.o-carousel-item-toggle {
  position: absolute;
  left: 0;
  flex-shrink: 0;
  z-index: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
}
.o-carousel-toggle-current {
  opacity: 1;
  z-index: 2;
}

.o-carousel-toggle-in {
  animation: carousel-toggle var(--o-duration-l) var(--o-easing-emphasized) forwards;
  z-index: 2;
}
.o-carousel-toggle-out {
  animation: carousel-toggle var(--o-duration-l) var(--o-easing-emphasized) reverse forwards;
  z-index: 1;
}