@import './animation.less';
.yc-carousel {
  position: relative;
  &:hover .yc-carousel-arrow-show-hover {
    opacity: 1;
  }
  .yc-carousel-slide {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    .yc-carousel-item {
      position: absolute;
      height: 100%;
      width: 100%;
      user-select: none;
      flex-shrink: 0;
    }
  }
}
// animation
.yc-carousel-animation-slide {
  .yc-carousel-item {
    visibility: hidden;

    &.yc-carousel-item-current {
      visibility: visible;
    }
  }
}
.yc-carousel-animation-fade {
  .yc-carousel-item {
    opacity: 0;

    &.yc-carousel-item-current {
      opacity: 1;
    }
  }
}
// direction
.yc-carousel-direction-vertical {
  flex-direction: column;
}
// outer
.yc-carousel-indicator-outer {
  margin-bottom: 30px;
}
// arrow
.yc-carousel-arrow {
  cursor: pointer;
  position: absolute;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: var(--border-radius-circle);
  color: var(--color-white);
  &:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }
  body[yc-design-theme='dark'] & {
    background-color: rgba(23, 23, 26, 0.3);
    &:hover {
      background-color: rgba(23, 23, 26, 0.5);
    }
  }
}
// show-hover
.yc-carousel-arrow-show-hover {
  opacity: 0;
  transition: all 0.3s;
}
// arrow-positon
.yc-carousel-arrow-left,
.yc-carousel-arrow-right {
  transform: translateY(-50%);
  top: 50%;
  &.yc-carousel-arrow-left {
    left: 12px;
  }
  &.yc-carousel-arrow-right {
    right: 12px;
  }
}
.yc-carousel-arrow-top,
.yc-carousel-arrow-bottom {
  left: 50%;
  transform: translateX(-50%);
  &.yc-carousel-arrow-top {
    top: 12px;
  }
  &.yc-carousel-arrow-bottom {
    bottom: 12px;
  }
}
// indicator
.yc-carousel-indicator {
  position: absolute;
  display: flex;
  &.yc-carousel-indicator-position-outer {
    .yc-carousel-indicator-item {
      background-color: rgba(var(--gray-4), 0.5);
      &:hover,
      &.yc-carousel-indicator-item-active {
        background-color: var(--color-fill-4);
      }
    }

    &.yc-carousel-indicator-shape-slider {
      background-color: rgba(var(--gray-4), 0.5);
      .yc-carousel-indicator-item-slider {
        background-color: var(--color-fill-4);
      }
    }
  }

  .yc-carousel-indicator-item {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    &:hover,
    &.yc-carousel-indicator-item-active {
      background-color: var(--color-white);
    }
  }
}
// indicator-position
.yc-carousel-indicator-position-top,
.yc-carousel-indicator-position-bottom {
  z-index: 2;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  &.yc-carousel-indicator-position-bottom {
    top: unset;
    bottom: 12px;
  }
}
.yc-carousel-indicator-position-left,
.yc-carousel-indicator-position-right {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  &.yc-carousel-indicator-position-right {
    left: unset;
    right: 12px;
  }
}
.yc-carousel-indicator-position-outer {
  left: 50%;
  transform: translateX(-50%);
  &.yc-carousel-indicator-shape-slider {
    bottom: -16px;
  }
  &.yc-carousel-indicator-shape-dot {
    bottom: -22px;
  }
  &.yc-carousel-indicator-shape-line {
    bottom: -20px;
  }
}
// indicator-shape
.yc-carousel-indicator-shape-dot {
  gap: 8px;
  .yc-carousel-indicator-item {
    width: 6px;
    height: 6px;
    border-radius: var(--border-radius-circle);
  }
}
.yc-carousel-indicator-shape-line {
  gap: 8px;
  &.yc-carousel-indicator-position-left,
  &.yc-carousel-indicator-position-right {
    .yc-carousel-indicator-item {
      height: 12px;
      width: 4px;
    }
  }
  &.yc-carousel-indicator-position-top,
  &.yc-carousel-indicator-position-bottom,
  &.yc-carousel-indicator-position-outer {
    .yc-carousel-indicator-item {
      width: 12px;
      height: 4px;
    }
  }
}
.yc-carousel-indicator-shape-slider {
  cursor: pointer;
  border-radius: var(--border-radius-medium);
  background-color: rgba(255, 255, 255, 0.3);
  &.yc-carousel-indicator-position-left,
  &.yc-carousel-indicator-position-right {
    height: 48px;
    width: 4px;
    .yc-carousel-indicator-item-slider,
    .yc-carousel-indicator-item-slider {
      width: 100%;
    }
  }
  &.yc-carousel-indicator-position-top,
  &.yc-carousel-indicator-position-bottom,
  &.yc-carousel-indicator-position-outer {
    width: 48px;
    height: 4px;
    .yc-carousel-indicator-item,
    .yc-carousel-indicator-item-slider {
      height: 100%;
    }
  }
  .yc-carousel-indicator-item {
    flex-shrink: 0;
    flex: 1;
    opacity: 0;
  }
  .yc-carousel-indicator-item-slider {
    position: absolute;
    border-radius: var(--border-radius-medium);
    transition: transform 0.3s;
    background-color: var(--color-white);
  }
}
