@layer components{@layer base{.button{--button-surface:light-dark(var(--color-brand-midnight-blue-500),var(--color-brand-cloud-white));--button-surface-hover:light-dark(var(--color-brand-midnight-blue-800),var(--color-brand-cloud-white-200));--button-ink:light-dark(var(--color-brand-cloud-white),var(--color-brand-midnight-blue-500));--button-primary-pressed-bg:light-dark(var(--button-surface),var(--button-surface-hover));--button-secondary-pressed-bg:light-dark(oklch(from var(--color-brand-midnight-blue-500) l c h / 4%),oklch(from var(--color-brand-cloud-white) l c h / 8%));--button-tertiary-pressed-color:var(--button-surface-hover);--button-focus-ring:light-dark(var(--color-brand-indigo-600),var(--color-brand-midnight-blue-100));--button-disabled-opacity:.4;--button-tertiary-hover-opacity:.6;--button-icon-size:var(--space-6x);--button-icon-slide-duration:var(--duration-slower);--button-icon-fade-duration:var(--duration-base);--button-icon-slide-in-easing:var(--ease-out);--button-icon-slide-out-easing:var(--ease-out);--button-icon-fade-easing:linear;gap:var(--space-2x);min-inline-size:max-content;block-size:var(--space-12x);padding-block:var(--space-3x);padding-inline:var(--space-4x);color:var(--button-ink);appearance:none;cursor:pointer;background-color:#0000;border:0;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}@media (prefers-reduced-motion:no-preference){.button{transition:background-color var(--duration-base) linear, opacity var(--duration-base) linear}}.button__icon{inline-size:var(--button-icon-size);block-size:var(--button-icon-size);display:inline-flex;overflow:clip}.button__icon-glyph{flex:0 0 var(--button-icon-size);inline-size:var(--button-icon-size);block-size:var(--button-icon-size);vertical-align:0}.button__icon-glyph:first-child{margin-inline-start:calc(-1 * var(--button-icon-size))}}@layer variants{.button[data-tone=accent]{--button-surface:var(--color-brand-indigo-600);--button-surface-hover:var(--color-brand-indigo-700);--button-ink:var(--color-brand-cloud-white);--button-primary-pressed-bg:var(--button-surface-hover);--button-secondary-pressed-bg:oklch(from var(--color-brand-indigo-100) l c h / 20%);--button-focus-ring:var(--color-brand-indigo-600)}.button[data-tone=light]{color-scheme:light}.button[data-tone=dark]{color-scheme:dark}.button[data-variant=primary]{color:var(--button-ink);background-color:var(--button-surface)}.button[data-variant=secondary]{color:var(--button-surface);border:var(--border-width-hairline) solid var(--button-surface);background-color:#0000}.button[data-variant=tertiary]{--button-tertiary-ink:var(--color-heading);--button-tertiary-pressed-color:light-dark(var(--color-brand-cloud-white-900),var(--color-brand-cloud-white-200));block-size:auto;padding-block:var(--space-3x);color:var(--button-tertiary-ink);background-color:#0000;padding-inline:0;text-decoration:none}.button[data-tone=accent][data-variant=tertiary]{--button-tertiary-ink:var(--color-brand-indigo-600);--button-tertiary-pressed-color:var(--color-brand-indigo-700)}}@layer states{.button__icon.is-sliding .button__icon-glyph:first-child{animation:button-icon-slide-in var(--button-icon-slide-duration) var(--button-icon-slide-in-easing) forwards, button-icon-fade-in var(--button-icon-fade-duration) var(--button-icon-fade-easing) forwards}.button__icon.is-sliding .button__icon-glyph:last-child{animation:button-icon-slide-out var(--button-icon-slide-duration) var(--button-icon-slide-out-easing) forwards, button-icon-fade-out var(--button-icon-fade-duration) var(--button-icon-fade-easing) forwards}@media (hover:hover){.button[data-variant=primary]:hover:not(:disabled,[aria-disabled=true]){background-color:var(--button-surface-hover)}.button[data-variant=tertiary]:hover:not(:disabled,[aria-disabled=true]){opacity:var(--button-tertiary-hover-opacity)}.button[data-tone=accent][data-variant=tertiary]:hover:not(:disabled,[aria-disabled=true]){color:var(--color-brand-indigo-700)}}.button[data-variant=primary]:active:not(:disabled,[aria-disabled=true]){background-color:var(--button-primary-pressed-bg)}.button[data-variant=secondary]:active:not(:disabled,[aria-disabled=true]){background-color:var(--button-secondary-pressed-bg)}.button[data-variant=tertiary]:active:not(:disabled,[aria-disabled=true]){color:var(--button-tertiary-pressed-color)}.button:focus-visible{outline:var(--focus-ring-width) solid var(--button-focus-ring);outline-offset:var(--focus-ring-offset)}.button:disabled,.button[aria-disabled=true]{cursor:not-allowed;opacity:var(--button-disabled-opacity)}}@keyframes button-icon-slide-in{to{translate:100%}}@keyframes button-icon-slide-out{to{translate:100%}}@keyframes button-icon-fade-in{0%{opacity:0}to{opacity:1}}@keyframes button-icon-fade-out{0%{opacity:1}to{opacity:0}}}