@layer components{.x-btn{--base-color:var(--neutral);gap:calc(var(--pad) / 2);padding:calc(var(--pad) * 1.5);font:inherit;color:var(--fg);background:var(--base-color);text-shadow:var(--text-shadow);box-shadow:var(--box-shadow);transition:color var(--motion-fast) ease, background var(--motion-fast) ease, box-shadow var(--motion-fast) ease, opacity var(--motion-fast) ease, transform var(--motion-fast) var(--ease-sticky);border:none;border-radius:100em;justify-content:center;align-items:center;display:inline-flex;transform:translateY(0)scale(1)}.x-btn[data-vibe=neutral]{--base-color:var(--neutral)}.x-btn[data-vibe=happy]{--base-color:var(--happy);color:var(--bg);text-shadow:none}.x-btn[data-vibe=angry]{--base-color:var(--angry)}.x-btn[data-vibe=special]{--base-color:var(--special)}.x-btn[data-vibe=lame]{--base-color:var(--lame);color:color-mix(in oklch, var(--lame), var(--fg) 70%)}.x-btn[data-look=tint][data-shape=solid]{border:1px solid color-mix(in oklch, var(--base-color), transparent 58%);color:color-mix(in oklch, var(--fg), var(--base-color) 12%);background:color-mix(in oklch, var(--base-color), transparent 88%);text-shadow:none;box-shadow:inset 0 1px 0 #fff1, 0 10px 22px color-mix(in oklch, var(--base-color), transparent 88%)}.x-btn:not([disabled]){cursor:pointer}.x-btn[data-shape=solid]:not([disabled]){opacity:var(--inactive)}.x-btn[data-shape=solid]:not([disabled]):is(:hover,:focus-visible){opacity:1;transform:translateY(var(--motion-hover-y)) scale(1.01)}.x-btn[data-shape=solid]:not([disabled])[data-look=tint]:is(:hover,:focus-visible){border-color:color-mix(in oklch, var(--base-color), transparent 34%);color:var(--fg);background:color-mix(in oklch, var(--base-color), transparent 82%)}.x-btn[data-shape=solid]:not([disabled]):active{opacity:var(--inactive);transform:translateY(var(--motion-press-y)) scale(var(--motion-press-scale))}.x-btn[disabled]{opacity:.45;--base-color:var(--lame);color:color-mix(in oklch, var(--lame), var(--fg) 70%);text-shadow:none;box-shadow:none;cursor:not-allowed}.x-btn[data-shape=solid] svg,.x-btn[data-shape=solid] img{height:1.3em;display:block}.x-btn[data-shape=icon]{border-radius:calc(var(--round) * .65);width:2em;height:2em;color:color-mix(in oklch, var(--fg), transparent 25%);text-shadow:none;box-shadow:none;background:0 0;flex:none;place-items:center;padding:0;display:grid}.x-btn[data-shape=icon][data-surface=plate]{background:var(--control-plate)}.x-btn[data-shape=icon] svg,.x-btn[data-shape=icon] img{width:var(--btn-icon-size,1.15em);height:var(--btn-icon-size,1.15em);display:block}.x-btn[data-shape=icon]:not([disabled]):is(:hover,:focus-visible),.x-btn[data-shape=icon][data-active],.x-btn[data-shape=icon][aria-expanded=true]{color:var(--fg);background:color-mix(in oklch, var(--base-color), transparent 82%);outline:none}.x-btn[data-shape=icon]:not([disabled]):is(:hover,:focus-visible){transform:translateY(var(--motion-hover-y)) scale(1.03)}.x-btn[data-shape=icon]:not([disabled]):active{transform:translateY(var(--motion-press-y)) scale(var(--motion-press-scale))}}