.ui-field {
  display: grid;
  gap: 0.4rem;
  color: var(--ui-text-muted);
  font-size: 0.8125rem;
  font-weight: 620;
}

.ui-field.hidden {
  display: none;
}

.ui-label {
  color: var(--ui-text-muted);
  font-size: 0.8125rem;
  font-weight: 620;
}

.ui-control {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background-color: var(--ui-surface);
  box-shadow: inset 0 1px 1px rgb(23 33 32 / 2%);
  color: var(--ui-text);
  font-size: 0.875rem;
  font-weight: 450;
  line-height: 1.35;
  transition:
    border-color var(--ui-duration-fast) var(--ui-easing),
    box-shadow var(--ui-duration-fast) var(--ui-easing);
}

.ui-control::placeholder {
  color: var(--ui-text-soft);
}

.ui-control--with-leading-icon {
  padding-left: 2.25rem;
}

.ui-control--with-trailing-action {
  padding-right: 2.5rem;
}

.ui-control--time {
  width: 7rem;
}

.ui-control:hover:not(:disabled):not([readonly]) {
  border-color: #aebdb9;
}

.ui-control:focus {
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px rgb(41 77 74 / 12%);
  outline: none;
}

.ui-control:disabled,
.ui-control[readonly] {
  background: var(--ui-surface-subtle);
  color: var(--ui-text-muted);
  cursor: not-allowed;
}

textarea.ui-control {
  min-height: 6rem;
  resize: vertical;
}

textarea.ui-control--compact {
  min-height: 4.5rem;
  resize: none;
}

.ui-help {
  color: var(--ui-text-soft);
  font-size: 0.75rem;
  font-weight: 450;
  line-height: 1.45;
}