@layer components{.pocket-button{border:2px solid var(--p-ink);border-radius:var(--r-button);background:var(--p-sheet);min-height:46px;color:var(--p-ink);box-shadow:var(--shadow-button);text-align:center;cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font:700 15px/1.2 Bricolage Grotesque,sans-serif;text-decoration:none;transition:transform .12s ease-out,box-shadow .12s ease-out;display:inline-flex}.pocket-button>svg{flex-shrink:0}.pocket-button:hover{text-decoration:none}.pocket-button:hover:not(:disabled,.pocket-button-xs,.pocket-button-square,.pocket-button-round,.pocket-button-line,.pocket-button-quiet,.pocket-button-stage){transform:translateY(-1px)}.pocket-button:active:not(:disabled){box-shadow:var(--shadow-button-pressed);transform:translateY(3px)}.pocket-button:disabled{cursor:not-allowed}.pocket-button:disabled:not(.pocket-button-xs,.pocket-button-square,.pocket-button-round,.pocket-button-line,.pocket-button-quiet,.pocket-button-stage){border-color:var(--pf-rim);background:var(--pf-display);color:var(--pf-muted);box-shadow:0 2px 0 var(--pf-rim)}.pocket-button:disabled:is(.pocket-button-xs,.pocket-button-square,.pocket-button-round,.pocket-button-line,.pocket-button-quiet,.pocket-button-stage){opacity:.5}.pocket-button-cobalt{background:var(--p-cobalt);color:#fff}.pocket-button-tomato{background:var(--p-tomato)}.pocket-button-yellow{background:var(--p-yellow)}.pocket-button-sm{min-height:38px;padding:7px 14px;font-size:13px}.pocket-button-xs{min-height:32px;box-shadow:0 3px 0 var(--p-ink);border-radius:10px;gap:6px;padding:5px 11px;font-size:12.5px;font-weight:750;line-height:1.1}.pocket-button-shell:is(.pocket-button-xs,.pocket-button-round){background:var(--p-shell)}.pocket-button-xs:active:not(:disabled){box-shadow:0 1px 0 var(--p-ink);transform:translateY(2px)}.pocket-button:is(.pocket-button-line,.pocket-button-quiet,.pocket-button-stage){box-shadow:none;white-space:nowrap;border-width:1.5px;flex:none}.pocket-button:is(.pocket-button-line,.pocket-button-quiet,.pocket-button-stage):active:not(:disabled){box-shadow:none;transform:none}.pocket-button-xs:is(.pocket-button-line,.pocket-button-quiet,.pocket-button-stage){padding:0 10px;font-weight:700;line-height:1}.pocket-button-line{border-color:var(--ps-line);background:var(--p-sheet)}.pocket-button-quiet{background:0 0;border-color:#0000}.pocket-button-stage{border-color:color-mix(in srgb, var(--p-shell) 40%, var(--p-cobalt));color:var(--p-shell);background:0 0}.pocket-button:is(.pocket-button-line,.pocket-button-quiet,.pocket-button-stage):is([aria-pressed=true],[aria-expanded=true]){border-color:var(--p-ink);background:var(--p-yellow);color:var(--p-ink)}.pocket-button-line:not(:disabled):hover{border-color:var(--p-ink)}.pocket-button:is(.pocket-button-line.pocket-button-square,.pocket-button-quiet):not(:disabled,[aria-pressed=true],[aria-expanded=true]):hover{border-color:var(--p-ink);background:var(--p-shell)}.pocket-button-stage:not(:disabled):hover{border-color:var(--p-shell)}.pocket-button.pocket-button-square,.pocket-button.pocket-button-round{flex:none;width:46px;height:46px;min-height:0;padding:0}.pocket-button-square.pocket-button-sm{border-radius:10px;width:34px;height:34px}.pocket-button-square.pocket-button-xs{border-radius:8px;width:28px;height:28px}.pocket-button.pocket-button-round{width:48px;height:48px;box-shadow:0 3px 0 var(--p-ink);border-radius:50%}.pocket-button-round:is(.pocket-button-sm,.pocket-button-xs){box-shadow:0 2px 0 var(--p-ink)}.pocket-button-round.pocket-button-sm{width:36px;height:36px}.pocket-button-round.pocket-button-xs{width:28px;height:28px}.pocket-button-round:active:not(:disabled){box-shadow:none;transform:translateY(2px)}@media (width<=899.98px),(pointer:coarse){.pocket-button-sm,.pocket-button-xs,.pocket-button:is(.pocket-button-square,.pocket-button-round){min-width:44px;min-height:44px}}@media (prefers-reduced-motion:reduce){.pocket-button{transition:none}.pocket-button:hover:not(:disabled){transform:none}}}
