@import '../../style/themes/index';
@import './token.less';

@advancedSelector-prefix-cls: ~'@{kd-prefix}-baseData';

.@{advancedSelector-prefix-cls} {
  width: @base-data-width;
  display: flex;
  align-items: center;
  border-bottom: 1px solid @base-data-border-color;

  &-disabled {
    cursor: not-allowed;
  }

  &:not(.@{advancedSelector-prefix-cls}-disabled):hover {
    border-color: @base-data-color-border-hover;

    .@{advancedSelector-prefix-cls} {
      &-detail,
      &-suffix {
        color: @base-data-icon-text-color-hover;
      }

      &-detail {
        visibility: visible;
      }
    }
  }

  &-total {
    white-space: nowrap;
    cursor: pointer;
  }

  &-suffix,
  &-detail {
    font-size: 16px;
    margin-left: 5px;
    cursor: pointer;
  }

  &-detail {
    visibility: hidden;
  }

  &-dropdown {
    margin: 0;
    z-index: @base-data-dropdown-z-index;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
    border-radius: @base-data-dropdown-radius-border;
    background: @base-data-dropdown-color-background;
    overflow: auto;
    max-height: @base-data-dropdown-height;
    color: @base-data-color-text;

    &-columns,
    &-options {
      display: flex;
      align-items: center;

      &.selected {
        color: @base-data-option-color-text-active;
      }

      &-item {
        flex: 1;
        padding: 0 @base-data-option-spacing-padding-vertical;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
        display: flex;
        align-items: center;

        &-collect {
          position: absolute;
          right: 10px;
          visibility: hidden;

          &-icon {
            color: @base-data-dropdown-icon-text-color;

            &:hover {
              color: @base-data-dropdown-icon-text-color-hover;
            }
          }

          &-not-icon {
            color: #666;

            &:hover {
              color: @base-data-dropdown-text-color-hover;
            }
          }
        }

        &-search {
          color: @link-color-hover;
        }
      }
    }

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

    &-columns {
      height: @base-data-dropdown-columns-height;
      background: @base-data-hover-bg;
    }

    &-options {
      height: @base-data-dropdown-options-height;
      cursor: pointer;

      &:hover {
        background: @base-data-hover-bg;

        .@{advancedSelector-prefix-cls}-dropdown-options-item-collect {
          visibility: visible;
        }
      }
    }

    &-footer {
      height: @base-data-dropdown-footer-height;
      border-top: 1px solid @base-data-footer-color-border;

      &-btn {
        color: @base-data-footer-btn-text-color;
        height: 100%;
        display: flex;
        align-items: center;

        & > span {
          flex: 1;
          text-align: center;
          cursor: pointer;
        }
      }
    }

    &-empty {
      margin: 20px 0;
    }

    // 修改tabs默认样式
    .@{kd-prefix}-tabs-tab-list {
      width: 100%;
      display: flex;
    }

    .@{kd-prefix}-tab-pane {
      flex: 1;
      margin-right: 0;
      text-align: center;
    }

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

  .@{kd-prefix}-input {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 0;

    &-disabled {
      background: @bg;
    }
  }
}

.@{advancedSelector-prefix-cls}-dropdown-wrapper {
  &.topLeft.hidden,
  &.topRight.hidden {
    opacity: 0;
    visibility: hidden;
    transition: all calc(@transition-duration - 0.1s) @ease;
    animation-name: kdSlideDownOut;
  }

  &.topLeft,
  &.topRight {
    animation-name: kdSlideDownIn;
  }

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

  &.bottomLeft,
  &.bottomRight {
    animation-name: kdSlideUpIn;
  }
}

/*! rtl:begin:ignore */
.@{advancedSelector-prefix-cls}-rtl {
  direction: rtl;
  .@{kd-prefix}-input {
    padding-left: 0;
    padding-right: 9px;
  }
  .@{advancedSelector-prefix-cls}-suffix,
  .@{advancedSelector-prefix-cls}-detail {
    margin-left: 0;
    margin-right: 5px;
  }
}
/*! rtl:end:ignore */