@use "../../libs/css/theme" as *;
@use "../../libs/css/mixin" as *;


@include b(swiper) {
  @include flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;

  @include e(wrapper) {
    flex: 1;
    background-color: $hy-background;

    @include m(item) {
      flex: 1;

      @include e(wrapper){
        @include flex;
        position: relative;
        overflow: hidden;
        transition: transform 0.3s;
        flex: 1;


        @include m(image, video){
          flex: 1;
        }

        @include m(title) {
          position: absolute;
          background-color: rgba(0, 0, 0, 0.3);
          bottom: 0;
          left: 0;
          right: 0;
          font-size: 28rpx;
          padding: $hy-border-margin-padding-sm $hy-border-margin-padding-lg;
          color: #ffffff;
          flex: 1;
        }
      }
    }
  }

  @include e(indicator) {
    position: absolute;
    bottom: $hy-border-margin-padding-sm;
  }
}


@include b(swiper-indicator) {
  @include e(wrapper) {
    @include flex;

    @include m(line){
      border-radius: 100px;
      height: 4px;

      @include e(bar) {
        width: 22px;
        height: 4px;
        border-radius: $hy-radius-semicircle;
        background-color: #ffffff;
        transition: transform 0.3s;
      }
    }

    @include m(dot) {
      width: 5px;
      height: 5px;
      border-radius: $hy-radius-semicircle;
      margin: 0 $hy-border-margin-padding-sm;

      @include e(active) {
        width: 12px;
      }
    }
  }
}