@import './var.less';

.@{pxx-select-prefix-cls}-wrapper {

  .@{ant-prefix}-select-arrow,
  .@{ant-prefix}-select-clear {
    width: 16px;
    height: 16px;
    font-size: 16px;
    margin-top: -8px;
  }

  .@{ant-prefix}-select-arrow {
    color: rgba(26, 43, 78, 0.2);
  }

  .@{ant-prefix}-select-clear {
    color: rgba(0, 0, 0, 0.25);

    &:hover {
      color: rgba(0, 0, 0, 0.45);
    }
  }

  .@{ant-prefix}-select:not(.@{ant-prefix}-select-disabled):hover .@{ant-prefix}-select-selector {
    border-color: rgba(26, 43, 78, 0.4);
  }

  .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
    border-color: #0256ff;
    border-right-width: 1px !important;
    outline: 0;
    box-shadow: none;
  }
}

.@{pxx-select-prefix-cls}-wrapper.@{pxx-select-prefix-cls}-multiple.@{pxx-select-prefix-cls}-no-wrap {
  position: relative;

  .@{pxx-select-prefix-cls}-suffix {
    color: rgba(26, 43, 78, 0.2);
  }

  .@{pxx-select-prefix-cls}-more {
    color: rgba(0, 0, 0, 0.25);
  }

  .@{pxx-select-prefix-cls}-suffix,
  .@{pxx-select-prefix-cls}-more {
    position: absolute;
    right: 8px;
    top: 4px;
    width: 16px;
    height: 16px;
    font-size: 16px;
  }

  .@{ant-prefix}-select-clear {
    right: 8px;
  }

  .@{ant-prefix}-select-selection-overflow {
    flex-wrap: nowrap;
    height: 28px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: keep-all;
  }

  .@{ant-prefix}-select-selection-placeholder {
    padding-right: 8px;
  }
}


.@{pxx-select-prefix-cls}-wrapper.@{pxx-select-prefix-cls}-multiple.@{pxx-select-prefix-cls}-no-wrap.@{pxx-select-prefix-cls}-multiple-more {
  .@{ant-prefix}-select-selection-overflow {
    box-shadow: inset -10px 0 8px -8px rgba(26, 43, 78, .12);
  }
}

.@{pxx-select-prefix-cls}-wrapper.@{pxx-select-prefix-cls}-multiple.@{pxx-select-prefix-cls}-no-wrap.@{pxx-select-prefix-cls}-has-value {
  .@{pxx-select-prefix-cls}-suffix {
    color: rgba(26, 43, 78, 0.6);
  }
}

.@{pxx-select-prefix-cls}-wrapper.@{pxx-select-prefix-cls}-has-value {

  .@{ant-prefix}-select-arrow {
    color: rgba(26, 43, 78, 0.6);
  }
}
