/**
* c-input
*/
@import url('../../styles/variables.css');

/* 输入框
 *  ===========================================================================
 */

.c-input-wrap {
  display: inline-block;
  font-size: var(--form-font-md);

  &.is-xs {
    font-size: var(--form-font-xs);

    & .c-input {
      height: var(--form-height-xs);
    }
  }

  &.is-sm {
    font-size: var(--form-font-sm);

    & .c-input {
      height: var(--form-height-sm);
    }
  }

  &.is-lg {
    font-size: var(--form-font-lg);

    & .c-input {
      height: var(--form-height-lg);
    }
  }

  &.is-xl {
    font-size: var(--form-font-xl);

    & .c-input {
      height: var(--form-height-xl);
    }
  }

  &.is-shortest .c-input {
    width: var(--form-width-shortest);
  }

  &.is-shorter .c-input {
    width: var(--form-width-shorter);
  }

  &.is-short .c-input {
    width: var(--form-width-short);
  }

  &.is-long .c-input {
    width: var(--form-width-long);
  }

  &.is-longer .c-input {
    width: var(--form-width-longer);
  }

  &.is-longest .c-input {
    width: var(--form-width-longest);
  }

  &.is-flexible {
    display: block;

    & .c-input {
      display: block;
      width: 100%;
    }
  }

  &.c-input--error {
    & .c-input {
      border-color: var(--danger-color);
      color: var(--danger-color);

      &:focus {
        box-shadow: 0 0 0 0.2em color(var(--danger-color) a(var(--focus-ring-opacity)));
      }
    }
  }
}

.c-input {
  border: 1px solid color(var(--gray) l(85%));
  border-radius: 3px;
  background-color: #fff;
  color: var(--text-color);
  line-height: normal;
  width: var(--form-width-normal);
  height: var(--form-height-md);
  padding: 0 0.5em;
  box-shadow: inset 0 1px 3px #eee;
  transition: all 0.3s ease;

  &:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2em color(var(--primary-color) l(90%));
  }

  &[readonly] {
    background-color: color(var(--gray) l(97%));
    color: color(var(--gray) l(65%));
    cursor: default;
    box-shadow: none;
  }

  &[disabled] {
    background-color: color(var(--gray) l(90%));
    color: color(var(--gray) l(75%));
    box-shadow: none;
    cursor: not-allowed;
  }

  &.c-input--error {
    border-color: var(--danger-color);
  }

  &::-ms-clear {
    display: none;
  }
}

textarea.c-input {
  height: auto;
  padding: 0.5em;
}