@use '../settings/variables' as v;

.qpp-c-text-input {
  display: block;
  border: 1px solid v.$gray-10;
  border-radius: 3px;
  color: v.$gray-80;
  font-size: v.$font-size-14;
  font-family: v.$font-rubik;
  font-weight: v.$font-regular;
  line-height: v.$line-height-xs;
  background-color: v.$white;
  box-sizing: border-box;
  padding: v.$spacing-12 v.$spacing-16;
  height: v.$spacing-40;

  &:focus,
  &.qpp-c-text-input--focus {
    border: 1px solid v.$blue-60;
    box-shadow: 0 0 0 4px v.$blue-10;
    outline: none;
    text-decoration: none;
  }

  &:disabled,
  &.qpp-c-text-input--disabled {
    background-color: v.$gray-04;
    color: v.$gray-60;
  }

  &.qpp-c-text-input--error {
    border: 1px solid v.$red-50;

    &:focus,
    &.qpp-c-button--focus {
      border: 1px solid v.$red-50;
      box-shadow: 0 0 0 4px v.$red-10;
    }
  }

  &.qpp-c-text-input--success {
    padding-right: v.$spacing-32;
    background-size: v.$font-size-20 auto, 100%;
    background-position: right v.$spacing-12 top 50%, 0 0;
    background-repeat: no-repeat, repeat;
    background-image: url("data:image/svg+xml,%3Csvg fill='rgb(124, 179, 66)' color='currentColor' viewBox='0 0 1792 1792' width='1792' height='1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1412 734q0-28-18-46l-91-90q-19-19-45-19t-45 19l-408 407-226-226q-19-19-45-19t-45 19l-91 90q-18 18-18 46 0 27 18 45l362 362q19 19 45 19 27 0 46-19l543-543q18-18 18-45zm252 162q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E");
    appearance: none;
    -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
    -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
  }

  &.qpp-c-text-input--big {
    height: v.$spacing-48;
    padding: v.$spacing-16;
  }

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