@layer components{.btn,.icon-btn,.chip,.chip__remove{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.btn:focus-visible,.icon-btn:focus-visible,.chip:focus-visible,.chip__remove:focus-visible{outline:var(--focus-ring-width) solid transparent;outline-offset:var(--focus-ring-width);box-shadow:var(--shadow-focus)}.btn{--btn-h: var(--control-height-md);--btn-px: var(--space-5);--btn-py: var(--space-1);--btn-spin: var(--color-text-on-brand);position:relative;box-sizing:border-box;display:inline-grid;grid-auto-flow:column;align-items:center;justify-content:center;justify-items:center;column-gap:var(--space-2);min-height:var(--btn-h);max-width:100%;margin:0;padding:var(--btn-py) var(--btn-px);font-family:var(--font-family);font-size:var(--type-button-size);font-weight:var(--font-weight-medium);letter-spacing:var(--type-button-tracking);line-height:var(--type-button-line);white-space:normal;text-align:center;text-wrap:balance;overflow-wrap:break-word;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;border:var(--border-width-hairline) solid transparent;border-radius:var(--radius-pill);transition:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),text-decoration-thickness var(--duration-fast) var(--ease-out)}.btn__content{grid-area:1 / 1;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-width:0}.btn__icon{flex:none;width:var(--icon-md);height:var(--icon-md)}.btn__spinner,.btn__busy{grid-area:1 / 1;display:none}.btn--lg{--btn-h: var(--control-height-lg);--btn-px: var(--space-6);--btn-py: var(--space-2)}.btn--sm{--btn-h: var(--control-height-sm);--btn-px: var(--space-4);font-size:var(--type-small-size)}.btn--sm .btn__icon{width:var(--icon-sm);height:var(--icon-sm)}.btn--sm:after{content:"";position:absolute;inset:calc((var(--control-height-sm) - var(--touch-target)) / 2) 0}.btn--full{display:grid;width:100%;--btn-px: var(--space-4)}.btn--primary{background:var(--color-bg-brand);color:var(--color-text-on-brand)}.btn--secondary{background:transparent;color:var(--color-text-primary);border-color:var(--color-border-strong-ink);--btn-spin: var(--color-text-primary)}.btn--tertiary{--btn-px: 0;--btn-spin: var(--color-text-primary);min-height:var(--touch-target);background:none;color:var(--color-text-primary);text-decoration:underline;text-decoration-thickness:var(--border-width-hairline);text-underline-offset:var(--link-underline-offset);border-radius:var(--radius-sm)}.btn--on-dark{--btn-spin: currentColor;background:transparent;color:var(--color-text-on-brand);border-color:var(--color-text-on-brand)}.btn--primary:active{background:var(--color-bg-brand-pressed)}.btn--secondary:active{background:var(--color-bg-inverse);color:var(--color-text-on-inverse);--btn-spin: var(--color-text-on-inverse)}.btn--tertiary:active{text-decoration-thickness:var(--border-width-selected)}.btn--on-dark:active{background:var(--color-bg-page);color:var(--color-text-primary)}.btn:disabled,.btn[aria-disabled=true]{background:var(--color-bg-disabled);color:var(--color-text-disabled);border-color:var(--color-border-subtle);cursor:not-allowed}.btn--tertiary:disabled,.btn--tertiary[aria-disabled=true]{background:none;border-color:transparent;text-decoration:none}:is(.btn,.icon-btn,.chip):is(:disabled,[aria-disabled=true]) svg{stroke:currentColor}.btn[aria-busy=true]{cursor:progress}.btn[aria-busy=true] .btn__content{color:transparent}.btn[aria-busy=true] .btn__spinner{display:block;box-sizing:border-box;width:var(--icon-md);height:var(--icon-md);border-radius:var(--radius-round);border:var(--border-width-selected) solid;border-color:var(--btn-spin) transparent var(--btn-spin) transparent;animation:btn-spin var(--duration-reveal) var(--ease-linear) infinite}.btn[aria-busy=true] .btn__busy{color:var(--btn-spin);white-space:nowrap}@keyframes btn-spin{to{transform:rotate(1turn)}}.icon-btn{box-sizing:border-box;display:inline-grid;place-items:center;flex:none;width:var(--touch-target);height:var(--touch-target);margin:0;padding:0;border-radius:var(--radius-round);border:var(--border-width-hairline) solid var(--color-border-subtle);background:var(--color-bg-page);color:var(--color-icon-default);cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}.icon-btn svg{display:block;width:var(--icon-md);height:var(--icon-md)}.icon-btn--bare{border-color:transparent;background:transparent}.icon-btn--bare svg{width:var(--icon-lg);height:var(--icon-lg)}.icon-btn:active{border-color:var(--color-border-strong-ink);background:var(--color-bg-subtle)}.icon-btn--bare:active{border-color:transparent}.icon-btn:disabled,.icon-btn[aria-disabled=true]{background:var(--color-bg-disabled);color:var(--color-text-disabled);border-color:var(--color-icon-disabled);cursor:not-allowed}.icon-btn--bare:disabled,.icon-btn--bare[aria-disabled=true]{background:transparent;border-color:transparent}.chip{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--space-2);flex:none;min-height:var(--control-height-sm);margin:0;padding:0 var(--space-4);border-radius:var(--radius-pill);border:var(--border-width-hairline) solid var(--color-border-chip);background:var(--color-bg-page);color:var(--color-text-primary);font-family:var(--font-family);font-size:var(--type-small-size);font-weight:var(--font-weight-regular);line-height:var(--type-small-line);text-decoration:none;white-space:nowrap;cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}.chip:after{content:"";position:absolute;inset:calc((var(--control-height-sm) - var(--touch-target)) / 2) 0}.chip-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.chip-row--scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:var(--space-1);margin:calc(var(--space-1) * -1);scroll-padding-inline:var(--space-1)}.chip:active{border-color:var(--color-border-strong-ink)}.chip[aria-pressed=true],.chip[aria-checked=true],.chip[aria-selected=true],.chip[aria-current=page],.chip[aria-current=true]{background:var(--color-bg-inverse);border-color:var(--color-border-strong-ink);color:var(--color-text-on-inverse)}.chip__count{color:var(--color-text-secondary);font-variant-numeric:tabular-nums}.chip[aria-pressed=true] .chip__count,.chip[aria-checked=true] .chip__count,.chip[aria-selected=true] .chip__count,.chip[aria-current=page] .chip__count{color:inherit}.chip__swatch{flex:none;width:var(--space-3);height:var(--space-3);border-radius:var(--radius-round);box-shadow:inset 0 0 0 var(--border-width-hairline) var(--color-border-subtle)}.chip[aria-pressed=true] .chip__swatch,.chip[aria-checked=true] .chip__swatch,.chip[aria-selected=true] .chip__swatch,.chip[aria-current=page] .chip__swatch{box-shadow:0 0 0 var(--border-width-hairline) var(--color-text-on-inverse)}.chip:disabled,.chip[aria-disabled=true]{background:var(--color-bg-disabled);color:var(--color-text-disabled);border-color:var(--color-border-subtle);cursor:not-allowed}.chip:disabled .chip__count,.chip[aria-disabled=true] .chip__count{color:inherit}.chip--removable{cursor:default;padding-inline-end:var(--space-1)}.chip--removable:after{content:none}.chip__remove{position:relative;box-sizing:border-box;display:inline-grid;place-items:center;flex:none;width:var(--icon-sm);height:calc(var(--control-height-sm) - var(--space-2));margin:0;padding:0;border:0;border-radius:var(--radius-round);background:transparent;color:inherit;cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out)}.chip__remove:after{content:"";position:absolute;inset:calc((var(--control-height-sm) - var(--space-2) - var(--touch-target)) / 2) calc((var(--icon-sm) - var(--touch-target)) / 2)}.chip__remove svg{display:block;width:var(--icon-sm);height:var(--icon-sm)}.chip__remove:active{background:var(--color-bg-subtle)}@media(hover:hover)and (pointer:fine){.btn--primary:hover:not(:disabled):not([aria-disabled=true]):not(:active){background:var(--color-bg-brand-hover)}.btn--secondary:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-bg-inverse);color:var(--color-text-on-inverse);--btn-spin: var(--color-text-on-inverse)}.btn--tertiary:hover:not(:disabled):not([aria-disabled=true]){text-decoration-thickness:var(--border-width-selected)}.btn--on-dark:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-bg-page);color:var(--color-text-primary)}.icon-btn:hover:not(:disabled):not([aria-disabled=true]){border-color:var(--color-border-strong-ink)}.icon-btn--bare:hover:not(:disabled):not([aria-disabled=true]){border-color:transparent;background:var(--color-bg-subtle);color:var(--color-icon-default)}.chip:hover:not(:disabled):not([aria-disabled=true]):not(.chip--removable){border-color:var(--color-border-strong-ink)}.chip__remove:hover{background:var(--color-bg-subtle);color:var(--color-text-primary)}}@media(forced-colors:active){.chip[aria-pressed=true],.chip[aria-checked=true],.chip[aria-selected=true],.chip[aria-current=page],.chip[aria-current=true]{forced-color-adjust:none;background:SelectedItem;color:SelectedItemText;border-color:SelectedItem;border-width:var(--border-width-selected)}.chip[aria-pressed=true] .chip__swatch,.chip[aria-checked=true] .chip__swatch,.chip[aria-selected=true] .chip__swatch,.chip[aria-current=page] .chip__swatch{box-shadow:none}.option-card:has(:checked),.option-card[aria-checked=true]{border-width:var(--border-width-selected);border-style:solid}:is(.btn,.icon-btn,.chip,.chip__remove):is(:disabled,[aria-disabled=true]){color:GrayText;border-color:GrayText}.btn--tertiary:is(:disabled,[aria-disabled=true]),.icon-btn--bare:is(:disabled,[aria-disabled=true]){border-color:transparent}.btn:focus-visible,.icon-btn:focus-visible,.chip:focus-visible,.chip__remove:focus-visible{outline:var(--focus-ring-width) solid transparent;outline-offset:var(--focus-ring-width)}}@media(prefers-reduced-motion:reduce){.btn,.icon-btn,.chip,.chip__remove{transition:none}.btn[aria-busy=true] .btn__spinner{display:none;animation:none}.btn[aria-busy=true] .btn__busy{display:block}}}
/*# sourceMappingURL=/cdn/shop/t/67/assets/button.css.map */