.form-field {
  width: 100%;
  height: 64px;
  background-color: var(--brand-bw-white);
  border: 1px solid var(--Brand-Gray-600);
  padding-inline: 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  position: relative;
  transition-property: border-color, box-shadow;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);

  &:hover,
  &:focus-visible {
    outline: none;
    border-color: var(--brand-primary-blue-700-main) !important;
    /* outline-border-2px-blue-focused  */
    box-shadow:
      0px 0px 0px 2px var(--brand-bw-white),
      0px 0px 0px 4px var(--Brand-Primary-Blue-500);
  }

  &.error {
    border-color: var(--brand-error-500-main);

    & .form-field__value {
      color: var(--brand-error-500-main);
    }
  }

  &:disabled,
  &.disabled {
    border-color: var(--Brand-Gray-600) !important;
    background-color: var(--Brand-Gray-25) !important;
    box-shadow: none !important;
    cursor: not-allowed;

    & * {
      color: var(--Brand-Gray-500) !important;
    }
  }

  &.required .form-field__label::after {
    content: '*';
    color: var(--brand-error-500-main);
  }
}

.form-field__content {
  flex: 1;
  text-align: left;
}

.form-field__label {
  transition: font-size var(--transition-duration)
    var(--transition-timing-function);

  [data-value] &,
  :not(.disabled).focused & {
    /* text-caption1 */
    font-size: var(--caption1-font-size);
    line-height: var(--caption1-line-height);
    letter-spacing: var(--caption1-letter-spacing);
  }
}

.form-field__value {
  display: none;
  transition: all var(--transition-duration) var(--transition-timing-function);
}

.form-field__icon {
  display: flex;
}

.form-field__caption-wrapper {
  padding: 6px 0 2px;
}

.form-field__caption {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  margin: 0;

  & + & {
    margin-top: 4px;
  }

  & .icon {
    flex-shrink: 0;
    margin-top: 0.25em;
  }
}

.form-field__hint {
  padding: 6px 0;
}