/*! rtl:begin:ignore */
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin.less';

@select-prefix-cls: ~'@{kd-prefix}-select';

.@{select-prefix-cls} {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  background-color: transparent;
  cursor: pointer;
  vertical-align: middle;

  &-selector:hover {
    .@{select-prefix-cls}-icon-active {
      color: #3761ca;
    }
  }
  &-visible {
    .@{select-prefix-cls}-icon-active {
      color: #3761ca;
    }

    & div.@{select-prefix-cls}-show-search .@{select-prefix-cls}-selection-item {
      color: @select-placeholder-color;
    }
  }

  &-icon {
    &-arrow {
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
      &-up {
        transform: rotate(180deg);
        transition: transform calc(@transition-duration - 0.1s) @ease;
      }

      &-down {
        transform: rotate(0deg);
        transition: transform calc(@transition-duration - 0.1s) @ease;
      }
    }

    &-clear {
      opacity: 0;
      z-index: 1;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      position: absolute;
      background: #fff;
      transition: opacity 0.15s ease;
      &:hover {
        color: @select-g-color-border-hover;
      }
    }
  }

  &-focused:not(.@{select-prefix-cls}-error) {
    .focusColor();
  }
  &-placeholder {
    position: absolute;
    color: @select-placeholder-color;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    right: 28px;
    left: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
  }

  &-borderless {
    border: none;
  }

  &-underline {
    border-bottom: 1px solid @select-g-color-border;
    &:hover:not(.@{select-prefix-cls}-multiple-disabled):not(.@{select-prefix-cls}-single-disabled):not(
        .@{select-prefix-cls}-error
      ) {
      border-bottom: 1px solid @select-g-color-border-hover;
    }
  }

  &-bordered {
    border: 1px solid @select-border-g-color-border;
    padding-left: @select-bordered !important;
    border-radius: @select-border-radius-border;
    &:hover:not(.@{select-prefix-cls}-multiple-disabled):not(.@{select-prefix-cls}-single-disabled):not(
        .@{select-prefix-cls}-error
      ) {
      border: 1px solid @select-g-color-border-hover;
    }

    .@{select-prefix-cls}-suffix {
      padding-right: 8px;
    }

    &.@{select-prefix-cls}-single {
      .@{select-prefix-cls}-selection-search {
        padding-left: @select-bordered;
      }
    }

    .@{select-prefix-cls}-placeholder {
      padding-left: @select-bordered;
    }
  }

  &-wrapper {
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    padding: @select-wrapper-padding;
    max-width: 100%;
    color: #212121;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  &-show-search {
    cursor: text;

    &.@{select-prefix-cls}-single .@{select-prefix-cls}-selection-search {
      .@{select-prefix-cls}-selection-search-input {
        cursor: text;
      }
    }
  }

  &-dropdown {
    display: block;
    left: 0;
    z-index: @select-z-index;
    box-sizing: border-box;
    padding: @select-dropdown-padding-vertical 0;
    margin: 0;
    overflow: auto;
    font-size: @select-list-font-size;
    font-variant: initial;
    background-color: @select-dropdown-bg;
    border-radius: @select-g-radius-border;
    outline: none;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);

    &-scroll {
      overflow-y: auto;
    }

    &-empty {
      padding: 5px 12px;
    }

    // 搜索框
    &-search {
      padding: 5px 6px;
      &-hidden {
        display: none;
      }
    }
  }

  &-multiple-dropdown-panel {
    .@{select-prefix-cls}-dropdown:not(.@{select-prefix-cls}-dropdown-no-data) {
      padding-bottom: 0;
    }
  }

  // 下拉列表选项
  &-item {
    .item();
    cursor: pointer;
    transition: background 0.3s ease;

    &-option {
      display: flex;
      min-width: 75px;

      &-content {
        max-width: @select-item-max-width;
        .over();

        .@{kd-prefix}-checkbox {
          width: 100%;
          display: flex;

          .@{kd-prefix}-checkbox-children {
            display: inline-block;
          }
        }
      }

      &-active:not(&-disabled) {
        background-color: @select-item-active-bg;
      }

      &-selected:not(&-disabled) {
        color: @select-item-selected-color;
        background-color: @select-item-selected-bg;
      }

      &-disabled {
        color: @select-g-item-text-color-disabled;
        cursor: not-allowed;
        background-color: @select-disabled-option-bg;
      }
    }
  }

  // 选择器框大小
  &-size-small {
    .select-input-size(@select-small-height, @select-small-height, @select-small-line-height, @select-small-font-size);
  }

  &-size-middle {
    .select-input-size(@select-middle-height, @select-middle-height, @select-middle-line-height, @select-middle-font-size);
  }

  &-size-large {
    .select-input-size(@select-large-height, @select-large-height, @select-large-line-height, @select-large-font-size);
  }

  &-suffix {
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    display: flex;
    flex: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
  }
  .@{select-prefix-cls}-single {
    .@{select-prefix-cls}-selection {
      &-search {
        position: absolute;
        right: 28px;
        left: 0;
        height: 100%;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        &-input {
          outline: 0;
          border-radius: 0;
          border: none;
          background: transparent;
          height: 100%;
          width: 100%;
          cursor: pointer;
        }
      }
      &-item {
        display: inline-block;
        .over();
      }
    }
    &-focused:not(.@{select-prefix-cls}-error) {
      .focusColor();
    }
    &-disabled {
      background-color: @select-color-background-disabled;
      color: @select-color-text-disabled;
      &:hover {
        cursor: not-allowed;
      }

      .@{select-prefix-cls}-suffix {
        color: @select-arrow-icon-color-text-disabled;
      }
    }

    .@{select-prefix-cls}-icon-clear {
      color: @select-clear-color;
      &:hover {
        color: @select-clear-color-hover;
      }
    }
    &-text {
      color: @select-single-color-text;
      .over();
    }
    &-disabled-text {
      color: @select-color-text-disabled;
    }
  }

  .@{select-prefix-cls}-single-isnotMobile:hover .@{select-prefix-cls}-icon-clear {
    opacity: 1;
  }

  .@{select-prefix-cls}-single-isMobile {
    .@{select-prefix-cls}-icon-clear {
      opacity: 1;
    }
  }
  .@{select-prefix-cls}-selection-item {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    vertical-align: middle;
    max-width: 100%;
    cursor: default;
    user-select: none;
    &.@{select-prefix-cls}-selection-item-small {
      height: 20px;
      line-height: 18px;
      font-size: 12px;
    }

    &.@{select-prefix-cls}-selection-item-middle {
      font-size: 12px;
      height: 20px;
      line-height: 18px;
    }

    &.@{select-prefix-cls}-selection-item-large {
      font-size: 14px;
      line-height: 22px;
      height: 22px;
    }

    &-content {
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
      padding: 0 7px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      border: 1px solid #ccc;
      color: #212121;
    }

    &-span {
      position: relative;
      margin-left: 0.5px;
      box-sizing: border-box;
    }
    &-input {
      cursor: text;
      margin: 0;
      padding: 0;
      background: 0 0;
      border: none;
      outline: none;
      appearance: none;
      width: 100%;
      min-width: 20px;
    }
  }

  // 多选
  &-multiple {
    .@{select-prefix-cls}-selection {
      &-tag {
        max-width: calc(100% - 5px);

        .@{kd-prefix}-tag {
          margin: 2px 8px 2px 0;
          max-width: 100%;
        }
      }
      &-search {
        position: relative;
        max-width: 100%;
        &-input {
          outline: 0;
          border-radius: 0;
          border: none;
          background: transparent;
          width: 100%;
        }
        &-mirror {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 999;
          white-space: pre;
          visibility: hidden;
        }
      }
    }
    &-disabled {
      cursor: not-allowed;
      background-color: @select-color-background-disabled;
      color: @select-color-text-disabled;

      .@{select-prefix-cls}-suffix {
        color: @select-arrow-icon-color-text-disabled;
      }
    }
    &:hover .@{select-prefix-cls}-icon-clear {
      opacity: 1;
    }
    .@{select-prefix-cls}-icon-clear {
      color: @select-clear-color;
      &:hover {
        color: @select-clear-color-hover;
      }
    }
    &-selector {
      position: relative;
      cursor: text;
      padding-right: 24px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
    .@{select-prefix-cls}-wrapper {
      &:hover:not(.@{select-prefix-cls}-multiple-disabled) {
        border-bottom: 1px solid @select-g-color-border-hover;
      }
    }

    &-footer {
      color: @select-font-color;
      display: inline-flex;
      align-items: center;
      width: 100%;
      padding: 0 12px;
      height: 40px;
      line-height: 30px;
      border-top: 1px solid #d9d9d9;
      box-sizing: border-box;

      &-hadSelected {
        color: #999999;
        padding-left: 12px;
        &-number {
          color: @select-footer-g-text-color-selected;
          padding: 0 2px;
        }
      }
    }
  }

  &-error:not(.@{select-prefix-cls}-single-disabled):not(.@{select-prefix-cls}-multiple-disabled) {
    border-color: @select-error-color;
  }

  &-dropdown-panel {
    &.topLeft.hidden,
    &.bottomLeft.hidden,
    &.topRight.hidden,
    &.bottomRight.hidden {
      opacity: 0;
      visibility: hidden;
      transition: all calc(@transition-duration - 0.1s) @ease;
    }
  }
}
.@{select-prefix-cls}-rtl {
  direction: rtl;
  .@{select-prefix-cls}-selector {
    .@{select-prefix-cls}-wrapper {
      padding: 1px 0 1px 28px;
      .@{select-prefix-cls}-suffix {
        position: absolute;
        right: auto;
        left: 0;
        margin-left: 0;
        margin-right: 8px;
      }
      .@{select-prefix-cls}-placeholder {
        right: 0;
        left: 28px;
      }
      &.@{select-prefix-cls}-single {
        .@{select-prefix-cls}-selection-search {
          padding-left: auto;
          position: absolute;
          left: 28px;
          right: 0;
          height: 100%;
          top: 0;
          bottom: 0;
        }
      }
    }
    .@{select-prefix-cls}-multiple {
      .@{select-prefix-cls}-selection-tag {
        .@{kd-prefix}-tag {
          margin: 2px 0 2px 8px;
          &-closeWrapper {
            margin-right: 4px;
            margin-left: 0;
          }
        }
      }
    }
    .@{select-prefix-cls}-bordered {
      padding-left: auto !important;
      padding-right: @select-bordered !important;
      .@{select-prefix-cls}-suffix {
        padding-left: 8px;
      }

      &.@{select-prefix-cls}-single {
        .@{select-prefix-cls}-selection-search {
          padding-right: @select-bordered;
        }
      }

      .@{select-prefix-cls}-placeholder {
        padding-right: @select-bordered;
      }
    }
  }
  .@{select-prefix-cls}-dropdown {
    .@{select-prefix-cls}-multiple-footer {
      &-hadSelected {
        padding-right: 12px;
        padding-left: 0;
      }
      .@{kd-prefix}-checkbox {
        &-default-margin {
          margin-right: 0;
          margin-left: 4px;
        }
      }
    }
  }
}

.@{select-prefix-cls}-item-rtl {
  direction: rtl;
  &.@{select-prefix-cls}-item {
    .@{select-prefix-cls}-item-option-content {
      .@{kd-prefix}-checkbox {
        &-default-margin {
          margin-right: 0;
          margin-left: 4px;
        }
      }
    }
  }
}
/*! rtl:end:ignore */