.q-input {
  --field-color-base: var(--color-primary-black);
  --field-color-placeholder: rgba(var(--color-rgb-gray), 0.32);
  --field-color-disabled: rgba(var(--color-rgb-gray), 0.64);

  --field-icon-color-base: var(--color-primary-blue);
  --field-icon-color-hover: var(--color-primary-black);
  --field-icon-color-inactive: rgba(var(--color-rgb-gray), 0.64);

  --field-background-color-base: var(--color-tertiary-gray-light);
  --field-background-color-hover: var(--color-tertiary-gray);
  --field-background-color-focus: var(--color-tertiary-gray-ultra-light);
  --field-background-color-disabled: var(--color-tertiary-gray);

  --field-box-shadow-base: -1px -1px 3px rgba(var(--color-rgb-white), 0.25),
    1px 1px 3px rgba(var(--color-rgb-blue), 0.4),
    4px 4px 8px rgba(var(--color-rgb-blue), 0.4),
    -4px -4px 12px var(--color-tertiary-white);
  --field-box-shadow-hover: -1px -1px 4px rgba(var(--color-rgb-white), 0.25),
    1px 1px 4px rgba(var(--color-rgb-blue), 0.4),
    4px 4px 8px rgba(var(--color-rgb-blue), 0.4),
    -4px -4px 8px rgba(var(--color-rgb-white), 0.8);
  --field-box-shadow-focus: -1px -1px 3px rgba(var(--color-rgb-white), 0.25),
    1px 1px 3px rgba(var(--color-rgb-blue), 0.4),
    inset -1px -1px 1px rgba(var(--color-rgb-white), 0.7),
    inset 1px 1px 2px rgba(var(--color-rgb-blue), 0.2);
  --field-box-shadow-disabled: -1px -1px 3px rgba(var(--color-rgb-white), 0.25),
    1px 1px 3px rgba(var(--color-rgb-blue), 0.4);

  position: relative;
  display: inline-block;
  width: 100%;

  &__inner {
    display: inline-block;
    width: 100%;
    height: 40px;
    padding: 0 16px;
    font-weight: var(--font-weight-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--field-color-base);
    background-color: var(--field-background-color-base);
    border: none;
    border-radius: var(--border-radius-base);
    box-shadow: var(--field-box-shadow-base);
    appearance: textfield;

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      appearance: none;
      margin: 0;
    }

    &::placeholder,
    &:placeholder-shown {
      color: var(--field-color-placeholder);
      text-overflow: ellipsis;
      opacity: 1;
    }

    /** disable default clear on IE */
    &::-ms-reveal,
    &::-ms-clear {
      display: none;
      width: 0;
      height: 0;
    }

    &:focus {
      background-color: var(--field-background-color-focus);
      outline: none;
      box-shadow: var(--field-box-shadow-focus);
    }

    &:hover {
      background-color: var(--field-background-color-hover);
      box-shadow: var(--field-box-shadow-hover);
    }

    .q-form-item_is-error & {
      &,
      &:focus {
        padding-left: 15px;
        border: var(--border-error);
      }
    }
  }

  &_focus {
    .q-input__inner {
      background-color: var(--field-background-color-focus);
      outline: none;
      box-shadow: var(--field-box-shadow-focus);
    }
  }

  &_disabled {
    &::after {
      content: '\e930';
      position: absolute;
      top: 0;
      right: 8px;
      font-size: 24px;
      line-height: 40px;
      font-family: 'qicon';
      cursor: not-allowed;
    }

    .q-input__inner {
      padding-right: 40px;
      color: var(--field-color-disabled);
      background-color: var(--field-background-color-disabled);
      box-shadow: var(--field-box-shadow-disabled);
      cursor: not-allowed;
    }
  }

  &_suffix {
    .q-input__inner {
      padding-right: 40px;
    }
  }

  &__suffix {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    text-align: center;
    transition: all 0.3s;
    pointer-events: none;

    .q-input.q-input_disabled & {
      display: none;
    }
  }

  &__suffix-inner {
    display: block;
    pointer-events: all;
  }

  &__icon {
    width: 40px;
    text-align: center;
    color: var(--field-icon-color-inactive);

    &_reverse {
      color: var(--field-icon-color-base);
    }

    &:not(:last-child) {
      display: none;
    }

    &::before {
      font-size: 24px;
      line-height: 40px;
    }

    &.q-icon-close,
    &.q-icon-eye-close,
    &.q-icon-eye {
      color: var(--field-icon-color-base);
    }

    &.q-icon-close,
    &.q-icon-eye,
    &.q-icon-eye-close {
      cursor: pointer;

      &::before {
        font-family: 'qicon';
      }

      &:focus,
      &:hover {
        color: var(--field-icon-color-hover);
      }
    }
  }

  &__count {
    position: absolute;
    top: -24px;
    right: 0;
    margin-bottom: 2px;
    font-size: 10px;
    text-align: right;
  }
}
