@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../styles/mixins.scss';

$class-prefix: 'cn-ui-m';
$sizes: small, medium, large;

.#{$hashClassName}.#{$class-prefix}-input {
  box-sizing: border-box;
  color: $m-color-text;
  background-color: $m-color-bg-white;
  font-family: $m-font-family-base;
  caret-color: $m-color-primary;
  line-height: $m-s-20;
  @include flex(row, flex-start, center);

  .cn-ui-m-readonly {
    line-height: inherit;
  }

  &--large {
    padding: $m-s-14 0;
  }

  &--medium {
    padding: $m-s-8 0;
  }

  &--inverse {
    background-color: $m-color-bg-toast;
  }
  &--inverse &-wrapper {
    color: $m-color-bg-white;
  }
  &--inverse &-read-only-wrapper {
    color: $m-color-bg-white;
  }

  .#{$class-prefix}-input {
    // input样式
    &-wrapper {
      display: block;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      padding: 0;
      color: $m-color-text;
      border: none;
      border: 0;
      background-color: transparent;
      font-size: $m-s-14;
      line-height: $m-font-lineheight-2;
      appearance: none;
      // 清除点击时的灰色背景
      -webkit-tap-highlight-color: transparent;

      &::placeholder {
        color: $m-color-text-tip;
      }

      &:focus {
        border: 0;
        outline: none;
        background-color: transparent;
      }

      &:focus-visible {
        border: 0;
        outline: none;
        background-color: transparent;
      }

      &:focus-within {
        border: 0;
        outline: none;
        background-color: transparent;
      }

      &:disabled {
        color: $m-color-text-disabled;
        border: none;
        outline: none;
        // 兼容ios
        opacity: 1;
        background-color: inherit;

        &::placeholder {
          color: inherit;
        }
      }
    }

    // 右侧icon样式
    &--icon {
      display: block;
      margin-left: $m-s-12;
      color: $m-color-bg-darker1;

      &-loading {
        color: $m-color-primary;
      }
      &-warning {
        color: $m-color-warning;
      }
      &-success {
        color: $m-color-success;
      }
      &-error {
        color: $m-color-error;
      }
      &-clear {
        color: $m-color-bg-darker1;
      }
    }

    // 字数限制
    &-length-tips {
      color: $m-color-text-tip;
      font-family: $m-font-family-base;
      font-size: $m-s-14;
      line-height: $m-s-14;
      margin-left: $m-s-12;
      word-break: normal;
    }

    // 左对齐
    &--right {
      text-align: right;
      justify-content: flex-end;
    }

    &--large {
      height: $m-s-48;
    }
    &--medium {
      height: $m-s-36;
    }
    &--small {
      height: $m-s-21;
    }
  }

  // 左对齐
  &--right {
    text-align: right;
    justify-content: flex-end;
  }
}