[data-ui-surface] [data-ui-control] {
  min-height: var(--arhix-control-height);
  border: 0;
  border-radius: var(--arhix-radius-control);
  background: var(--arhix-surface);
  color: var(--arhix-ink-active);
  transition:
    background-color var(--arhix-motion-quick) ease,
    color var(--arhix-motion-quick) ease;
}

[data-ui-surface] [data-ui-control]:where(:hover, [data-hovered="true"]) {
  background: var(--arhix-surface-sunken);
}

[data-ui-surface] [data-ui-control]:where([data-state="active"], [aria-pressed="true"], [aria-selected="true"]) {
  background: var(--arhix-accent-tint);
  color: var(--arhix-accent);
}

[data-ui-surface] [data-ui-control][data-ui-variant="primary"] {
  background: var(--arhix-accent);
  color: var(--arhix-surface-raised);
}

[data-ui-surface] [data-ui-control]:where([data-disabled="true"], [aria-disabled="true"], :disabled) {
  color: var(--arhix-ink-ghost);
  cursor: default;
  pointer-events: none;
}

[data-ui-surface] [data-ui-icon-button] {
  display: inline-grid;
  width: var(--arhix-control-height);
  height: var(--arhix-control-height);
  padding: 0;
  place-items: center;
}

[data-ui-surface] [data-ui-icon-button] > svg {
  width: var(--arhix-icon-size);
  height: var(--arhix-icon-size);
}

[data-ui-surface] [data-ui-separator] {
  align-self: stretch;
  border: 0;
  background: var(--arhix-line);
}

[data-ui-surface] [data-ui-separator="horizontal"] {
  height: 1px;
}

[data-ui-surface] [data-ui-separator="vertical"] {
  width: 1px;
}

[data-ui-surface] [data-ui-field] {
  display: flex;
  min-height: var(--arhix-control-height);
  align-items: center;
  gap: var(--arhix-space-micro);
  padding-inline: var(--arhix-space-inset);
  border: 1px solid transparent;
  border-radius: var(--arhix-radius-control);
  background: var(--arhix-surface);
  color: var(--arhix-ink);
}

[data-ui-surface] [data-ui-field]:focus-within {
  border-color: var(--arhix-accent);
}

[data-ui-surface] [data-ui-pill] {
  display: inline-flex;
  min-height: var(--arhix-pill-height);
  align-items: center;
  justify-content: center;
  border-radius: var(--arhix-radius-pill);
  background: var(--arhix-surface-pill);
}

[data-ui-surface] [data-ui-press-pill] > [data-ui-pill] {
  box-shadow: var(--arhix-shadow-pill);
  transition: box-shadow var(--arhix-motion-quick) ease;
}

[data-ui-surface] [data-ui-press-pill]:active > [data-ui-pill] {
  box-shadow: var(--arhix-shadow-pill-pressed);
}

[data-ui-surface] [data-ui-segmented] {
  display: grid;
  min-height: var(--arhix-control-height);
  padding: var(--arhix-space-pill);
  border-radius: var(--arhix-radius-control);
  background: var(--arhix-surface);
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}

[data-ui-surface] [data-ui-segmented] > [aria-checked="true"] {
  border-radius: var(--arhix-radius-pill);
  background: var(--arhix-surface-pill);
  box-shadow: var(--arhix-shadow-pill);
}

@media (prefers-reduced-motion: reduce) {
  [data-ui-surface] *,
  [data-ui-surface] *::before,
  [data-ui-surface] *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}