.ui-fieldset {
  margin-block-end: var(--space-sm);
  display: grid;
  gap: 0.45rem;
}

.ui-fieldset > label {
  display: grid;
  gap: 0.45rem;
}

.ui-label {
  color: var(--color-headline);
  font-size: var(--text-sm);
  font-weight: 500;
}

.ui-input,
.ui-select,
.ui-textarea {
  width: 100%;
  /* Same field as the posts/recipes search box (listing.css). */
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-md);
  background: var(--color-field);
  color: var(--color-headline);
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: var(--text-base);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    background-color var(--transition-base);
}

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

.ui-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-paragraph) 50%),
    linear-gradient(135deg, var(--color-paragraph) 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) calc(50% - 0.16rem),
    calc(100% - 0.8rem) calc(50% - 0.16rem);
  background-repeat: no-repeat;
  background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
  padding-inline-end: 2.6rem;
}

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

.ui-input:hover,
.ui-select:hover,
.ui-textarea:hover {
  border-color: var(--color-field-border-hover);
}

.ui-input:focus-visible,
.ui-select:focus-visible,
.ui-textarea:focus-visible {
  border-color: var(--color-link);
  outline: var(--focus-ring-width) solid var(--color-focus-wash);
  outline-offset: 0;
}

.ui-control--error,
.ui-control--error:hover {
  border-color: var(--color-error);
}

.ui-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.15rem;
  color: var(--color-error);
  font-size: var(--text-xs);
  font-weight: 500;
}