@import '../../../styles/variables.scss';

.form-input {
  &__label {
    display: block;
    font-size: var(--tk-font-cap);
    color: $tx3;
    margin-bottom: 6px;
  }

  &__field {
    height: var(--tk-input-height);
    background: $card;
    border: 1.5px solid $bd;
    border-radius: $r;
    padding: 0 var(--tk-gap-lg);
    display: flex;
    align-items: center;
    transition: border-color 0.2s;

    &:focus-within {
      outline: $focus-ring-width solid $focus-ring-color;
      outline-offset: $focus-ring-offset;
      border-color: var(--tk-pri);
    }
  }

  &__control {
    width: 100%;
    height: 100%;
    font-size: var(--tk-font-body);
    color: $tx;
  }

  &__placeholder {
    color: $tx3;
  }

  &--error &__field {
    border-color: $dan;
  }

  &--disabled &__field {
    opacity: 0.5;
  }

  &--focus &__field {
    border-color: var(--tk-pri);
  }

  &__error {
    display: block;
    font-size: var(--tk-font-cap);
    color: $dan;
    margin-top: 4px;
  }
}