/* Every case theme supplies the palette. Component rules own size and layout.
   Low-specificity defaults preserve existing action-specific button styles. */
:where([class*="shelf-style--"]) :where(button),
.case-button {
  border: var(--case-button-border-width) solid var(--case-button-border);
  border-radius: var(--case-button-radius);
  background: var(--case-button-bg);
  color: var(--case-button-text);
  cursor: pointer;
}

:where([class*="shelf-style--"]) :where(button:hover, button[aria-pressed="true"]),
.case-button:hover,
.case-button[aria-pressed="true"] {
  border-color: var(--case-button-accent);
  background: color-mix(in srgb, var(--case-button-bg) 80%, var(--case-button-accent));
}

:where([class*="shelf-style--"]) :where(button:focus-visible),
.case-button:focus-visible {
  outline: 2px solid var(--case-button-accent);
  outline-offset: -2px;
}

:where([class*="shelf-style--"]) :where(button:disabled),
.case-button:disabled {
  cursor: default;
}