@import url('../../base.less');

@transition:all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

@theme-color: #1890ff;

ra-select {
  display: inline-block;
  cursor: pointer;
  position: relative;
  width: 120px;
  height: 40px;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
  &,
  &:focus,
  &:active {
    outline: 0;
    -webkit-tap-highlight-color: transparent;
  }
  r-option {
    display: none;
  }
  &[disabled] {
    cursor: not-allowed;
    pointer-events: all;
    opacity: 0.6;
  }
  &:not([disabled]):not([type='text']):hover {
    .select {
      cursor: pointer;
    }
    .selection {
      border: 1px solid @theme-color;
      &-search {
        cursor: pointer;
      }
      &-item {
        cursor: pointer;
        color: #bfbfbf;
      }
    }
  }
  &:not([disabled]):focus {
    .selection {
      border: 1px solid @theme-color;
      &-search {
        cursor: pointer;
      }
      &-item {
        cursor: pointer;
        color: #bfbfbf;
      }
    }
  }
  .selection-search {
    display: none;
  }
  &[showSearch]:not([disabled]) {
    .selection {
      &-search {
        cursor: text;
        display: block;
      }
      &-item {
        cursor: pointer;
      }
    }
  }
  &[showSearch]:not([disabled]):focus {
    .selection {
      &-search {
        display: block;
        cursor: text;
        opacity: 1;
      }
    }
  }
  &[type='text'] {
    .selection {
      border: none;
    }
    .icon {
      display: none;
    }
  }
}

.ran-select {
  width: 100%;
  height: 100%;
  font-size: 14px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  font-family: @font-family;
  position: relative;
  display: inline-block;
  .selection {
    position: relative;
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    transition: @transition;
    width: 100%;
    height: 100%;
    padding: 0 11px;
    box-sizing: border-box;
    margin: 0;
    color: rgba(0, 0, 0, 0.88);
    font-size: 14px;
    line-height: 1.5714285714285714;
    list-style: none;
    font-family: inherit;
    display: flex;
    border-radius: 6px;
    &-search {
      position: absolute;
      opacity: 0;
      top: 0;
      left: 0;
      height: 100%;
      inset-inline-start: 11px;
      inset-inline-end: 11px;
      opacity: 0;
      margin: 0;
      padding: 0;
      background: transparent;
      border: none;
      outline: none;
      appearance: none;
      font-family: inherit;
      cursor: not-allowed;
      &::-webkit-search-cancel-button {
        display: none;
        -webkit-appearance: none;
      }
      .ran-input {
        border: none;
        padding: 0;
        height: 100%;
        outline: none;
        &:active {
          border: none;
          padding: 0;
          height: 100%;
          outline: none;
          border-color: transparent;
          box-shadow: none;
          border-right-width: 0px;
        }
      }
    }
    &-item {
      position: absolute;
      top: 0;
      left: 12px;
      margin: 0;
      padding: 0;
      background: transparent;
      border: none;
      outline: none;
      appearance: none;
      font-family: inherit;
      height: 100%;
      user-select: none;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      cursor: pointer;
    }
    &-select {
      color: rgba(0, 0, 0, 0.25);
    }
    .icon {
      display: flex;
      align-items: center;
      color: rgba(0, 0, 0, 0.25);
      font-style: normal;
      text-align: center;
      text-transform: none;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      position: absolute;
      top: 50%;
      inset-inline-start: auto;
      inset-inline-end: 8px;
      height: 12px;
      margin-top: -3px;
      font-size: 12px;
      pointer-events: none;
    }
  }
}