@import '~@alifd/next/lib/core/index-noreset'; // next core style
@import '~@alifd/next/lib/slider/scss/variable';
@import '~@alifd/next/lib/slider/scss/mixin';
@import './variables.scss';

#{$slick-prefix} {
  &-arrow {
    &.inner {
      border-radius: 100%;

      &:focus,
      &:hover {
        background: rgba(255, 255, 255, 0.25);
      }
    }

    &.outer {
      border-radius: 100%;

      &:focus,
      &:hover {
        background: rgba(115, 115, 115, 0.25);
      }
    }
  }

  /* 水平滑动 */
  &#{$slick-prefix}-hoz {
    #{$slick-prefix}-arrow {
      &.medium.inner,
      &.large.inner {
        &.#{$css-prefix}slick-prev {
          left: $b-design-slider-next-slick-prev-next-offset;
        }

        &.#{$css-prefix}slick-next {
          right: $b-design-slider-next-slick-prev-next-offset;
        }
      }
    }
  }
}

#{$slick-prefix}-dots-item {
  .#{$css-prefix}dots-line {
    width: $b-design-slider-dots-line-width;
    height: $b-design-slider-dots-line-height;
    border-radius: 2px;
    transition: width 0.2s;
  }

  &.active {
    .#{$css-prefix}dots-line {
      width: $b-design-slider-dots-line-active-width;
    }
  }
}

.#{$css-prefix}slick-dots {
  &.hoz {
    .#{$css-prefix}slick-dots-item {
      margin-right: $s-2;
      margin-left: 0;
    }
  }
}

.#{$css-prefix}slick {
  .#{$css-prefix}slick-arrow {
    .#{$css-prefix}icon {
      height: 100%;
      display: flex;
    }
  }
}