.ran-input {
  position: relative;
  display: flex;
  width: var(--ran-input-width, calc(100% - 12px));
  height: var(--ran-input-height, calc(100% - 4px));
  min-width: 0;
  padding: var(--ran-input-padding, 2px 6px);
  color: #000000d9;
  font-size: var(--ran-input-font-size, 12px);
  line-height: var(--ran-input-line-height, 1.5715);
  background-color: var(--ran-input-background-color, #fff);
  background-image: var(--ran-input-background-image, none);
  border: var(--ran-input-border, 1px solid #d9d9d9);
  border-radius: var(--ran-input-border-radius, 2px);
  transition: var(--ran-input-transition, all 0.3s);
  .ran-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &:active {
    border-color: #40a9ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    border-right-width: 1px;
    outline: 0;
  }
  &:hover {
    border-color: #40a9ff;
    border-right-width: 1px;
  }
  & > .ran-input-content:hover ~ .ran-input-label {
    color: #40a9ff;
  }
  &[value] > .ran-input-label {
    transform: translateY(calc(-50% - 0.43em)) scale(0.8);
    color: #00000040;
  }
  &[status='error'] {
    border-color: #ff4d4f;
    & > .ran-input-content ~ .ran-input-label {
      color: #ff4d4f;
    }
  }
  &[status='warning'] {
    border-color: #ff7875;
    & > .ran-input-content ~ .ran-input-label {
      color: #ff7875;
    }
  }
  &[disabled] {
    color: #00000040;
    background-color: #f5f5f5;
    border-color: #d9d9d9;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
    & > .ran-input-content {
      color: #00000040;
      background-color: #f5f5f5;
      border-color: #d9d9d9;
      box-shadow: none;
      cursor: not-allowed;
      opacity: 1;
    }
    & > .ran-input-content ~ .ran-input-label {
      color: #00000040;
      background-color: #f5f5f5;
    }
    & > .ran-input-label {
      color: #999;
      border-color: #d9d9d9;
      box-shadow: none;
      cursor: not-allowed;
    }
  }
  &-content {
    writing-mode: horizontal-tb;
    text-rendering: auto;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-align: start;
    -webkit-rtl-ordering: logical;
    cursor: text;
    touch-action: manipulation;
    -webkit-appearance: none;
    text-overflow: ellipsis;
    box-sizing: border-box;
    margin: 0;
    font-variant: tabular-nums;
    list-style: none;
    font-feature-settings: 'tnum';
    position: relative;
    border: none;
    width: 100%;
    min-width: 0;
    color: #000000d9;
    font-size: 14px;
    line-height: 1.48;
    background-color: #fff;
    background-image: none;
    transition: all 0.3s;
    outline: none;
    &:focus,
    &:hover {
      border: none;
      outline: 0;
    }
    &::placeholder {
      color: #999;
    }
    &:placeholder-shown ~ .ran-input-label {
      transform: translateY(calc(-50% - 0.43em)) scale(0.8);
    }
    &:focus ~ .ran-input-label {
      transform: translateY(calc(-50% - 0.43em)) scale(0.8);
    }
    &::-webkit-search-cancel-button {
      display: none;
      -webkit-appearance: none;
    }
  }

  &-label {
    pointer-events: none;
    position: absolute;
    font-size: 14px;
    left: 8px;
    transition:
      transform 0.3s,
      color 0.3s,
      background-color 0.3s,
      backdrop-filter 0.3s;
    transform-origin: left;
    padding: 0 0.2em;
    color: #999;
    background: #fff;
    opacity: 0.9;
  }
}