.hs-field {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-8);
}

.hs-label {
  font-size: var(--hs-font-size-label);
  font-weight: var(--hs-font-weight-medium);
  color: var(--hs-color-text);
}
.hs-label--required::after {
  content: '*';
  color: var(--hs-color-danger-500);
  margin-inline-start: var(--hs-space-4);
}

.hs-input,
.hs-select,
.hs-textarea {
  width: 100%;
  padding: var(--hs-space-12) var(--hs-space-16);
  background: var(--hs-color-surface);
  border: 1px solid var(--hs-color-border-strong);
  border-radius: var(--hs-radius-md);
  font-size: var(--hs-font-size-body-sm);
  color: var(--hs-color-text);
  transition: border-color var(--hs-transition-fast) var(--hs-ease),
    box-shadow var(--hs-transition-fast) var(--hs-ease);
}

.hs-textarea {
  min-height: 8rem;
  resize: vertical;
}

.hs-input:hover,
.hs-select:hover,
.hs-textarea:hover {
  border-color: var(--hs-color-text-muted);
}

.hs-input:focus,
.hs-select:focus,
.hs-textarea:focus {
  outline: none;
  border-color: var(--hs-color-primary-500);
  box-shadow: 0 0 0 3px var(--hs-color-primary-100);
}

.hs-input::placeholder,
.hs-textarea::placeholder {
  color: var(--hs-color-text-muted);
}

.hs-field--error .hs-input,
.hs-field--error .hs-select,
.hs-field--error .hs-textarea {
  border-color: var(--hs-color-danger-500);
}
.hs-field--error .hs-input:focus,
.hs-field--error .hs-textarea:focus {
  box-shadow: 0 0 0 3px var(--hs-color-danger-100);
}

.hs-field__hint {
  font-size: var(--hs-font-size-caption);
  color: var(--hs-color-text-muted);
}

.hs-field__error {
  font-size: var(--hs-font-size-caption);
  color: var(--hs-color-danger-600);
}

.hs-checkbox,
.hs-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--hs-space-8);
  font-size: var(--hs-font-size-body-sm);
  cursor: pointer;
}

.hs-checkbox input,
.hs-radio input {
  width: 1.15em;
  height: 1.15em;
  accent-color: var(--hs-color-primary-500);
  cursor: pointer;
}