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

@city-picker-prefix-cls: ~'@{kd-prefix}-city-picker';
@tabs-prefix-cls: ~'@{kd-prefix}-tabs';
@popper-prefix-cls: ~'@{kd-prefix}-popper';

.@{city-picker-prefix-cls} {
  position: relative;
  box-sizing: border-box;
  background-color: transparent;
  cursor: pointer;
  vertical-align: middle;
  display: flex;
  flex-direction: column;

  &-selector {
    width: 100%;
  }
  &-selector:hover {
    .@{city-picker-prefix-cls}-icon-active {
      color: #3761ca;
    }
  }

  &-description {
    color: #666666;
    font-size: 12px;
  }

  &-visible {
    .@{city-picker-prefix-cls}-icon-active {
      color: #3761ca;
    }

    & div.@{city-picker-prefix-cls}-show-search .@{city-picker-prefix-cls}-selection-item {
      color: @city-picker-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;
      position: absolute;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      background: #fff;
      transition: opacity 0.15s ease;
      font-size: @city-picker-clear-font-size;
      &:hover {
        color: @city-picker-g-color-border-hover;
      }
    }
  }

  &-placeholder {
    position: absolute;
    color: @city-picker-placeholder-color;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    right: 24px;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
  }

  &-borderless {
    border: none;
  }

  &-underline {
    border-bottom: 1px solid @city-picker-g-color-border;
    &:hover:not(.@{city-picker-prefix-cls}-disabled) {
      border-bottom: 1px solid @city-picker-g-color-border-hover;
    }
  }

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

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

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

  &-wrapper {
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    padding: @city-picker-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;

    .@{city-picker-prefix-cls}-icon-clear {
      color: @city-picker-clear-color;
      &:hover {
        color: @city-picker-clear-color-hover;
      }
    }
  }
  &-isNotMobile-hover {
    &:hover .@{city-picker-prefix-cls}-icon-clear {
      opacity: 1;
    }
  }
  &-isMobile-clear {
    .@{city-picker-prefix-cls}-icon-clear {
      opacity: 1;
    }
  }
  &-show-search {
    cursor: text;
  }

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

    &.@{popper-prefix-cls}-bottom-start {
      &-in {
        animation-name: kdSlideUpIn;
      }

      &-out {
        animation-name: kdSlideUpOut;
      }
    }
    // 调整tabs样式
    .@{tabs-prefix-cls}-tab-list {
      width: 100%;

      & > span {
        width: 50%;
      }

      .@{kd-prefix}-tab-pane {
        text-align: center;

        &-type-line {
          padding: 0 12px;
          font-size: 12px;

          .@{kd-prefix}-tab-pane-text {
            .over();
            width: 100%;
          }
        }
      }
    }

    .@{tabs-prefix-cls}-noContainer {
      height: unset;
    }

    .@{tabs-prefix-cls}-right-arrows {
      display: none;
    }

    &-empty {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #b2b2b2;
      font-size: 14px;
    }

    &-common {
      height: 32px;
      line-height: 32px;
      padding: 0 12px;
      background: #fafafa;
      color: @city-picker-font-color;
    }

    &-loading {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &.topLeft.hidden,
    &.bottomLeft.hidden,
    &.topRight.hidden,
    &.bottomRight.hidden {
      opacity: 0;
      visibility: hidden;
      transition: all calc(@transition-duration - 0.1s) @ease;
    }
  }

  &-list {
    padding: 8px 0;
    max-height: 320px;
    overflow-y: auto;
    box-sizing: content-box;

    // 下拉列表选项
    &-item {
      .over();
      .item();
      cursor: pointer;

      &-info {
        color: @city-picker-placeholder-color;
        white-space: nowrap;
      }

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

      &-selected:not(&-disabled) {
        background-color: @city-picker-item-selected-bg;
        color: @city-picker-list-item-color-selected;

        .@{city-picker-prefix-cls}-list-item-info {
          color: @city-picker-list-item-color-selected;
        }
      }

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

    & > .@{city-picker-prefix-cls}-list-item-match {
      color: @city-picker-font-color;
      .@{city-picker-prefix-cls}-list-item-info {
        color: @city-picker-placeholder-color;
      }
    }
  }

  &-highlight {
    color: @city-picker-highlight-color;
  }

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

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

  &-size-large {
    .select-input-size(@city-picker-large-height, @city-picker-large-height, @city-picker-large-line-height, @city-picker-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;
    cursor: pointer;
  }

  &-focused {
    .focusColor();

    .@{city-picker-prefix-cls}-content-item:not(.@{city-picker-prefix-cls}-content-item-seleted) {
      color: @city-picker-placeholder-color;
    }
  }

  &-disabled {
    background-color: @city-picker-color-background-disabled;
    color: @city-picker-color-text-disabled;
    padding-right: 0;
    border-color: #e5e5e5;
    &:hover {
      cursor: not-allowed;
    }

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

    &.@{city-picker-prefix-cls}-bordered {
      padding-right: @city-picker-bordered;
    }
  }

  &-content {
    display: flex;
    width: 100%;
    font-size: 14px;

    &-search {
      flex: 1;
      position: relative;
      &-input {
        outline: 0;
        border-radius: 0;
        border: none;
        background: transparent;
        height: 100%;
        width: 100%;
        cursor: pointer;
      }
    }
    &-item {
      display: inline-block;
      position: absolute;
      left: 0;
      right: 0;
      .over();
    }

    &-info {
      flex: 1;
      text-align: right;
      color: @city-picker-placeholder-color;
      .over();
    }
  }
}
.@{city-picker-prefix-cls}-rtl {
  direction: rtl;
  &.@{city-picker-prefix-cls} {
    .@{city-picker-prefix-cls}-placeholder {
      left: 24px;
      right: 0;
    }

    .@{city-picker-prefix-cls}-description {
      text-align: right;
    }
    .@{city-picker-prefix-cls}-selector {
      .@{city-picker-prefix-cls}-wrapper {
        padding: @city-picker-wrapper-padding-rtl;
      }
      .@{city-picker-prefix-cls}-bordered {
        &.@{city-picker-prefix-cls}-wrapper {
          padding-left: 24px !important;
          padding-right: 8px !important;
        }
        &:hover:not(.@{city-picker-prefix-cls}-disabled) {
          border: 1px solid @city-picker-g-color-border-hover;
        }

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

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

    .@{city-picker-prefix-cls}-bordered {
      &.@{city-picker-prefix-cls}-wrapper {
        padding-right: 0;
        padding-left: 24px;
      }
      .@{city-picker-prefix-cls}-suffix {
        padding-left: 8px;
        padding-right: 0;
      }

      .@{city-picker-prefix-cls}-placeholder {
        padding-right: @city-picker-bordered;
      }
    }

    .@{city-picker-prefix-cls}-suffix {
      left: 0;
      right: auto;
      margin-right: 8px;
      margin-left: 0;
    }
    .@{city-picker-prefix-cls}-disabled {
      &.@{city-picker-prefix-cls}-bordered {
        padding-right: 0;
        padding-left: @city-picker-bordered;
      }
    }
    .@{city-picker-prefix-cls}-content {
      &-item {
        text-align: right;
      }

      &-info {
        text-align: left;
      }
    }
  }
  &.@{city-picker-prefix-cls}-dropdown {
    &.@{popper-prefix-cls}-bottom-end {
      &-in {
        animation-name: kdSlideUpIn;
      }

      &-out {
        animation-name: kdSlideUpOut;
      }
    }
  }
}
/*! rtl:end:ignore */