/* Static adapter of registry button.tsx at the pinned foundation commit. */
.button {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  min-height: var(--tap-target);
  height: var(--control-height);
  align-items: center;
  justify-content: center;
  gap: var(--soto-space-2);
  padding: 0 var(--control-padding-inline);
  border: 1px solid transparent;
  border-radius: var(--soto-radius-control);
  background-clip: padding-box;
  cursor: pointer;
  text-decoration: none;
  font-size: var(--control-text);
  font-weight: var(--soto-typography-weight-medium);
  line-height: var(--soto-typography-style-button-line-height);
  white-space: nowrap;
  user-select: none;
  outline: none;
  transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out;
}
.button-primary {
  --button-primary-face: var(--primary);
  --button-large-face: var(--button-primary-face);
  --button-large-base: var(--button-large-primary-base);
  --button-large-foreground: var(--primary-foreground);
  background: var(--button-primary-face);
  color: var(--button-large-foreground);
}
[data-theme="light"][data-app] .button-primary {
  --button-large-foreground: white;
  color: white;
}
[data-theme="dark"] .button-primary {
  --button-large-foreground: var(--soto-color-text-inverse);
  color: var(--soto-color-text-inverse);
}
.button-primary:hover { background: var(--soto-color-brand-primary-hover); }
.button:not([aria-haspopup]):active { transform: translateY(1px); }
.button:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
}
.brand-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
[data-density="large"] .button {
  margin-bottom: 5px;
  background: var(--button-large-face);
  color: var(--button-large-foreground);
  box-shadow: 0 5px 0 var(--button-large-base);
  transition: transform 100ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 100ms cubic-bezier(0.22, 1, 0.36, 1), background-color 100ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-density="large"] .button:hover { background: color-mix(in srgb, var(--button-large-face) 92%, white); }
[data-density="large"] .button:not([aria-haspopup]):active { transform: translateY(4px); box-shadow: 0 1px 0 var(--button-large-base); }
[data-density="large"] .button:focus-visible {
  box-shadow: 0 5px 0 var(--button-large-base), 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
}
.button:disabled, .button.disabled, .button[aria-disabled="true"] {
  background: color-mix(in srgb, var(--button-primary-face) 52%, var(--soto-color-surface-base));
  cursor: not-allowed;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .button, [data-density="large"] .button { transition: none; }
  .button:not([aria-haspopup]):active, [data-density="large"] .button:not([aria-haspopup]):active { transform: none; }
}