@import '../../style/themes/index';
@import './mixin.less';
@carousel-prefix-cls: ~'@{kd-prefix}-carousel';

.@{carousel-prefix-cls} {
  &-root {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: row;
    overflow: hidden;
    flex: 1;
  }

  &-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    position: relative;

    &-item {
      position: relative;
      flex-shrink: 0;
      height: 100%;
      width: 100%;
    }

    &-slide {
      width: 100%;

      .@{carousel-prefix-cls}-list-item {
        opacity: 1;
        border-radius: @carousel-boder-radius;

        &-animation {
          transition: opacity 0.3s ease;
        }

        &-none-animation {
          transition: none;
        }

        &-not-hidden {
          opacity: 1;
        }

        &-hidden {
          opacity: 0;
        }
      }
    }

    &-fade {
      flex: 1;

      .@{carousel-prefix-cls}-list-item {
        opacity: 1;

        &-animation {
          transition: opacity 0.3s ease;
        }

        &-none-animation {
          transition: none;
        }

        &-not-hidden {
          opacity: 1;
          z-index: 1;
        }

        &-hidden {
          opacity: 0;
          z-index: 0;
        }
      }
    }

    &-display {
      width: 100%;

      .@{carousel-prefix-cls}-list-item {
        display: block;

        &-not-hidden {
          display: block;
        }

        &-hidden {
          display: none;
        }
      }
    }
  }

  &-slidebar {
    position: absolute;
    list-style: none;
    padding: 0;
    z-index: 1;

    &-left {
      .vertical;
      left: @carousel-dots-margin-left;
    }

    &-right {
      .vertical;
      right: @carousel-dots-margin-right;
    }

    &-bottom {
      .horizontal;
      bottom: @carousel-dots-margin-bottom;
    }

    &-top {
      .horizontal;
      top: @carousel-dots-margin-top;
    }

    &-dot>button {
      display: block;
      border-radius: @carousel-dots-boder-radius;
      box-sizing: border-box;
      border: 0;
      height: 100%;
      padding: 0;
      width: 100%;
      cursor: pointer;
      outline: none;
      background-color: @carousel-dots-color-background;
    }

    &-dot {
      display: block;
      border-radius: @carousel-dots-boder-radius;
      box-sizing: border-box;
      border: 0;
      height: 100%;
      padding: 0;
      width: 100%;
      cursor: pointer;
      outline: none;

      &-active {
        opacity: 1;

        &>button {
          background-color: @carousel-dots-color-background-active;
          opacity: 1;
        }
      }
    }
  }

  &-jump {
    position: absolute;
    top: 50%;
    left: unset;
    right: 16px;
    transform: translateY(-50%);
    z-index: 1;

    &-left {
      left: 16px;
      right: unset;
    }

    &:not(.@{carousel-prefix-cls}-jump-disabled) {
      cursor: pointer;
    }

    >*:first-child {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &-icon {
      font-size: 20px;
      color: @carousel-jump-icon-color;

      &:hover {
        color: @carousel-jump-icon-color-hover;
      }
    }

    &-disabled {
      cursor: not-allowed;

      .@{carousel-prefix-cls}-jump-icon:hover {
        color: @carousel-jump-icon-color;
      }
    }
  }
}

.vertical {
  display: flex;
  flex-direction: column;
  top: 50%;
  transform: translateY(-50%);

  &>li {
    margin: @carousel-dots-marigin 0;
    width: @carousel-dots-height;
    height: @carousel-dots-width;
  }
}

.horizontal {
  display: flex;
  flex-direction: row;
  left: 50%;
  transform: translateX(-50%);

  &>li {
    margin: 0 @carousel-dots-marigin;
    height: @carousel-dots-height;
    width: @carousel-dots-width;
  }
}