@layer components {
/* =============================================================================
   @elements/style — buttons

   Bare <button> defaults + the .button coercion class for anchors and
   other elements. Wrapped in :where() so any single class wins.

   Intent variants:   is-primary / is-ghost / is-danger

   Size variants:     is-sm / is-lg / is-hero
   Width variant:     is-block
   Chrome variant:    is-bare (strip all chrome)
   States:            is-loading / is-disabled (in addition to :disabled)

   Each variant owns ONE axis. Order doesn't matter, no hidden requirements:
     <button class="is-primary is-lg is-block">Sign up</button>
============================================================================= */

/* BASE SHAPE ---------------------------------------------------------- */

:where(button, .button) {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  height:          var(--button-height);
  padding:         0 var(--button-padding-x);
  font-family:     var(--font-sans);
  font-size:       var(--button-font-size);
  font-weight:     var(--button-font-weight);
  line-height:     1;
  letter-spacing:  var(--tracking-normal);
  white-space:     nowrap;
  text-decoration: none;
  background:      transparent;
  color:           var(--ink);
  border:          1px solid var(--rule);
  border-radius:   var(--button-radius);
  cursor:          pointer;
  user-select:     none;
  transition:
    var(--transition-colors),
    transform var(--duration-instant) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

:where(button:hover, .button:hover) {
  background:   var(--bg-muted);
}

:where(button:active, .button:active) {
  background: var(--bg-panel);
  transform:  translateY(1px);
}

:where(button:focus-visible, .button:focus-visible) {
  outline:    none;
  box-shadow: var(--focus-ring);
}

:where(button:disabled, button[aria-disabled="true"],
       .button:disabled, .button.is-disabled, .button[aria-disabled="true"]) {
  cursor:  not-allowed;
  opacity: var(--opacity-disabled);
}

/* INTENT — PRIMARY (accent-filled) ----------------------------------- */
/* Consumes --accent. Default theme: monochrome (neutral-900). Branded   */
/* theme (e.g. themes/elements.css): brand color via --accent override.  */

button.is-primary, .button.is-primary {
  background:   var(--accent);
  color:        var(--accent-ink);
  border-color: var(--accent);
}

button.is-primary:hover, .button.is-primary:hover {
  background:   var(--accent-deep);
  border-color: var(--accent-deep);
}

button.is-primary:active, .button.is-primary:active {
  background:   color-mix(in srgb, var(--accent) 92%, black);
  border-color: color-mix(in srgb, var(--accent) 92%, black);
}

/* INTENT — GHOST (no border, no fill) -------------------------------- */

button.is-ghost, .button.is-ghost {
  background:   transparent;
  color:        var(--ink-soft);
  border-color: transparent;
}

button.is-ghost:hover, .button.is-ghost:hover {
  background:   var(--bg-panel);
  color:        var(--ink);
  border-color: transparent;
}

button.is-ghost:active, .button.is-ghost:active {
  background: var(--bg-canvas);
}

/* INTENT — DANGER (red-filled) -------------------------------------- */
/* Hover derives from --danger with color-mix rather than --danger-ink:  */
/* in dark mode --danger-ink is a light text tint, not a fill color.     */

button.is-danger, .button.is-danger {
  background:   var(--danger);
  color:        var(--white);
  border-color: var(--danger);
}

button.is-danger:hover, .button.is-danger:hover {
  background:   color-mix(in srgb, var(--danger) 88%, black);
  border-color: color-mix(in srgb, var(--danger) 88%, black);
}

button.is-danger:focus-visible, .button.is-danger:focus-visible {
  box-shadow: var(--focus-ring-danger);
}

/* SIZE — SM ---------------------------------------------------------- */

button.is-sm, .button.is-sm {
  height:    var(--button-height-sm);
  padding:   0 var(--button-padding-x-sm);
  font-size: var(--text-xs);
}

/* SIZE — LG ---------------------------------------------------------- */

button.is-lg, .button.is-lg {
  height:    var(--button-height-lg);
  padding:   0 var(--button-padding-x-lg);
  font-size: var(--button-font-size-lg);
}

/* SIZE — HERO -------------------------------------------------------- */

button.is-hero, .button.is-hero {
  height:      var(--button-height-hero);
  padding:     0 var(--space-6);
  font-size:   var(--text-md);
  font-weight: var(--weight-semibold);
}

/* WIDTH — BLOCK ------------------------------------------------------ */

button.is-block, .button.is-block {
  display: flex;
  width:   100%;
}

/* CHROME — BARE (strip chrome entirely) ----------------------------- */

button.is-bare, .button.is-bare {
  height:        auto;
  padding:       0;
  background:    none;
  color:         inherit;
  border:        none;
  border-radius: 0;
}

button.is-bare:hover, .button.is-bare:hover,
button.is-bare:active, .button.is-bare:active {
  background: none;
  border:     none;
  transform:  none;
}

/* STATE — LOADING ---------------------------------------------------- */

button.is-loading, .button.is-loading {
  cursor:         progress;
  pointer-events: none;
  opacity:        var(--opacity-muted);
}

/* AUTO-BARE for icon-only buttons (single SVG child) ---------------- */

:where(button:has(> svg:only-child)) {
  height:        auto;
  padding:       var(--space-1-5);
  background:    none;
  color:         inherit;
  border:        none;
  border-radius: var(--radius-sm);
}

:where(button:has(> svg:only-child):hover) {
  background: var(--bg-panel);
  border:     none;
  transform:  none;
}

:where(button:has(> svg:only-child):active) {
  background: var(--bg-canvas);
  border:     none;
  transform:  none;
}

/* BUTTON GROUP — adjacent buttons share borders ---------------------- */

.button-group {
  display: inline-flex;
}

.button-group > button,
.button-group > .button {
  border-radius: 0;
}

.button-group > button:first-child,
.button-group > .button:first-child {
  border-top-left-radius:    var(--button-radius);
  border-bottom-left-radius: var(--button-radius);
}

.button-group > button:last-child,
.button-group > .button:last-child {
  border-top-right-radius:    var(--button-radius);
  border-bottom-right-radius: var(--button-radius);
}

.button-group > button + button,
.button-group > .button + .button {
  margin-left: -1px;
}

.button-group > button:hover,
.button-group > .button:hover {
  z-index: var(--z-raised);
}

}