| 1 | :where(html){--gray-0-hsl:210 17% 98%;--gray-1-hsl:210 17% 95%;--gray-2-hsl:210 16% 93%;--gray-3-hsl:210 14% 89%;--gray-4-hsl:210 14% 83%;--gray-5-hsl:210 11% 71%;--gray-6-hsl:210 7% 56%;--gray-7-hsl:210 9% 31%;--gray-8-hsl:210 10% 23%;--gray-9-hsl:210 11% 15%;--gray-10-hsl:214 14% 10%;--gray-11-hsl:216 16% 6%;--gray-12-hsl:210 40% 2%}:where(.btn,button,input:is([type=button],[type=submit],[type=reset])),:where(input[type=file])::-webkit-file-upload-button,:where(input[type=file])::file-selector-button{--_accent:initial;--_text:initial;--_size:initial;--_bg:var(--surface-3);--_border:var(--surface-3);--_highlight-size:0;--_highlight:hsl(var(--gray-12-hsl)/25%);--_ink-shadow:0 1px 0 var(--surface-1);--_icon-size:var(--size-relative-7);--_icon-color:var(--_accent,var(--link));-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;align-items:center;background:var(--_bg);border:var(--border-size-2) solid var(--_border);border-radius:var(--radius-2);box-shadow:var(--shadow-2),0 1px var(--surface-3),0 0 0 var(--_highlight-size) var(--_highlight);color:var(--_text);display:inline-flex;font-size:var(--_size);font-weight:var(--font-weight-7);gap:var(--size-2);justify-content:center;padding-block:.75ch;padding-inline:var(--size-relative-6);text-align:center;text-shadow:var(--_ink-shadow);transition:border-color .5s var(--ease-3) 3s;user-select:none}@media (prefers-reduced-motion:no-preference){:where(.btn,button,input:is([type=button],[type=submit],[type=reset])),:where(input[type=file])::-webkit-file-upload-button,:where(input[type=file])::file-selector-button{transition:border-color .5s var(--ease-3) 3s,box-shadow 145ms var(--ease-4),outline-offset 145ms var(--ease-4)}}:where(.btn,button,input:is([type=button],[type=submit],[type=reset]))[disabled]{--_bg:none;--_text:var(--gray-5);box-shadow:var(--shadow-1);cursor:not-allowed}:where(.btn,button,input:is([type=button],[type=submit],[type=reset])):where(:not(:active):hover){--_highlight-size:var(--size-2);transition-delay:0s;transition-duration:.25s}:where(.btn,button,input:is([type=button],[type=submit],[type=reset]))>:where(svg){block-size:var(--_icon-size);filter:drop-shadow(var(--_ink-shadow));flex-shrink:0;inline-size:var(--_icon-size)}:where(.btn,button,input:is([type=button],[type=submit],[type=reset]))>:where(svg>*){stroke:var(--_icon-color);stroke-width:var(--border-size-2)}:where([type=submit],form button:not([type],[disabled])){--_text:var(--_accent,var(--link))}:where([type=reset]){--_text:var(--red-2);--_border:var(--surface-3)}:where([type=reset]):focus-visible{outline-color:var(--red-6)}:where([type=submit],[type=reset],form button:not([type])):is(:hover,:focus-visible):not([disabled]){--_border:currentColor}:where(input[type=file]){align-self:flex-start;border:var(--border-size-1) solid var(--surface-2);border-radius:var(--radius-2);box-shadow:var(--inner-shadow-4);color:var(--text-2);cursor:auto;max-inline-size:100%;padding:0}:where(input[type=file])::-webkit-file-upload-button,:where(input[type=file])::file-selector-button{cursor:pointer;margin-inline-end:var(--size-relative-6)}:where([disabled]),:where([type=reset]),:where([type=submit]),:where(form button:not([type=button])){--_bg:var(--surface-1)} |