/**
 * form.css
 *
 * Explicit class hooks for native form controls. Classes are placed directly
 * on the semantic element so the public API works without scope-root quirks.
 */

:is(.form-input, .form-button, .form-select, .form-textarea) {
  box-sizing: border-box;
  font-family: var(--font-family-ui, inherit);
  font-size: var(--font-size-control, var(--font-size-base, 1rem));
  font-weight: var(--form-control-weight, var(--font-weight-normal, 400));
  line-height: var(--line-height-control, var(--line-height-normal, 1.5));
}

:is(.form-input, .form-select, .form-textarea) {
  display: block;
  inline-size: 100%;
  padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
  border: var(--border-width, 1px) solid var(--form-control-border-color, var(--outline-default, var(--outline, currentColor)));
  border-radius: var(--radius-md, 6px);
  background: var(--form-control-background, var(--surface-default));
  color: var(--form-control-color, var(--text-default));
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}

:where(.form-field, label:has(> :is(.form-input, .form-select, .form-textarea))) {
  display: grid;
  inline-size: 100%;
  gap: var(--form-field-gap, var(--space-xs, 0.5rem));
  color: var(--form-label-color, var(--text-overt, var(--text-default)));
  font-weight: var(--form-label-weight, var(--font-weight-medium, 500));
}

:where(.form-field, label:has(> :is(.form-input, .form-select, .form-textarea))) > :is(small, .form-help) {
  color: var(--text-muted);
  font-weight: var(--font-weight-normal, 400);
}

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

:is(.form-input, .form-select, .form-textarea):hover:not(:disabled, :focus) {
  border-color: var(--outline-overt);
}

:is(.form-input, .form-select, .form-textarea):focus-visible {
  border-color: var(--outline-focus);
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring-width, 2px) var(--focus-ring-color);
}

.form-select {
  cursor: pointer;
}

/* `appearance: base-select` turns the control into a customizable button.
 * Preserve the inline selected-content/picker-icon arrangement instead of
 * inheriting the generic block layout used by text fields. */
@supports (appearance: base-select) {
  .form-select {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
  }

  .form-select::picker-icon {
    flex: 0 0 auto;
    margin-inline-start: var(--form-select-icon-gap, var(--space-xs, 0.5rem));
  }
}

.form-textarea {
  min-block-size: 6rem;
  resize: vertical;
}

.form-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: auto;
  padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1.5rem);
  border: var(--form-button-border, 0);
  border-radius: var(--radius-md, 6px);
  background: var(--bg, var(--accent));
  color: var(--fg, var(--text-on-accent, white));
  font-weight: var(--font-weight-medium, 500);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease-out, transform 100ms ease-out, box-shadow 150ms ease-out;
}

.form-button:hover:not(:disabled) {
  background: var(--form-button-hover-background, oklch(from var(--bg, var(--accent)) calc(l - 0.08) c h));
}

.form-button:active:not(:disabled) {
  transform: scale(0.98);
  background: var(--form-button-active-background, oklch(from var(--bg, var(--accent)) calc(l - 0.14) c h));
}

.form-button:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset, 2px);
}

:is(.form-input, .form-select, .form-textarea, .form-button):disabled {
  opacity: var(--opacity-disabled, 0.5);
  cursor: not-allowed;
}

/* Button color variants */
.btn-primary { --bg: var(--accent); --fg: var(--text-on-accent); }
.btn-secondary { --bg: var(--secondary); --fg: var(--text-on-secondary); }
.btn-success { --bg: var(--success); --fg: var(--text-on-success); }
.btn-warning { --bg: var(--warning); --fg: var(--text-on-warning); }
.btn-error { --bg: var(--error); --fg: var(--text-on-error); }

/* Visual state follows semantic state when available. */
:is(.form-input, .form-select, .form-textarea):is(.input-error, [aria-invalid="true"]) {
  border-color: var(--outline-error, var(--error));
}

:is(.form-input, .form-select, .form-textarea).input-success {
  border-color: var(--outline-success, var(--success));
}