/* Generated by tools/build.py from web/src/sds.css (one part of core.css). Do not edit. */

@layer sds.reset, sds.components;

@layer sds.reset {
  :where(.sds-button),
  :where(.sds-button)::before {
    box-sizing: border-box;
  }

  :where(.sds-button) {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }
}

@layer sds.components {

  /* --- shared: pressable controls ------------------------------------- */

  .sds-button {
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition:
      background-color var(--sds-motion-fast) var(--sds-ease-standard),
      border-color var(--sds-motion-fast) var(--sds-ease-standard),
      color var(--sds-motion-fast) var(--sds-ease-standard),
      box-shadow var(--sds-motion-fast) var(--sds-ease-standard),
      transform var(--sds-motion-fast) var(--sds-ease-standard);
  }

  /* button and icon-button: a transparent border the variants color. */
  .sds-button {
    border: var(--sds-border-thin) solid transparent;
  }

  /* Hit area: at least the touch target, centered, without changing layout. */
  .sds-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--sds-touch-target));
    height: max(100%, var(--sds-touch-target));
    transform: translate(-50%, -50%);
  }

  /* Focus: always visible on keyboard and controller focus. */
  .sds-button:focus-visible {
    outline: var(--sds-focus-ring-width) solid var(--sds-color-focus);
    outline-offset: var(--sds-focus-ring-offset);
  }

  /* --- button (its sizes are hold-button's too) -------------------------------------- */

  .sds-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sds-space-3);
    border-radius: var(--sds-button-radius);
    font-family: var(--sds-font-ui);
    font-weight: var(--sds-type-label-weight);
    letter-spacing: var(--sds-type-label-tracking);
    line-height: var(--sds-type-label-line-height);
    text-decoration: none;
    /* limits (contract/layout.json, tokens.css), never wider than the parent; the size tokens below own the height */
    min-inline-size: min(var(--sds-limit-button-min-w), 100%);
    max-inline-size: var(--sds-limit-button-max-w);
    max-block-size: var(--sds-limit-button-max-h);
  }

  :is(.sds-button):where(:not([data-size]), [data-size="md"]) {
    min-height: var(--sds-button-md-height);
    padding: 0 var(--sds-button-md-padding-x);
    font-size: calc(var(--sds-button-md-font-size) * var(--sds-type-scale));
  }

  /* button@1.9: xs is the compact size (about 30 px drawn) for dense tools; the hit area stays the touch target. */
  :is(.sds-button):where([data-size="xs"]) {
    min-height: var(--sds-button-xs-height);
    padding: 0 var(--sds-button-xs-padding-x);
    font-size: calc(var(--sds-button-xs-font-size) * var(--sds-type-scale));
  }

  :is(.sds-button):where([data-size="sm"]) {
    min-height: var(--sds-button-sm-height);
    padding: 0 var(--sds-button-sm-padding-x);
    font-size: calc(var(--sds-button-sm-font-size) * var(--sds-type-scale));
  }

  :is(.sds-button):where([data-size="lg"]) {
    min-height: var(--sds-button-lg-height);
    padding: 0 var(--sds-button-lg-padding-x);
    font-size: calc(var(--sds-button-lg-font-size) * var(--sds-type-scale));
  }

  .sds-button .sds-icon {
    width: 1.25em;
    height: 1.25em;
  }

  /* --- button and icon-button variants ---------------------------------- */

  :is(.sds-button):where(:not([data-variant]), [data-variant="primary"]) {
    background-color: var(--sds-color-accent);
    color: var(--sds-color-on-accent);
  }

  :is(.sds-button):where([data-variant="secondary"]) {
    background-color: var(--sds-color-surface-raised);
    border-color: var(--sds-color-line-strong);
    color: var(--sds-color-text);
  }

  :is(.sds-button):where([data-variant="ghost"]) {
    background-color: transparent;
    color: var(--sds-color-text);
  }

  .sds-button:where([data-variant="danger"]) {
    background-color: var(--sds-color-danger);
    color: var(--sds-color-on-danger);
  }

  @media (hover: hover) {
    :is(.sds-button):where(:not([data-variant]), [data-variant="primary"]):where(:hover:not(:disabled, [aria-disabled="true"])) {
      background-color: var(--sds-color-accent-strong);
      box-shadow: var(--sds-glow-sm);
    }

    :is(.sds-button):where([data-variant="secondary"]):where(:hover:not(:disabled, [aria-disabled="true"])) {
      background-color: color-mix(in srgb, var(--sds-color-accent) calc(var(--sds-mix-hover) * 100%), var(--sds-color-surface-raised));
      border-color: var(--sds-color-accent-text);
    }

    :is(.sds-button):where([data-variant="ghost"]):where(:hover:not(:disabled, [aria-disabled="true"])) {
      background-color: color-mix(in srgb, var(--sds-color-accent) calc(var(--sds-mix-hover) * 100%), transparent);
    }

    .sds-button:where([data-variant="danger"]):where(:hover:not(:disabled, [aria-disabled="true"])) {
      background-color: color-mix(in srgb, var(--sds-color-text) calc(var(--sds-mix-hover) * 100%), var(--sds-color-danger));
    }
  }

  @media (hover: hover) {
    .sds-button:where(:not([data-sds-glow="off"])):where([data-sds-glow]:not([data-sds-glow="off"]) *, [data-sds-glow]):where(:hover:not(:disabled, [aria-disabled="true"])) {
      box-shadow: var(--sds-glow-soft);
    }
  }

  .sds-button:where(:not([data-sds-glow="off"])):where([data-sds-glow]:not([data-sds-glow="off"]) *, [data-sds-glow]):where(:focus-visible:not(:active, :disabled, [aria-disabled="true"], [aria-pressed="true"])) {
    box-shadow: var(--sds-glow-strong);
    animation: sds-glow-pulse var(--sds-glow-pulse) var(--sds-ease-standard) infinite alternate;
  }

  /* Pressed: the native :active state, or a latched aria-pressed toggle button. */
  :is(.sds-button):where(:active:not(:disabled, [aria-disabled="true"])) {
    box-shadow: none;
    transform: scale(var(--sds-press-scale));
  }

  :is(.sds-button):where([aria-pressed="true"]) {
    box-shadow: inset 0 0 0 var(--sds-border-thick) var(--sds-color-accent-text);
  }

  :is(.sds-button):where([data-variant="ghost"], [data-variant="secondary"]):where([aria-pressed="true"]) {
    background-color: color-mix(in srgb, var(--sds-color-accent) calc(var(--sds-mix-strong) * 100%), transparent);
    color: var(--sds-color-text);
  }

  :is(.sds-button):where(:disabled, [aria-disabled="true"]) {
    background-color: var(--sds-color-disabled);
    border-color: transparent;
    color: var(--sds-color-on-disabled);
    box-shadow: none;
    cursor: not-allowed;
  }

  :is(.sds-button):where([data-variant="ghost"]):where(:disabled, [aria-disabled="true"]) {
    background-color: transparent;
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.sds-button):where([data-sds-glow], [data-sds-glow] *) {
      animation: none;
    }
  }

  :root[data-sds-motion="reduce"] :is(.sds-button):where([data-sds-glow], [data-sds-glow] *) {
    animation: none;
  }

  /* --- pending (button, toggle, chip): armed for a later beat or bar ----------------
     data-state="pending" draws a ring and a countdown bar that runs pending.duration (an app sets
     --sds-pending-duration on the control to its own beat); "landed" flashes once. The timing tag
     (.sds-pending-tag, data-timing from the contract) shows before the press. Timing is the app's. */

  :is(.sds-button):where([data-state="pending"]) {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 var(--sds-border-thick);
    box-shadow: inset 0 0 0 var(--sds-border-thin) currentColor;
    animation: sds-pending-count var(--sds-pending-duration) linear forwards;
  }

  :is(.sds-button):where([data-state="pending"]):dir(rtl) {
    background-position: right bottom;
  }

  :is(.sds-button):where([data-state="landed"]) {
    animation: sds-pending-landed var(--sds-pending-landed-duration) var(--sds-ease-exit) forwards;
  }

  .sds-pending-tag {
    display: inline-block;
    padding-inline-start: var(--sds-space-2);
    border-inline-start: var(--sds-border-thin) solid currentColor;
    font-size: max(var(--sds-type-min-size), calc(var(--sds-type-caption-size) * var(--sds-type-scale)));
    font-weight: var(--sds-type-label-weight);
    white-space: nowrap;
  }

  .sds-pending-tag:where([data-timing="now"]) {
    border-inline-start-style: dotted;
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.sds-button):where([data-state="pending"]) {
      animation-timing-function: steps(4, end);
    }

    :is(.sds-button):where([data-state="landed"]) {
      box-shadow: var(--sds-glow-sm);
      animation: none;
    }
  }

  :root[data-sds-motion="reduce"] :is(.sds-button):where([data-state="pending"]) {
    animation-timing-function: steps(4, end);
  }

  :root[data-sds-motion="reduce"] :is(.sds-button):where([data-state="landed"]),
  :root[data-sds-flashing="reduce"] :is(.sds-button):where([data-state="landed"]) {
    box-shadow: var(--sds-glow-sm);
    animation: none;
  }
}