:host{display:inline-block}.btn[hidden]{display:none}.btn{border:calc(var(--spacing) * .25) solid color-mix(in srgb, var(--color-border) 72%, var(--color-primary));background:color-mix(in srgb, var(--color-popover) 78%, transparent);color:var(--color-foreground);box-shadow:inset 0 1px 0 color-mix(in srgb, var(--color-white) 12%, transparent);transition:color var(--ease-out) var(--default-transition-duration), border-color var(--ease-out) var(--default-transition-duration), background var(--ease-out) var(--default-transition-duration), transform var(--ease-out) var(--default-transition-duration), box-shadow var(--ease-out) var(--default-transition-duration);letter-spacing:0}:host([size=sm]) .btn{padding:calc(var(--spacing) * 1) calc(var(--spacing) * 3);font-size:var(--text-sm);min-height:30px}:host(:not([size])) .btn,:host([size=md]) .btn{padding:calc(var(--spacing) * 2) calc(var(--spacing) * 4);font-size:var(--text-base);min-height:38px}:host([size=lg]) .btn{padding:calc(var(--spacing) * 3) calc(var(--spacing) * 5);font-size:var(--text-xl);min-height:48px}:host(:not([variant])) .btn:hover,:host([variant=default]) .btn:hover{color:color-mix(in srgb, var(--color-primary) 50%, var(--color-foreground));border-color:var(--color-violet-400);background:color-mix(in srgb, color-mix(in srgb, var(--color-primary) 16%, transparent) 52%, var(--color-popover))}:host([variant=primary]) .btn{background:var(--color-primary);color:var(--color-primary-foreground);box-shadow:0 calc(var(--spacing) * 2) calc(var(--spacing) * 5) color-mix(in srgb, var(--color-primary) 22%, transparent);border-color:#0000}:host([variant=primary]) .btn:hover{background:color-mix(in srgb, var(--color-primary) 80%, var(--color-foreground));transform:translateY(calc(var(--spacing) * -.25));box-shadow:0 calc(var(--spacing) * 3) calc(var(--spacing) * 6) color-mix(in srgb, var(--color-primary) 28%, transparent);border-color:#0000}:host([variant=ghost]) .btn{border-color:#0000}:host([variant=ghost]) .btn:hover{background:color-mix(in srgb, color-mix(in srgb, var(--color-primary) 16%, transparent) 38%, transparent);border-color:#0000}:host([variant=accent]) .btn{background:var(--color-primary);color:var(--color-primary-foreground);border-color:#0000}:host([variant=accent]) .btn:hover{filter:brightness(1.05);transform:translateY(-1px)}:host([variant=accent]) .btn:active{box-shadow:var(--shadow-sm);transform:translateY(0)}:host(:state(disabled)) .btn{opacity:.5;cursor:not-allowed;pointer-events:none}