.sudx-button,
.sudx-theme-toggle {
  min-height: var(--sudx-target-min);
  border: 1px solid var(--sudx-border);
  border-radius: var(--sudx-radius);
  padding: 0 var(--sudx-space-4);
  font: 600 0.875rem/1 var(--sudx-font-sans);
}

.sudx-button--primary {
  border-color: var(--sudx-text);
  background: var(--sudx-text);
  color: var(--sudx-background);
}

.sudx-button--secondary,
.sudx-theme-toggle {
  background: var(--sudx-surface);
  color: var(--sudx-text);
}

.sudx-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.sudx-field {
  display: grid;
  gap: var(--sudx-space-2);
}

.sudx-field input {
  min-height: var(--sudx-target-min);
  border: 1px solid var(--sudx-border);
  border-radius: var(--sudx-radius);
  background: var(--sudx-surface);
  color: var(--sudx-text);
  padding: 0 var(--sudx-space-3);
  font: 400 1rem/1 var(--sudx-font-sans);
}

.sudx-directory {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--sudx-border);
}

.sudx-directory a {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sudx-space-4);
  border-bottom: 1px solid var(--sudx-border);
  color: var(--sudx-text);
  text-decoration: none;
}

:where(.sudx-button, .sudx-theme-toggle, .sudx-field input, .sudx-directory a):focus-visible {
  outline: 2px solid var(--sudx-accent);
  outline-offset: 2px;
}