@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../../styles/mixins.scss';

$class-prefix: 'cn-ui-m';
$sizes: small, medium, large;

.#{$hashClassName}.cn-ui-m-slider {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  &-track {
    padding: 0;
  }
}

.#{$hashClassName}.cn-ui-m-slider-horizontal {
  .cn-ui-m-slider-track {
    transform: translateX(0%);
    &-inner {
      width: 100%;
    }
  }
}
.#{$hashClassName}.cn-ui-m-slider-vertical {
  .cn-ui-m-slider-track {
    transform: translateY(0%);
    &-inner {
      height: 100%;
    }
  }
}

.#{$hashClassName}.cn-ui-m-slider {
  --height: auto;
  --width: 100%;
  --border-radius: 0;
  --track-padding: 0;

  --slide-size: 100%;
  --track-offset: 0%;
  position: relative;
  z-index: 0;

  display: block;
  width: var(--width);
  height: var(--height);
  overflow: hidden;
  border-radius: var(--border-radius);
  .cn-ui-m-slider {
    &-track {
      width: 100%;
      height: 100%;
      padding: var(--track-padding);
      white-space: nowrap;
      &-allow-touch-move {
        cursor: grab;
      }
      &-inner {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        height: 100%;
        overflow: visible;
      }
    }
  }

  .cn-ui-m-slider-arrow {
    .arrow-icon {
      width: $m-s-44;
      height: $m-s-44;
      border-radius: $m-s-24;
      padding: 0;
      color: $m-color-bg-white;
      border: none;
      background-color: rgba(0, 0, 0, 0.2);
      transform: translateY(-50%);
      &.cn-ui-m-button-disabled {
        color: $m-color-bg-disabled;
      }
    }
    .arrow-left {
      position: absolute;
      top: 50%;
      left: $m-s-12;
    }
    .arrow-right {
      position: absolute;
      top: 50%;
      right: $m-s-12;
    }

    .icon-arrow-right {
      margin-left: $m-s-2;
    }
  }
  &.cn-ui-m-slider-vertical {
    .cn-ui-m-slider-arrow {
      .arrow-icon {
        transform: rotate(90deg) translateY(50%);
      }
      .arrow-left {
        position: absolute;
        top: $m-s-4;
        left: 50%;
      }
      .arrow-right {
        position: absolute;
        top: calc(var(--height) - #{$m-s-48});
        right: auto;
        left: 50%;
      }
    }
  }

  .cn-ui-m-slider-slide {
    position: relative;
    display: block;
    flex: none;
    width: 100%;
    height: 100%;
    white-space: unset;
  }

  .cn-ui-m-slider-item {
    display: block;
    width: 100%;
    height: 100%;
    white-space: normal;
  }

  .cn-ui-m-slider-indicator {
    display: flex;
    .indicator-number {
      color: $m-color-bg-white;
      font-size: $m-font-size-headline-6;
    }
    .indicator-dot {
      width: $m-s-6;
      height: $m-s-6;
      margin-right: $m-s-6;
      background-color: $m-color-bg-white;
      border-radius: $m-s-6;
      cursor: pointer;
      opacity: 0.5;
      &:last-child {
        margin-right: 0;
      }
    }
    .indicator-dot-active {
      opacity: 1;
    }
  }
}

.#{$hashClassName}.cn-ui-m-slider-horizontal {
  .cn-ui-m-slider-track-allow-touch-move {
    touch-action: pan-y;
  }
  .cn-ui-m-slider-indicator {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
  }
  .cn-ui-m-slider-track {
    transform: translateX(var(--track-offset));
    &-inner {
      flex-direction: row;
      width: var(--slide-size);
    }
  }
}
.#{$hashClassName}.cn-ui-m-slider-vertical {
  .cn-ui-m-slider-track-allow-touch-move {
    touch-action: pan-x;
  }
  .cn-ui-m-slider-indicator {
    position: absolute;
    top: 50%;
    right: 6px;
    flex-direction: column;
    transform: translateY(-50%);
    .indicator-dot {
      margin-bottom: $m-s-6;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .cn-ui-m-slider-track {
    transform: translateY(var(--track-offset));
    &-inner {
      flex-direction: column;
      height: var(--slide-size);
    }
  }
}