.btn{--btn-height:var(--size-control-height-md);--btn-px:var(--space-control-px-md);--btn-px-icon-side:var(--space-control-px-icon-md);--btn-gap:var(--space-control-gap-md);--btn-radius:var(--radius-control);--btn-font-size:var(--type-size-control-md);--btn-icon-size:var(--size-control-icon-md);block-size:var(--btn-height);min-inline-size:var(--btn-min-inline-size,auto);justify-content:center;align-items:center;gap:var(--btn-gap);padding:0 var(--btn-px);border-radius:var(--btn-radius);background:var(--btn-bg,none);color:var(--btn-color,inherit);font-family:inherit;font-size:var(--btn-font-size);white-space:nowrap;-webkit-user-select:none;user-select:none;cursor:pointer;transition-property:color,background-color,border-color,box-shadow,transform;transition-duration:var(--motion-duration-control);transition-timing-function:var(--motion-ease-control);background-clip:padding-box;border:1px solid #0000;outline:none;flex-shrink:0;font-weight:500;line-height:1;text-decoration:none;display:inline-flex}.btn:active{transform:scale(.95)}.btn:disabled{pointer-events:none;cursor:not-allowed;opacity:.5}.btn svg{pointer-events:none;inline-size:var(--btn-icon-size);block-size:var(--btn-icon-size);flex-shrink:0}.btn:has([data-icon=inline-start]){padding-inline-start:var(--btn-px-icon-side)}.btn:has([data-icon=inline-end]){padding-inline-end:var(--btn-px-icon-side)}.btn:focus-visible,.btn[data-focus-ring]:focus{border-color:var(--color-ring);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-ring) 50%, transparent)}.btn[aria-invalid=true]{border-color:var(--color-danger-border);box-shadow:0 0 0 3px var(--color-danger-ring)}.btn[data-variant=primary]{background-color:var(--color-primary);color:var(--color-on-primary)}.btn[data-variant=primary]:focus-visible,.btn[data-variant=primary][data-focus-ring]:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent)}.btn[data-variant=positive]{background-color:var(--color-control-positive);color:var(--color-on-primary)}.btn[data-variant=positive]:hover{background-color:var(--color-control-positive-hover)}.btn[data-variant=positive]:focus-visible,.btn[data-variant=positive][data-focus-ring]:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent)}.btn[data-variant=outline],.btn[data-variant=outline-bordered]{background-color:var(--color-control-veil);box-shadow:var(--elevation-control-rest)}.btn[data-variant=outline]:hover,.btn[data-variant=outline-bordered]:hover{border-color:var(--color-control-outline-hover);background-color:var(--color-control-veil-hover);color:var(--color-text)}.btn[data-variant=outline][aria-expanded=true],.btn[data-variant=outline-bordered][aria-expanded=true]{border-color:color-mix(in srgb, var(--color-primary) 22%, transparent);background-color:color-mix(in srgb, var(--color-muted) 40%, transparent)}.btn[data-variant=outline]:focus-visible,.btn[data-variant=outline][data-focus-ring]:focus,.btn[data-variant=outline-bordered]:focus-visible,.btn[data-variant=outline-bordered][data-focus-ring]:focus{box-shadow:var(--elevation-control-rest), 0 0 0 1px color-mix(in srgb, var(--color-primary) 25%, transparent)}.btn[data-variant=outline-bordered]{border-color:color-mix(in srgb, var(--color-border) 80%, transparent)}.btn[data-variant=outline-bordered]:hover{border-color:color-mix(in srgb, var(--color-primary) 35%, transparent);background-color:color-mix(in srgb, var(--color-primary) 5%, transparent)}.btn[data-variant=outline-accent]{border-color:color-mix(in srgb, var(--color-primary) 20%, transparent);background-color:color-mix(in srgb, var(--color-primary) 5%, transparent);box-shadow:var(--elevation-control-rest);color:var(--color-primary)}.btn[data-variant=outline-accent]:hover{border-color:color-mix(in srgb, var(--color-primary) 30%, transparent);background-color:color-mix(in srgb, var(--color-primary) 10%, transparent)}.btn[data-variant=outline-accent]:focus-visible,.btn[data-variant=outline-accent][data-focus-ring]:focus{box-shadow:var(--elevation-control-rest), 0 0 0 1px color-mix(in srgb, var(--color-primary) 25%, transparent)}.btn[data-variant=accent-soft]{border-color:color-mix(in srgb, var(--color-primary) 40%, transparent);background-color:color-mix(in srgb, var(--color-primary) 20%, transparent);color:var(--color-text)}.btn[data-variant=accent-soft]:hover{background-color:color-mix(in srgb, var(--color-primary) 30%, transparent)}.btn[data-variant=secondary]{background-color:var(--color-secondary);color:var(--color-on-secondary)}.btn[data-variant=secondary]:hover{background-color:color-mix(in srgb, var(--color-secondary) 80%, transparent)}.btn[data-variant=secondary][aria-expanded=true]{background-color:var(--color-secondary);color:var(--color-on-secondary)}.btn[data-variant=ghost]:hover{background-color:var(--color-ghost-hover);color:var(--btn-color,var(--color-text))}.btn[data-variant=ghost][aria-expanded=true]{background-color:var(--color-muted);color:var(--color-text)}.btn[data-variant=ghost-danger]{color:var(--color-danger)}.btn[data-variant=ghost-danger]:hover{background-color:var(--color-danger-veil);color:var(--color-danger)}.btn[data-variant=ghost-accent]{color:var(--color-text-muted)}.btn[data-variant=ghost-accent]:hover{background-color:color-mix(in srgb, var(--color-primary) 10%, transparent);color:var(--color-primary)}.btn[data-variant=ghost-chrome]:hover{border-color:var(--color-chrome-hover-border);background-color:var(--color-chrome-hover-bg);color:var(--btn-color,var(--color-text));box-shadow:var(--elevation-chrome-hover)}.btn[data-variant=ghost-chrome][aria-expanded=true]{background-color:var(--color-muted);color:var(--color-text)}.btn[data-variant=discreet]{border-radius:var(--radius-field);border-color:var(--color-vivid-btn-border);background-color:var(--color-vivid-btn-bg);color:var(--color-text)}.btn[data-variant=discreet]:hover{border-color:var(--color-vivid-btn-border-hover);background-color:var(--color-vivid-btn-bg-hover)}.btn[data-variant=discreet-danger]{border-radius:var(--radius-field);border-color:var(--color-vivid-btn-danger-border);background-color:var(--color-vivid-btn-danger-bg);color:var(--color-danger)}.btn[data-variant=danger]{background-color:var(--color-danger);color:var(--color-on-danger)}.btn[data-variant=danger]:hover{background-color:color-mix(in srgb, var(--color-danger) 90%, transparent)}.btn[data-variant=danger]:focus-visible,.btn[data-variant=danger][data-focus-ring]:focus{border-color:color-mix(in srgb, var(--color-danger) 40%, transparent);box-shadow:0 0 0 3px var(--color-danger-ring)}.btn[data-variant=link]{color:var(--color-primary);text-underline-offset:var(--space-underline-offset)}.btn[data-variant=link]:hover{text-decoration:underline}.btn[data-size=xs]{--btn-height:var(--size-control-height-xs);--btn-px:var(--space-control-px-xs);--btn-px-icon-side:var(--space-control-px-icon-compact);--btn-gap:var(--space-control-gap-sm);--btn-radius:var(--radius-control-compact);--btn-font-size:var(--type-size-control-xs);--btn-icon-size:var(--size-control-icon-xs)}.btn[data-size=sm]{--btn-height:var(--size-control-height-sm);--btn-px-icon-side:var(--space-control-px-icon-compact);--btn-gap:var(--space-control-gap-sm);--btn-radius:var(--radius-control-compact);--btn-font-size:var(--type-size-control-sm);--btn-icon-size:var(--size-control-icon-sm)}.btn[data-size=lg]{--btn-height:var(--size-control-height-lg);--btn-px-icon-side:var(--space-control-px-icon-lg)}.btn[data-size=icon],.btn[data-size=icon-xs],.btn[data-size=icon-sm],.btn[data-size=icon-lg]{--btn-px:0;inline-size:var(--btn-height)}.btn[data-size=icon-xs]{--btn-height:var(--size-control-height-xs);--btn-radius:var(--radius-control-compact);--btn-icon-size:var(--size-control-icon-xs)}.btn[data-size=icon-sm]{--btn-height:var(--size-control-height-sm);--btn-radius:var(--radius-control-compact)}.btn[data-size=icon-lg]{--btn-height:var(--size-control-height-lg)}.btn[data-shape=circle]{--btn-radius:var(--radius-pill)}.btn[data-glow]{box-shadow:0 4px 6px -1px color-mix(in srgb, var(--color-primary) 25%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--color-primary) 25%, transparent);transition:transform var(--motion-duration-check) var(--motion-ease-standard), box-shadow var(--motion-duration-check) var(--motion-ease-standard)}.btn[data-glow]:hover{box-shadow:0 10px 15px -3px color-mix(in srgb, var(--color-primary) 30%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--color-primary) 30%, transparent)}
