@antadesign/anta 0.2.0 → 0.2.1

package/dist/elements/a-button.css

@@ -1,756 +1 @@
-@layer anta {
-  /* Shared constants + the neutral tone tokens — neutral is the
-     implicit default, so unset buttons inherit these directly. Named
-     tones (brand, critical, info, success, warning) override via
-     `[tone="X"]` selectors below.
-     Neutral chip uses a softer 5% rest alpha (other tones use 10%). */
-  a-button,
-  a[role="button"] {
-    --button-primary-fg: #ffffff;
-
-    --button-focus: #503cb4;
-
-    --bg-primary-disabled: #ece9ec;
-    --bg-secondary-disabled: #f6f4f6;
-    --fg-disabled-primary: #afa9b1;
-    --fg-disabled: #afa9b1;
-
-    --button-loading-stripe: 14px;
-    --button-loading-stripe-gap: 16px;
-    --button-loading-period: 30px;
-    --button-loading-angle: 125deg;
-    /* Project the diagonal period onto x so the slide loops seamlessly. */
-    --button-loading-x-period: calc(
-      var(--button-loading-period) / cos(var(--button-loading-angle) - 90deg)
-    );
-    --button-loading-opacity: 0.25;
-    --button-loading-blur: 2.5px;
-
-    --button-bg-primary-rest: #635b65;
-    --button-bg-primary-hover: #534c57;
-    --button-bg-primary-active: #49424c;
-    --button-fg-primary-rest: var(--button-primary-fg);
-
-    --button-bg-secondary-rest: #45374c12;
-    --button-bg-secondary-hover: #44374b1a;
-    --button-bg-secondary-active: #44374b26;
-    --button-fg-secondary-rest: #534c57;
-    --button-fg-secondary-hover: #49424c;
-    /* Darken the rest-state secondary label by this much oklch lightness so
-       it reads a touch stronger. Applied dynamically at the --button-fg
-       wiring (below), so it covers every tone — named and custom alike.
-       Light mode only; the .dark block zeroes it. */
-    --button-fg-secondary-l-shift: 0.05;
-
-    --button-fg-tertiary-rest: #635b65;
-    --button-fg-tertiary-hover: #534c57;
-    --button-bg-tertiary-hover: #44374b0d;
-    --button-bg-tertiary-active: #44374b1a;
-
-    --button-fg-quaternary-rest: #635b65;
-    --button-fg-quaternary-hover: #49424c;
-
-    /* Layout */
-    --button-padding-x: 9px;
-    --button-padding-y: 5px;
-    --button-max-width: 100%;
-    --button-max-height: 100%;
-
-    /* Transitions */
-    --button-timing-in: 75ms ease-in;
-    --button-timing-active: 50ms linear;
-    --button-timing-out: 150ms ease-out;
-    --button-loading-duration: 0.5s;
-  }
-
-  a-button[tone="brand"],
-  a[role="button"][tone="brand"] {
-    --button-bg-primary-rest: #5f4bc3;
-    --button-bg-primary-hover: #503cb4;
-    --button-bg-primary-active: #483493;
-    --button-fg-primary-rest: var(--button-primary-fg);
-
-    --button-bg-secondary-rest: #7460d71a;
-    --button-bg-secondary-hover: #7460d726;
-    --button-bg-secondary-active: #7460d733;
-    --button-fg-secondary-rest: #5f4bc3;
-    --button-fg-secondary-hover: #503cb4;
-
-    --button-fg-tertiary-rest: #5f4bc3;
-    --button-fg-tertiary-hover: #503cb4;
-    --button-bg-tertiary-hover: #7460d71a;
-    --button-bg-tertiary-active: #7460d726;
-
-    --button-fg-quaternary-rest: #5f4bc3;
-    --button-fg-quaternary-hover: #483493;
-  }
-
-  /* Critical/warning tertiary active steps heavier (20% vs 15%). */
-  a-button[tone="critical"],
-  a[role="button"][tone="critical"] {
-    --button-bg-primary-rest: #c9302c;
-    --button-bg-primary-hover: #b02120;
-    --button-bg-primary-active: #a01c1c;
-    --button-fg-primary-rest: var(--button-primary-fg);
-
-    --button-bg-secondary-rest: #de45451a;
-    --button-bg-secondary-hover: #de454526;
-    --button-bg-secondary-active: #de454533;
-    --button-fg-secondary-rest: #c9302c;
-    --button-fg-secondary-hover: #b02120;
-
-    --button-fg-tertiary-rest: #c9302c;
-    --button-fg-tertiary-hover: #b02120;
-    --button-bg-tertiary-hover: #de45451a;
-    --button-bg-tertiary-active: #de454533;
-
-    --button-fg-quaternary-rest: #c9302c;
-    --button-fg-quaternary-hover: #a01c1c;
-  }
-
-  a-button[tone="info"],
-  a[role="button"][tone="info"] {
-    --button-bg-primary-rest: #1f6eb2;
-    --button-bg-primary-hover: #1a5b93;
-    --button-bg-primary-active: #175082;
-    --button-fg-primary-rest: var(--button-primary-fg);
-
-    --button-bg-secondary-rest: #2686d91a;
-    --button-bg-secondary-hover: #2686d926;
-    --button-bg-secondary-active: #2686d933;
-    --button-fg-secondary-rest: #1f6eb2;
-    --button-fg-secondary-hover: #1a5b93;
-
-    --button-fg-tertiary-rest: #1f6eb2;
-    --button-fg-tertiary-hover: #1a5b93;
-    --button-bg-tertiary-hover: #2686d91a;
-    --button-bg-tertiary-active: #2686d926;
-
-    --button-fg-quaternary-rest: #1f6eb2;
-    --button-fg-quaternary-hover: #175082;
-  }
-
-  a-button[tone="success"],
-  a[role="button"][tone="success"] {
-    --button-bg-primary-rest: #2a7e43;
-    --button-bg-primary-hover: #226737;
-    --button-bg-primary-active: #1f5c31;
-    --button-fg-primary-rest: var(--button-primary-fg);
-
-    --button-bg-secondary-rest: #3295501a;
-    --button-bg-secondary-hover: #32955026;
-    --button-bg-secondary-active: #32955033;
-    --button-fg-secondary-rest: #2a7e43;
-    --button-fg-secondary-hover: #226737;
-
-    --button-fg-tertiary-rest: #2a7e43;
-    --button-fg-tertiary-hover: #226737;
-    --button-bg-tertiary-hover: #3295501a;
-    --button-bg-tertiary-active: #32955026;
-
-    --button-fg-quaternary-rest: #2a7e43;
-    --button-fg-quaternary-hover: #1f5c31;
-  }
-
-  a-button[tone="warning"],
-  a[role="button"][tone="warning"] {
-    --button-bg-primary-rest: #c37416;
-    --button-bg-primary-hover: #ae6613;
-    --button-bg-primary-active: #995200;
-    --button-fg-primary-rest: var(--button-primary-fg);
-
-    --button-bg-secondary-rest: #c374161a;
-    --button-bg-secondary-hover: #c3741626;
-    --button-bg-secondary-active: #c3741633;
-    --button-fg-secondary-rest: #c37416;
-    --button-fg-secondary-hover: #ae6613;
-
-    --button-fg-tertiary-rest: #c37416;
-    --button-fg-tertiary-hover: #ae6613;
-    --button-bg-tertiary-hover: #c374161a;
-    --button-bg-tertiary-active: #c3741633;
-
-    --button-fg-quaternary-rest: #c37416;
-    --button-fg-quaternary-hover: #995200;
-  }
-
-  /* Dark mode — heavier alphas (30/40% vs 10/15%) so chips stay legible
-     against a dark page bg. Neutral's anchor flips to a lilac (#e4d1ef);
-     mixing a dark gray into a dark bg yields no contrast. The constants
-     block also carries the neutral tone tokens since neutral is the
-     implicit default. */
-  .dark a-button,
-  .dark a[role="button"] {
-    --button-focus: #a897fc;
-
-    --bg-primary-disabled: #272329;
-    --bg-secondary-disabled: #1d1a1e;
-    --fg-disabled-primary: #776e77;
-    --fg-disabled: #635b65;
-
-    --button-bg-primary-rest: #534c57;
-    --button-bg-primary-hover: #635b65;
-    --button-bg-primary-active: #938d96;
-
-    --button-bg-secondary-rest: #e4d1ef1c;
-    --button-bg-secondary-hover: #e4d1ef24;
-    --button-bg-secondary-active: #e4d1ef2e;
-    --button-fg-secondary-rest: #c1b9c1;
-    --button-fg-secondary-hover: #d4ced4;
-    /* Dark-mode secondary labels are already tuned — no rest darkening. */
-    --button-fg-secondary-l-shift: 0;
-
-    --button-fg-tertiary-rest: #afa9b1;
-    --button-fg-tertiary-hover: #afa9b1;
-    --button-bg-tertiary-hover: #e4d1ef14;
-    --button-bg-tertiary-active: #e4d1ef21;
-
-    --button-fg-quaternary-rest: #afa9b1;
-    --button-fg-quaternary-hover: #cac4ca;
-  }
-
-  .dark a-button[tone="brand"],
-  .dark a[role="button"][tone="brand"] {
-    --button-bg-primary-rest: #503cb4;
-    --button-bg-primary-hover: #5f4bc3;
-    --button-bg-primary-active: #7460d7;
-
-    --button-bg-secondary-rest: #7460d73b;
-    --button-bg-secondary-hover: #7460d747;
-    --button-bg-secondary-active: #7460d754;
-    --button-fg-secondary-rest: #c5baff;
-    --button-fg-secondary-hover: #d2cbf6;
-
-    --button-fg-tertiary-rest: #ada0ee;
-    --button-fg-tertiary-hover: #bcb1f1;
-    --button-bg-tertiary-hover: #7460d73b;
-    --button-bg-tertiary-active: #7460d747;
-
-    --button-fg-quaternary-rest: #ada0ee;
-    --button-fg-quaternary-hover: #c7bef4;
-  }
-
-  .dark a-button[tone="critical"],
-  .dark a[role="button"][tone="critical"] {
-    --button-bg-primary-rest: #b02120;
-    --button-bg-primary-hover: #c9302c;
-    --button-bg-primary-active: #de4545;
-
-    --button-bg-secondary-rest: #de45453b;
-    --button-bg-secondary-hover: #de454547;
-    --button-bg-secondary-active: #de454554;
-    --button-fg-secondary-rest: #ffabac;
-    --button-fg-secondary-hover: #f4c2c2;
-
-    --button-fg-tertiary-rest: #e78e90;
-    --button-fg-tertiary-hover: #efa4a4;
-    --button-bg-tertiary-hover: #de45453b;
-    --button-bg-tertiary-active: #de454547;
-
-    --button-fg-quaternary-rest: #e78e90;
-    --button-fg-quaternary-hover: #ffabac;
-  }
-
-  .dark a-button[tone="info"],
-  .dark a[role="button"][tone="info"] {
-    --button-bg-primary-rest: #1a5b93;
-    --button-bg-primary-hover: #1f6eb2;
-    --button-bg-primary-active: #2686d9;
-
-    --button-bg-secondary-rest: #2686d93b;
-    --button-bg-secondary-hover: #2686d947;
-    --button-bg-secondary-active: #2686d954;
-    --button-fg-secondary-rest: #9ed2ff;
-    --button-fg-secondary-hover: #bad6f3;
-
-    --button-fg-tertiary-rest: #7db6e8;
-    --button-fg-tertiary-hover: #93c5ec;
-    --button-bg-tertiary-hover: #2686d93b;
-    --button-bg-tertiary-active: #2686d947;
-
-    --button-fg-quaternary-rest: #7db6e8;
-    --button-fg-quaternary-hover: #a6cdef;
-  }
-
-  .dark a-button[tone="success"],
-  .dark a[role="button"][tone="success"] {
-    --button-bg-primary-rest: #226737;
-    --button-bg-primary-hover: #2a7e43;
-    --button-bg-primary-active: #329550;
-
-    --button-bg-secondary-rest: #3295503b;
-    --button-bg-secondary-hover: #32955047;
-    --button-bg-secondary-active: #32955054;
-    --button-fg-secondary-rest: #8ceca9;
-    --button-fg-secondary-hover: #b3e5c2;
-
-    --button-fg-tertiary-rest: #74cd8e;
-    --button-fg-tertiary-hover: #88d7a0;
-    --button-bg-tertiary-hover: #3295503b;
-    --button-bg-tertiary-active: #32955047;
-
-    --button-fg-quaternary-rest: #74cd8e;
-    --button-fg-quaternary-hover: #9ddeb1;
-  }
-
-  .dark a-button[tone="warning"],
-  .dark a[role="button"][tone="warning"] {
-    --button-bg-primary-rest: #7f410b;
-    --button-bg-primary-hover: #995200;
-    --button-bg-primary-active: #ae6613;
-
-    --button-bg-secondary-rest: #c374163b;
-    --button-bg-secondary-hover: #c3741647;
-    --button-bg-secondary-active: #c3741654;
-    --button-fg-secondary-rest: #f7c06e;
-    --button-fg-secondary-hover: #f3cc91;
-
-    --button-fg-tertiary-rest: #e1a452;
-    --button-fg-tertiary-hover: #edb25a;
-    --button-bg-tertiary-hover: #c374163b;
-    --button-bg-tertiary-active: #c3741647;
-
-    --button-fg-quaternary-rest: #e1a452;
-    --button-fg-quaternary-hover: #f0bf75;
-  }
-
-  a-button,
-  a[role="button"] {
-    user-select: none;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5ch;
-    overflow: hidden;
-    cursor: pointer;
-    /* Don't shrink in a flex parent — `overflow: hidden` would clip
-       the icon/label silently. Consumers can opt back in if needed. */
-    flex-shrink: 0;
-
-    color: var(--button-fg);
-    background-color: var(--button-bg);
-    border-radius: 4px;
-    text-decoration: none;
-    /* Secondary is the default priority — a 1px hairline in the current
-       fg tone (at 50% alpha) gives the chip a subtle edge. Primary,
-       tertiary, and quaternary cancel it in their own blocks below. */
-    box-shadow: 0 0 1px color-mix(in oklch, currentColor, transparent 50%);
-
-    font-size: 15px;
-    font-family: var(--sans-serif);
-    font-weight: 450;
-    /* All upstream axes must be re-stated here — `font-variation-settings`
-       replaces, it doesn't merge with inherited values. Dropping
-       "slnt"/"ital" would revert them to the font file's non-zero
-       defaults and Safari would render button labels italic. */
-    font-variation-settings: "wdth" 88, "slnt" 0, "ital" 0;
-    line-height: 18px;
-    letter-spacing: 0.05ch;
-
-    text-overflow: ellipsis;
-    text-wrap: nowrap;
-    white-space: nowrap;
-
-    max-width: var(--button-max-width);
-    max-height: var(--button-max-height);
-    padding-inline: var(--button-padding-x);
-    padding-block: var(--button-padding-y);
-
-    & > a-button-label {
-      display: inline-block;
-      text-overflow: ellipsis;
-      text-wrap: nowrap;
-      white-space: nowrap;
-      overflow: hidden;
-      min-width: 0;
-      /* Optical centering: a 17px line box + 1px bottom padding keeps the
-         label box at 18px (so button heights are unchanged) while nudging
-         the glyphs up ~0.5px, which reads as vertically centered for the
-         Antithesis-sans metrics. */
-      line-height: 17px;
-      padding-bottom: 1px;
-      /* Switch to flex when the label has inline children so they
-         align on a baseline with a small gap. */
-      &:has(> *) {
-        display: inline-flex;
-        gap: 0.25ch;
-      }
-    }
-
-    & > * {
-      pointer-events: none;
-    }
-
-    & a-icon {
-      transition: color var(--button-timing-out);
-    }
-
-    transition:
-      color var(--button-timing-out),
-      background-color var(--button-timing-out);
-
-    &:hover,
-    &:focus-visible {
-      transition:
-        color var(--button-timing-in),
-        background-color var(--button-timing-in);
-      & a-icon {
-        transition: color var(--button-timing-in);
-      }
-    }
-
-    &:active,
-    &[selected] {
-      transition:
-        color var(--button-timing-active),
-        background-color var(--button-timing-active);
-      & a-icon {
-        transition: color var(--button-timing-active);
-      }
-    }
-
-    &[disabled] {
-      pointer-events: none;
-      cursor: not-allowed;
-      /* Skip transitions on disabled — a `.dark` toggle would flash
-         the underlying tone hue mid-resolve. */
-      transition: none;
-      & a-icon {
-        transition: none;
-      }
-    }
-
-    &:focus-visible {
-      outline: 1px solid var(--button-focus);
-      outline-offset: 1px;
-    }
-
-    /* Quaternary: instant in every direction — hover-in, press, and
-       return to rest all snap with no transition. */
-    &[priority="quaternary"] {
-      --button-timing-in: 0s;
-      --button-timing-active: 0s;
-      --button-timing-out: 0s;
-    }
-
-    &[size="small"] {
-      --button-padding-y: 3px;
-      --button-padding-x: 7px;
-    }
-    &[size="large"] {
-      --button-padding-y: 7px;
-      --button-padding-x: 13px;
-    }
-
-    /* Underline only on background-less priorities (tertiary, quaternary).
-       Rest: 0.5px hairline at 75% alpha. Hover (and sustained [selected]):
-       1px thickness at 100% alpha. Active returns to rest. Mirrors the
-       prose-link rule used by <Text>. */
-    &[priority="tertiary"],
-    &[priority="quaternary"] {
-      &[underline="solid"] {
-        text-decoration: underline solid;
-      }
-      &[underline="dashed"] {
-        text-decoration: underline dashed;
-      }
-      &[underline="dotted"] {
-        text-decoration: underline dotted;
-      }
-      &[underline] {
-        text-decoration-color: color-mix(in srgb, currentColor 75%, transparent);
-        text-decoration-thickness: 1px;
-        text-underline-offset: 3px;
-        &[selected] {
-          text-decoration-color: var(--button-fg);
-          text-decoration-thickness: 1px;
-        }
-        /* Hover only on real-pointer devices — gating avoids the sticky
-           hover-underline that lingers after a tap on touch screens. */
-        @media (hover: hover) and (pointer: fine) {
-          &:hover {
-            text-decoration-color: var(--button-fg);
-            text-decoration-thickness: 1px;
-          }
-        }
-      }
-    }
-
-    &[priority="quaternary"][paddingless] {
-      --button-padding-x: 0;
-      --button-padding-y: 0;
-    }
-
-    /* Icon-only — square padding plus a min-size pin when the button
-       has exactly one child and it's an `a-icon`. Purely structural,
-       no opt-in attribute: consumers writing raw `<a-button>` get
-       icon-button styling just by passing a single `<a-icon>` inside. */
-    &:has(> a-icon:only-child) {
-      --button-padding-y: 5px;
-      --button-padding-x: 5px;
-      min-width: 28px;
-      min-height: 28px;
-      /* Centre the icon when the host is given an explicit width / height
-         larger than the natural square — without this the icon sits at the
-         padding-start edge. No-op when the button is at its intrinsic
-         square size. */
-      justify-content: center;
-      &[size="small"] {
-        --button-padding-y: 3px;
-        --button-padding-x: 3px;
-        min-width: 24px;
-        min-height: 24px;
-      }
-      &[size="large"] {
-        --button-padding-y: 7px;
-        --button-padding-x: 7px;
-        min-width: 32px;
-        min-height: 32px;
-      }
-    }
-
-    /* Optical side padding: an icon at an edge needs less breathing room
-       than a text edge, so tighten the padding on whichever side a
-       (non-only) icon occupies — leading icon trims the start, trailing
-       icon trims the end — to ~2px under the text-edge padding (8px → 6px
-       at medium). `max(0px, …)` keeps paddingless/quaternary at 0.
-       Icon-only buttons are handled by the rule above. */
-    &:has(> a-icon:first-child:not(:only-child)) {
-      padding-inline-start: max(0px, var(--button-padding-x) - 2px);
-    }
-    &:has(> a-icon:last-child:not(:only-child)) {
-      padding-inline-end: max(0px, var(--button-padding-x) - 2px);
-    }
-
-    &[loading] {
-      position: relative;
-      pointer-events: none;
-      cursor: wait;
-      &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        /* Overshoot left by one x-period so the loop seam lines up. */
-        left: calc(0px - var(--button-loading-x-period));
-        right: 0;
-        pointer-events: none;
-        background: repeating-linear-gradient(
-          var(--button-loading-angle),
-          transparent 0,
-          transparent var(--button-loading-stripe-gap),
-          currentColor var(--button-loading-stripe-gap),
-          currentColor
-            calc(
-              var(--button-loading-stripe-gap) + var(--button-loading-stripe)
-            )
-        );
-        opacity: var(--button-loading-opacity);
-        filter: blur(var(--button-loading-blur));
-        will-change: transform;
-        animation: btn-loading-slide var(--button-loading-duration) linear
-          infinite;
-        /* Desync instances so a row doesn't pulse in lockstep. */
-        animation-delay: -9999s;
-      }
-    }
-
-    /* Custom tone — any non-named `tone` value. Primary uses the literal
-       color as-is; the other priorities derive from the source HUE via
-       oklch relative color, with lightness/chroma/alpha pinned near Brand
-       so any hue reads like a sibling of the named tones. The `--_tone-*`
-       knobs below are the only numbers to tune; the dark block re-tunes
-       them and the formulas resolve against whichever value computes.
-       JSX wrapper writes `--button-tone-source` inline for SSR / older
-       engines; the typed attr() fallback picks up raw `<a-button tone="…">`
-       on Chrome 133+ / Safari 18.2+. (oklch relative color: Chrome 119+,
-       Safari 16.4+, Firefox 128+.) */
-    &[tone]:not(
-        [tone=""],
-        [tone="brand"],
-        [tone="neutral"],
-        [tone="critical"],
-        [tone="info"],
-        [tone="success"],
-        [tone="warning"]
-      ) {
-      --button-tone-source: attr(tone type(<color>), transparent);
-
-      /* Tunable knobs (light mode). */
-      --_tone-fg-l: 0.46;          /* fg rest lightness */
-      --_tone-fg-strong-l: 0.40;   /* fg hover / active lightness */
-      --_tone-fg-c: 0.17;          /* fg chroma */
-      --_tone-bg-l: 0.54;          /* tinted-bg lightness */
-      --_tone-bg-c: 0.16;          /* tinted-bg chroma */
-      --_tone-bg-a-rest: 0.10;     /* tinted-bg alpha (rest) */
-      --_tone-bg-a-hover: 0.15;    /* tinted-bg alpha (hover) */
-      --_tone-bg-a-active: 0.20;   /* tinted-bg alpha (active) */
-      --_tone-primary-l-rest: 0.5;     /* primary-fill lightness (rest) */
-      --_tone-primary-l-hover: 0.45;   /* primary-fill lightness (hover) */
-      --_tone-primary-l-active: 0.4;   /* primary-fill lightness (active) */
-
-      /* Primary — source hue & chroma, lightness pinned near Brand's
-         primary fill so any input lands at a Brand-like lightness instead
-         of using the raw color. Re-tunes for dark mode through the knobs
-         (the `.dark` block below), exactly like the Brand tone does. */
-      --button-bg-primary-rest:   oklch(from var(--button-tone-source) var(--_tone-primary-l-rest) c h);
-      --button-bg-primary-hover:  oklch(from var(--button-tone-source) var(--_tone-primary-l-hover) c h);
-      --button-bg-primary-active: oklch(from var(--button-tone-source) var(--_tone-primary-l-active) c h);
-      --button-fg-primary-rest: var(--button-primary-fg);
-
-      /* Secondary / tertiary / quaternary fg — source hue, pinned L/C. */
-      --button-fg-secondary-rest:   oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);
-      --button-fg-secondary-hover:  oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);
-      --button-fg-tertiary-rest:    oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);
-      --button-fg-tertiary-hover:   oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);
-      --button-fg-quaternary-rest:  oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);
-      --button-fg-quaternary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);
-
-      /* Tinted backgrounds — source hue, pinned L, brand-like alphas. */
-      --button-bg-secondary-rest:   oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-rest));
-      --button-bg-secondary-hover:  oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-hover));
-      --button-bg-secondary-active: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-active));
-      --button-bg-tertiary-hover:   oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-rest));
-      --button-bg-tertiary-active:  oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-hover));
-    }
-
-    /* Custom tone, dark mode — same formulas, re-tuned knobs: lighter fg
-       and heavier tint alphas to read against a dark page. */
-    .dark &[tone]:not(
-        [tone=""],
-        [tone="brand"],
-        [tone="neutral"],
-        [tone="critical"],
-        [tone="info"],
-        [tone="success"],
-        [tone="warning"]
-      ) {
-      --_tone-fg-l: 0.78;
-      --_tone-fg-strong-l: 0.85;
-      --_tone-fg-c: 0.11;
-      --_tone-bg-l: 0.58;
-      --_tone-bg-a-rest: 0.23;
-      --_tone-bg-a-hover: 0.28;
-      --_tone-bg-a-active: 0.33;
-      /* Primary fill lightness, dark mode (Brand inverts rest/hover and
-         lifts active to read against a dark page). */
-      --_tone-primary-l-rest: 0.45;
-      --_tone-primary-l-hover: 0.5;
-      --_tone-primary-l-active: 0.57;
-    }
-
-    /* Wire the per-tone vars into the final fg/bg colors. Secondary
-       is the default — declared unscoped so a bare `a-button` consumer
-       selector can override it without bumping specificity. Primary,
-       tertiary, and quaternary match an explicit `[priority="…"]` attr
-       and win on specificity (primary's constant fg beats the unscoped
-       :hover on source order). */
-    --button-fg: oklch(from var(--button-fg-secondary-rest) calc(l - var(--button-fg-secondary-l-shift)) c h);
-    --button-bg: var(--button-bg-secondary-rest);
-    /* Hover styling is gated to real-pointer devices so it doesn't stick
-       after a tap on touch screens (where :hover lingers until the next
-       tap elsewhere). :active / [selected] below stay ungated — they're
-       the correct press feedback on touch. */
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        --button-fg: var(--button-fg-secondary-hover);
-        --button-bg: var(--button-bg-secondary-hover);
-      }
-    }
-    &:active,
-    &[selected] {
-      --button-fg: var(--button-fg-secondary-hover);
-      --button-bg: var(--button-bg-secondary-active);
-    }
-    &[priority="primary"] {
-      --button-fg: var(--button-fg-primary-rest);
-      --button-bg: var(--button-bg-primary-rest);
-      /* Solid fill carries its own edge — drop the secondary hairline. */
-      box-shadow: none;
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          --button-bg: var(--button-bg-primary-hover);
-        }
-      }
-      &:active,
-      &[selected] {
-        --button-bg: var(--button-bg-primary-active);
-      }
-    }
-    &[priority="tertiary"] {
-      --button-fg: var(--button-fg-tertiary-rest);
-      --button-bg: transparent;
-      /* Background-less — no hairline. */
-      box-shadow: none;
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          --button-fg: var(--button-fg-tertiary-hover);
-          --button-bg: var(--button-bg-tertiary-hover);
-        }
-      }
-      &:active,
-      &[selected] {
-        --button-fg: var(--button-fg-tertiary-hover);
-        --button-bg: var(--button-bg-tertiary-active);
-      }
-    }
-    &[priority="quaternary"] {
-      /* Rest fg is the quaternary tone at 90% alpha — slightly faded, so a
-         quaternary button reads as quieter than a (full-opacity) tertiary
-         one. Hover / active restore full opacity. */
-      --button-fg: color-mix(in oklch, var(--button-fg-quaternary-rest) 90%, transparent);
-      --button-bg: transparent;
-      /* Background-less — no hairline. */
-      box-shadow: none;
-      font-weight: 415;
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          --button-fg: var(--button-fg-quaternary-hover);
-        }
-      }
-      &[selected] {
-        --button-fg: var(--button-fg-quaternary-hover);
-      }
-      /* Pressing lightens the rest color by 0.05 (oklch L) for a subtle
-         press feedback in light mode — declared after :hover so it wins
-         while the pointer is still over the button. Dark mode returns to
-         the rest color (lightening would brighten the already-light fg). */
-      &:active {
-        --button-fg: oklch(from var(--button-fg-quaternary-rest) calc(l + 0.05) c h);
-      }
-      .dark &:active {
-        --button-fg: var(--button-fg-quaternary-rest);
-      }
-    }
-
-    /* Selected gets a 1px inset ring in the current fg color. Declared
-       after the priority blocks so it overrides their `box-shadow: none`
-       cancels — every selected button keeps its ring regardless of
-       priority. */
-    &[selected] {
-      box-shadow: inset 0 0 0 1px currentColor;
-    }
-
-    /* Set bg/color directly (not the vars) so inline-style
-       `--button-bg` overrides can't keep a disabled button alive.
-       Secondary disabled is the default; other priorities override below. */
-    &[disabled] {
-      background-color: var(--bg-secondary-disabled);
-      color: var(--fg-disabled);
-      &[priority="primary"] {
-        background-color: var(--bg-primary-disabled);
-        color: var(--fg-disabled-primary);
-      }
-      &[priority="tertiary"],
-      &[priority="quaternary"] {
-        background-color: transparent;
-        color: var(--fg-disabled);
-      }
-    }
-  }
-}
-
-@keyframes btn-loading-slide {
-  to {
-    transform: translateX(var(--button-loading-x-period));
-  }
-}
+@layer anta{a-button,a[role=button]{--button-primary-fg: #ffffff;--button-focus: #503cb4;--bg-primary-disabled: #ece9ec;--bg-secondary-disabled: #f6f4f6;--fg-disabled-primary: #afa9b1;--fg-disabled: #afa9b1;--button-loading-stripe: 14px;--button-loading-stripe-gap: 16px;--button-loading-period: 30px;--button-loading-angle: 125deg;--button-loading-x-period: calc( var(--button-loading-period) / cos(var(--button-loading-angle) - 90deg) );--button-loading-opacity: .15;--button-loading-blur: 2.5px;--button-bg-primary-rest: #635b65;--button-bg-primary-hover: #534c57;--button-bg-primary-active: #49424c;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #45374c12;--button-bg-secondary-hover: #44374b1a;--button-bg-secondary-active: #44374b26;--button-fg-secondary-rest: #534c57;--button-fg-secondary-hover: #49424c;--button-fg-secondary-l-shift: .05;--button-fg-tertiary-rest: #635b65;--button-fg-tertiary-hover: #534c57;--button-bg-tertiary-hover: #44374b0d;--button-bg-tertiary-active: #44374b1a;--button-fg-quaternary-rest: #635b65;--button-fg-quaternary-hover: #49424c;--button-padding-x: 9px;--button-padding-y: 5px;--button-max-width: 100%;--button-max-height: 100%;--button-timing-in: 75ms ease-in;--button-timing-active: 50ms linear;--button-timing-out: .15s ease-out;--button-loading-duration: .5s}a-button[tone=brand],a[role=button][tone=brand]{--button-bg-primary-rest: #5f4bc3;--button-bg-primary-hover: #503cb4;--button-bg-primary-active: #483493;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #7460d71a;--button-bg-secondary-hover: #7460d726;--button-bg-secondary-active: #7460d733;--button-fg-secondary-rest: #5f4bc3;--button-fg-secondary-hover: #503cb4;--button-fg-tertiary-rest: #5f4bc3;--button-fg-tertiary-hover: #503cb4;--button-bg-tertiary-hover: #7460d71a;--button-bg-tertiary-active: #7460d726;--button-fg-quaternary-rest: #5f4bc3;--button-fg-quaternary-hover: #483493}a-button[tone=critical],a[role=button][tone=critical]{--button-bg-primary-rest: #c9302c;--button-bg-primary-hover: #b02120;--button-bg-primary-active: #a01c1c;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #de45451a;--button-bg-secondary-hover: #de454526;--button-bg-secondary-active: #de454533;--button-fg-secondary-rest: #c9302c;--button-fg-secondary-hover: #b02120;--button-fg-tertiary-rest: #c9302c;--button-fg-tertiary-hover: #b02120;--button-bg-tertiary-hover: #de45451a;--button-bg-tertiary-active: #de454533;--button-fg-quaternary-rest: #c9302c;--button-fg-quaternary-hover: #a01c1c}a-button[tone=info],a[role=button][tone=info]{--button-bg-primary-rest: #1f6eb2;--button-bg-primary-hover: #1a5b93;--button-bg-primary-active: #175082;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #2686d91a;--button-bg-secondary-hover: #2686d926;--button-bg-secondary-active: #2686d933;--button-fg-secondary-rest: #1f6eb2;--button-fg-secondary-hover: #1a5b93;--button-fg-tertiary-rest: #1f6eb2;--button-fg-tertiary-hover: #1a5b93;--button-bg-tertiary-hover: #2686d91a;--button-bg-tertiary-active: #2686d926;--button-fg-quaternary-rest: #1f6eb2;--button-fg-quaternary-hover: #175082}a-button[tone=success],a[role=button][tone=success]{--button-bg-primary-rest: #2a7e43;--button-bg-primary-hover: #226737;--button-bg-primary-active: #1f5c31;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #3295501a;--button-bg-secondary-hover: #32955026;--button-bg-secondary-active: #32955033;--button-fg-secondary-rest: #2a7e43;--button-fg-secondary-hover: #226737;--button-fg-tertiary-rest: #2a7e43;--button-fg-tertiary-hover: #226737;--button-bg-tertiary-hover: #3295501a;--button-bg-tertiary-active: #32955026;--button-fg-quaternary-rest: #2a7e43;--button-fg-quaternary-hover: #1f5c31}a-button[tone=warning],a[role=button][tone=warning]{--button-bg-primary-rest: #c37416;--button-bg-primary-hover: #ae6613;--button-bg-primary-active: #995200;--button-fg-primary-rest: var(--button-primary-fg);--button-bg-secondary-rest: #c374161a;--button-bg-secondary-hover: #c3741626;--button-bg-secondary-active: #c3741633;--button-fg-secondary-rest: #c37416;--button-fg-secondary-hover: #ae6613;--button-fg-tertiary-rest: #c37416;--button-fg-tertiary-hover: #ae6613;--button-bg-tertiary-hover: #c374161a;--button-bg-tertiary-active: #c3741633;--button-fg-quaternary-rest: #c37416;--button-fg-quaternary-hover: #995200}.dark a-button,.dark a[role=button]{--button-focus: #a897fc;--bg-primary-disabled: #272329;--bg-secondary-disabled: #1d1a1e;--fg-disabled-primary: #776e77;--fg-disabled: #635b65;--button-bg-primary-rest: #534c57;--button-bg-primary-hover: #635b65;--button-bg-primary-active: #938d96;--button-bg-secondary-rest: #e4d1ef1c;--button-bg-secondary-hover: #e4d1ef24;--button-bg-secondary-active: #e4d1ef2e;--button-fg-secondary-rest: #c1b9c1;--button-fg-secondary-hover: #d4ced4;--button-fg-secondary-l-shift: 0;--button-fg-tertiary-rest: #afa9b1;--button-fg-tertiary-hover: #afa9b1;--button-bg-tertiary-hover: #e4d1ef14;--button-bg-tertiary-active: #e4d1ef21;--button-fg-quaternary-rest: #afa9b1;--button-fg-quaternary-hover: #cac4ca}.dark a-button[tone=brand],.dark a[role=button][tone=brand]{--button-bg-primary-rest: #503cb4;--button-bg-primary-hover: #5f4bc3;--button-bg-primary-active: #7460d7;--button-bg-secondary-rest: #7460d73b;--button-bg-secondary-hover: #7460d747;--button-bg-secondary-active: #7460d754;--button-fg-secondary-rest: #c5baff;--button-fg-secondary-hover: #d2cbf6;--button-fg-tertiary-rest: #ada0ee;--button-fg-tertiary-hover: #bcb1f1;--button-bg-tertiary-hover: #7460d73b;--button-bg-tertiary-active: #7460d747;--button-fg-quaternary-rest: #ada0ee;--button-fg-quaternary-hover: #c7bef4}.dark a-button[tone=critical],.dark a[role=button][tone=critical]{--button-bg-primary-rest: #b02120;--button-bg-primary-hover: #c9302c;--button-bg-primary-active: #de4545;--button-bg-secondary-rest: #de45453b;--button-bg-secondary-hover: #de454547;--button-bg-secondary-active: #de454554;--button-fg-secondary-rest: #ffabac;--button-fg-secondary-hover: #f4c2c2;--button-fg-tertiary-rest: #e78e90;--button-fg-tertiary-hover: #efa4a4;--button-bg-tertiary-hover: #de45453b;--button-bg-tertiary-active: #de454547;--button-fg-quaternary-rest: #e78e90;--button-fg-quaternary-hover: #ffabac}.dark a-button[tone=info],.dark a[role=button][tone=info]{--button-bg-primary-rest: #1a5b93;--button-bg-primary-hover: #1f6eb2;--button-bg-primary-active: #2686d9;--button-bg-secondary-rest: #2686d93b;--button-bg-secondary-hover: #2686d947;--button-bg-secondary-active: #2686d954;--button-fg-secondary-rest: #9ed2ff;--button-fg-secondary-hover: #bad6f3;--button-fg-tertiary-rest: #7db6e8;--button-fg-tertiary-hover: #93c5ec;--button-bg-tertiary-hover: #2686d93b;--button-bg-tertiary-active: #2686d947;--button-fg-quaternary-rest: #7db6e8;--button-fg-quaternary-hover: #a6cdef}.dark a-button[tone=success],.dark a[role=button][tone=success]{--button-bg-primary-rest: #226737;--button-bg-primary-hover: #2a7e43;--button-bg-primary-active: #329550;--button-bg-secondary-rest: #3295503b;--button-bg-secondary-hover: #32955047;--button-bg-secondary-active: #32955054;--button-fg-secondary-rest: #8ceca9;--button-fg-secondary-hover: #b3e5c2;--button-fg-tertiary-rest: #74cd8e;--button-fg-tertiary-hover: #88d7a0;--button-bg-tertiary-hover: #3295503b;--button-bg-tertiary-active: #32955047;--button-fg-quaternary-rest: #74cd8e;--button-fg-quaternary-hover: #9ddeb1}.dark a-button[tone=warning],.dark a[role=button][tone=warning]{--button-bg-primary-rest: #7f410b;--button-bg-primary-hover: #995200;--button-bg-primary-active: #ae6613;--button-bg-secondary-rest: #c374163b;--button-bg-secondary-hover: #c3741647;--button-bg-secondary-active: #c3741654;--button-fg-secondary-rest: #f7c06e;--button-fg-secondary-hover: #f3cc91;--button-fg-tertiary-rest: #e1a452;--button-fg-tertiary-hover: #edb25a;--button-bg-tertiary-hover: #c374163b;--button-bg-tertiary-active: #c3741647;--button-fg-quaternary-rest: #e1a452;--button-fg-quaternary-hover: #f0bf75}a-button,a[role=button]{user-select:none;display:inline-flex;align-items:center;gap:.5ch;overflow:hidden;cursor:pointer;flex-shrink:0;color:var(--button-fg);background-color:var(--button-bg);border-radius:4px;text-decoration:none;box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 70%);font-size:15px;font-family:var(--sans-serif);font-weight:450;font-variation-settings:"wdth" 88,"slnt" 0,"ital" 0;line-height:18px;letter-spacing:.05ch;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;max-width:var(--button-max-width);max-height:var(--button-max-height);padding-inline:var(--button-padding-x);padding-block:var(--button-padding-y);>a-button-label{display:inline-block;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0;line-height:17px;padding-bottom:1px;&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}& a-icon{transition:color var(--button-timing-out)}transition:color var(--button-timing-out),background-color var(--button-timing-out);&:hover,&:focus-visible{transition:color var(--button-timing-in),background-color var(--button-timing-in);& a-icon{transition:color var(--button-timing-in)}}&:active,&[selected]{transition:color var(--button-timing-active),background-color var(--button-timing-active);& a-icon{transition:color var(--button-timing-active)}}&[disabled]{pointer-events:none;cursor:not-allowed;transition:none;& a-icon{transition:none}}&:focus-visible{outline:1px solid var(--button-focus);outline-offset:1px}&[priority=quaternary]{--button-timing-in: 0s;--button-timing-active: 0s;--button-timing-out: 0s}&[size=small]{--button-padding-y: 3px;--button-padding-x: 7px}&[size=large]{--button-padding-y: 7px;--button-padding-x: 13px}&[priority=tertiary],&[priority=quaternary]{&[underline=solid]{text-decoration:underline solid}&[underline=dashed]{text-decoration:underline dashed}&[underline=dotted]{text-decoration:underline dotted}&[underline]{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;&[selected]{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}}}}&[priority=quaternary][paddingless]{--button-padding-x: 0;--button-padding-y: 0}&:has(>a-icon:only-child){--button-padding-y: 5px;--button-padding-x: 5px;min-width:28px;min-height:28px;justify-content:center;&[size=small]{--button-padding-y: 3px;--button-padding-x: 3px;min-width:24px;min-height:24px}&[size=large]{--button-padding-y: 7px;--button-padding-x: 7px;min-width:32px;min-height:32px}}&:has(>a-icon:first-child:not(:only-child)){padding-inline-start:max(0px,var(--button-padding-x) - 2px)}&:has(>a-icon:last-child:not(:only-child)){padding-inline-end:max(0px,var(--button-padding-x) - 2px)}&[loading]{position:relative;pointer-events:none;cursor:wait;&:before{content:"";position:absolute;top:0;bottom:0;left:calc(0px - var(--button-loading-x-period));right:0;pointer-events:none;background:repeating-linear-gradient(var(--button-loading-angle),transparent 0,transparent var(--button-loading-stripe-gap),currentColor var(--button-loading-stripe-gap),currentColor calc(var(--button-loading-stripe-gap) + var(--button-loading-stripe)));opacity:var(--button-loading-opacity);filter:blur(var(--button-loading-blur));will-change:transform;animation:btn-loading-slide var(--button-loading-duration) linear infinite;animation-delay:-9999s}}&[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=critical],[tone=info],[tone=success],[tone=warning]){--button-tone-source: attr(tone type(<color>), transparent);--_tone-fg-l: .46;--_tone-fg-strong-l: .4;--_tone-fg-c: .17;--_tone-bg-l: .54;--_tone-bg-c: .16;--_tone-bg-a-rest: .1;--_tone-bg-a-hover: .15;--_tone-bg-a-active: .2;--_tone-primary-l-rest: .5;--_tone-primary-l-hover: .45;--_tone-primary-l-active: .4;--button-bg-primary-rest: oklch(from var(--button-tone-source) var(--_tone-primary-l-rest) c h);--button-bg-primary-hover: oklch(from var(--button-tone-source) var(--_tone-primary-l-hover) c h);--button-bg-primary-active: oklch(from var(--button-tone-source) var(--_tone-primary-l-active) c h);--button-fg-primary-rest: var(--button-primary-fg);--button-fg-secondary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-secondary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-fg-tertiary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-tertiary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-fg-quaternary-rest: oklch(from var(--button-tone-source) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-quaternary-hover: oklch(from var(--button-tone-source) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-bg-secondary-rest: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-rest));--button-bg-secondary-hover: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-hover));--button-bg-secondary-active: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-active));--button-bg-tertiary-hover: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-rest));--button-bg-tertiary-active: oklch(from var(--button-tone-source) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-bg-a-hover))}.dark &[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=critical],[tone=info],[tone=success],[tone=warning]){--_tone-fg-l: .78;--_tone-fg-strong-l: .85;--_tone-fg-c: .11;--_tone-bg-l: .58;--_tone-bg-a-rest: .23;--_tone-bg-a-hover: .28;--_tone-bg-a-active: .33;--_tone-primary-l-rest: .45;--_tone-primary-l-hover: .5;--_tone-primary-l-active: .57}--button-fg: oklch(from var(--button-fg-secondary-rest) calc(l - var(--button-fg-secondary-l-shift)) c h);--button-bg: var(--button-bg-secondary-rest);@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}}&:active,&[selected]{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-active)}&[priority=primary]{--button-fg: var(--button-fg-primary-rest);--button-bg: var(--button-bg-primary-rest);box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-bg: var(--button-bg-primary-hover)}}&:active,&[selected]{--button-bg: var(--button-bg-primary-active)}}&[priority=tertiary]{--button-fg: var(--button-fg-tertiary-rest);--button-bg: transparent;box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&:active,&[selected]{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-active)}}&[priority=quaternary]{--button-fg: color-mix(in oklch, var(--button-fg-quaternary-rest) 90%, transparent);--button-bg: transparent;box-shadow:none;font-weight:415;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-quaternary-hover)}}&[selected]{--button-fg: var(--button-fg-quaternary-hover)}&:active{--button-fg: oklch(from var(--button-fg-quaternary-rest) calc(l + .05) c h)}.dark &:active{--button-fg: var(--button-fg-quaternary-rest)}}&[selected]{box-shadow:inset 0 0 0 1px currentColor}&[disabled]{background-color:var(--bg-secondary-disabled);color:var(--fg-disabled);&[priority=primary]{background-color:var(--bg-primary-disabled);color:var(--fg-disabled-primary)}&[priority=tertiary],&[priority=quaternary]{background-color:transparent;color:var(--fg-disabled)}}}}@keyframes btn-loading-slide{to{transform:translate(var(--button-loading-x-period))}}