.tactile-button{--tactile-height:48px;--tactile-depth:4px;--tactile-padding-inline:16px;--tactile-face:var(--paper);--tactile-side:#8e8b82;--tactile-edge:var(--paper);--tactile-text:var(--ink);min-height:var(--tactile-height);color:var(--tactile-text);cursor:pointer;isolation:isolate;transform:translateY(calc(var(--tactile-depth) * -.5));background:0 0;border:0;border-radius:2px;place-items:stretch stretch;padding:0;transition:filter .14s,transform 90ms;display:inline-grid;position:relative}.tactile-button:before{content:"";z-index:-1;border:1px solid var(--tactile-edge);border-radius:inherit;background:var(--tactile-side);transform:translateY(var(--tactile-depth));position:absolute;inset:0}.tactile-button__face{min-height:var(--tactile-height);padding-inline:var(--tactile-padding-inline);border:1px solid var(--tactile-edge);border-radius:inherit;background:linear-gradient(180deg, #ffffffd1, transparent 34%), var(--tactile-face);color:inherit;font:inherit;font-size:var(--t-200);font-weight:var(--w-bold);white-space:nowrap;justify-content:center;align-items:center;gap:10px;line-height:1;transition:background .14s,box-shadow 90ms,transform 90ms;display:inline-flex;box-shadow:inset 0 1px #fffffff2,inset 0 -1px #0000001f,0 8px 16px #00000038}.tactile-button:hover{filter:brightness(1.04);transform:translateY(calc(var(--tactile-depth) * -.75))}.tactile-button:active{transform:translateY(calc(var(--tactile-depth) * .5))}.tactile-button:active .tactile-button__face{transform:translateY(calc(var(--tactile-depth) * .5));box-shadow:inset 0 2px 3px #00000024,0 2px 5px #00000029}.tactile-button:disabled{cursor:not-allowed;filter:grayscale();opacity:.48}@media (prefers-reduced-motion:reduce){.tactile-button,.tactile-button__face{transition:none}.tactile-button:hover{transform:translateY(calc(var(--tactile-depth) * -.5))}}