@layer components{button,[is-~=button]{--button-primary: var(--foreground0);--button-secondary: var(--background0);color:var(--button-secondary);background-color:var(--button-primary);font-family:var(--font-family);font-size:var(--font-size);line-height:var(--line-height);display:inline-flex;align-items:center;justify-content:center;border:none;padding:0 2ch;height:3lh;outline:none}button[box-],[is-~=button][box-]{color:var(--button-primary);background-color:transparent;--box-border-color: var(--button-primary)}button:focus,[is-~=button]:focus{font-weight:700;text-decoration:underline}button:active,[is-~=button]:active{color:var(--button-primary);background-color:var(--button-secondary)}button:active[box-],[is-~=button]:active[box-]{--box-border-color: var(--button-secondary);background-color:transparent}button:disabled,[is-~=button]:disabled{text-decoration:line-through;pointer-events:none}button[size-=small],[is-~=button][size-=small]{padding:0 1ch;height:1lh}button[variant-=foreground0],button:not([variant]),[is-~=button][variant-=foreground0],[is-~=button]:not([variant]){--button-primary: var(--foreground0);--button-secondary: var(--background0)}button[variant-=foreground1],[is-~=button][variant-=foreground1]{--button-primary: var(--foreground1);--button-secondary: var(--background0)}button[variant-=foreground2],[is-~=button][variant-=foreground2]{--button-primary: var(--foreground2);--button-secondary: var(--background0)}button[variant-=background0],[is-~=button][variant-=background0]{--button-primary: var(--background0);--button-secondary: var(--foreground0)}button[variant-=background1],[is-~=button][variant-=background1]{--button-primary: var(--background1);--button-secondary: var(--foreground0)}button[variant-=background2],[is-~=button][variant-=background2]{--button-primary: var(--background2);--button-secondary: var(--foreground0)}button[variant-=background3],[is-~=button][variant-=background3]{--button-primary: var(--background3);--button-secondary: var(--foreground0)}}