@carousel-prefix: ~'@{prefix}carousel';

.@{carousel-prefix} {
  position: relative;
  & &-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
  }
  & &-list {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
    .@{carousel-prefix}-item {
      background-position: center;
      background-repeat: no-repeat;
      flex-shrink: 0;
      width: 100%;
      height: 100%;
      position: relative;
      position: relative;
      .@{carousel-prefix}-bg {
        height: 100%;
        background-position: center;
        background-size: cover;
      }
      .@{carousel-prefix}-bg-pointer {
        cursor: pointer;
      }
      &.@{carousel-prefix}-effect-item {
        position: absolute;
      }
    }
  }
  .@{carousel-prefix}-arrow {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: 0.3s;
    &-left,
    &-right {
      z-index: 2;
      position: absolute;
      cursor: pointer;
      opacity: 0.4;
      transition: 0.5s;
      top: 0;
      bottom: 0;
      width: 50px;
      &:hover {
        opacity: 1;
      }
      .h-icon-left,
      .h-icon-right {
        position: absolute;
        color: #fff;
        font-size: 32px;
        .middle-center;
      }
    }
    &-left {
      left: 0%;
    }
    &-right {
      right: 0%;
    }
    &.@{carousel-prefix}-arrow-hover {
      opacity: 0;
    }
  }
  &:hover &-arrow-hover {
    opacity: 1;
  }
  .@{carousel-prefix}-arrow-hidden {
    display: none !important;
  }
}

.@{carousel-prefix}-pagination {
  z-index: 3;
  position: relative;

  &-circle,
  &-square {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }

  &-circle &-item,
  &-square &-item {
    opacity: 0.4;
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
    position: relative;
    height: 15px;
    transition: 0.5s;
    > span {
      display: inline-block;
      background-color: #fff;
    }
    &.active {
      opacity: 1;
    }
    &:last-of-type {
      margin-right: 0;
    }
  }
  &-circle &-item > span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }
  &-square &-item > span {
    width: 25px;
    height: 3px;
    border-radius: 4px;
  }
  &-hidden {
    display: none;
  }
}

.h-carousel-effect-fade-enter-active,
.h-carousel-effect-fade-leave-active {
  transition: opacity 1s;
}
.h-carousel-effect-fade-enter, .h-carousel-effect-fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}