@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: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]):active{opacity:var(--inactive);transform:translateY(var(--motion-press-y)) scale(var(--motion-press-scale))}.x-btn[disabled]{opacity:.3;--base-color:var(--lame);color:color-mix(in oklch, var(--lame), var(--fg) 70%);text-shadow:var(--text-shadow);cursor:not-allowed;text-decoration:line-through}.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]:disabled{opacity:.45;text-decoration:none}.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))}.x-tooltip{display:inline-flex}.x-tooltip-bubble{z-index:1000;align-items:center;gap:calc(var(--pad) * .45);max-width:min(18em, calc(100vw - calc(var(--pad) * 2)));padding:calc(var(--pad) * .4) calc(var(--pad) * .6);border:1px solid var(--lines-strong);border-radius:calc(var(--round) * .55);color:var(--fg);background:var(--surface-control);box-shadow:var(--shadow);letter-spacing:0;white-space:nowrap;pointer-events:none;animation:x-tooltip-in var(--motion-fast) var(--ease-sticky) both;font-size:.76rem;font-weight:700;line-height:1;display:inline-flex;position:fixed;overflow:hidden}.x-tooltip-bubble:before{content:"";background:var(--alpha);width:.18em;height:1em;box-shadow:0 0 .7em color-mix(in oklch, var(--alpha), transparent 35%);border-radius:999px;flex:none}.x-tooltip-bubble>span{text-overflow:ellipsis;min-width:0;overflow:hidden}.x-tooltip-bubble kbd{padding:calc(var(--pad) * .16) calc(var(--pad) * .38);border:var(--lines-thickness) solid color-mix(in oklch, var(--fg), transparent 62%);border-radius:calc(var(--round) * .4);color:var(--fg);background:var(--control-plate);font:inherit;flex:none;font-size:.82em;line-height:1}}@keyframes x-tooltip-in{0%{opacity:0;transform:translateY(.2em)}to{opacity:1;transform:translateY(0)}}