trace-css 0.1.0 → 0.1.2

package/dist/tracecss.classless.conditional.min.css

@@ -1 +0,0 @@
-@scope(.tracecss){@layer trace.foundation{:where(:scope){--trace-bg-light:oklch(96.2441% .00418752 236.497);--trace-bg-dark:oklch(19.7902% .0189863 235.357);--trace-neutral:oklch(50% 0 0);--trace-neutral-lighter:oklch(from var(--trace-neutral) calc(l + .5) c h);--trace-neutral-light:oklch(from var(--trace-neutral) calc(l + .25) c h);--trace-neutral-dark:oklch(from var(--trace-neutral) calc(l - .25) c h);--trace-neutral-darker:oklch(from var(--trace-neutral) calc(l - .5) c h);--trace-text-light:oklch(9.44872% .0654731 264.052);--trace-text-dark:oklch(92.494% 0 0);--trace-primary:oklch(37.662% .0682014 228.503);--trace-secondary:oklch(87.9592% .170365 81.3235);--trace-primary-lighter:oklch(from var(--trace-primary) calc(l + (1 - l) * .6) c h);--trace-primary-light:oklch(from var(--trace-primary) calc(l + (1 - l) * .3) c h);--trace-primary-dark:oklch(from var(--trace-primary) calc(l * .7) c h);--trace-primary-darker:oklch(from var(--trace-primary) calc(l * .4) c h);--trace-secondary-lighter:oklch(from var(--trace-secondary) calc(l + (1 - l) * .6) c h);--trace-secondary-light:oklch(from var(--trace-secondary) calc(l + (1 - l) * .3) c h);--trace-secondary-dark:oklch(from var(--trace-secondary) calc(l * .7) c h);--trace-secondary-darker:oklch(from var(--trace-secondary) calc(l * .4) c h);--trace-danger:oklch(52.3358% .198564 31.9584);--trace-success:oklch(69.13% .14353 158.708);--trace-font-family-emoji:"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";--trace-font-family-sans:system-ui, sans-serif, var(--trace-font-family-emoji);--trace-font-family-mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace, var(--trace-font-family-emoji);--trace-font-body:var(--trace-font-family-sans);--trace-font-heading:var(--trace-font-body);--trace-font-code:var(--trace-font-family-mono);--trace-radius-none:0;--trace-radius-sm:4px;--trace-radius-full:50%;--trace-radius-control:var(--trace-radius-sm);--trace-control-padding-block:.625rem;--trace-control-padding-inline:1rem;--trace-shadow-color:light-dark(oklch(from var(--trace-neutral-darker) l c h / 25%),oklch(from var(--trace-neutral-lighter) l c h / 25%));--trace-shadow:5px 5px 0 0 var(--trace-shadow-color);--trace-bg:light-dark(var(--trace-bg-light),var(--trace-bg-dark));--trace-text:light-dark(var(--trace-text-light),var(--trace-text-dark));--trace-control-bg:light-dark(var(--trace-neutral-lighter),var(--trace-bg-dark))}:where(*){box-sizing:border-box}:where(:scope){font-family:var(--trace-font-body);background-color:var(--trace-bg);color:var(--trace-text);margin:0}:where(button,input,select,textarea){font:inherit}:where(:scope){color-scheme:light dark}:where([data-mode=light],[data-mode=dark]){background-color:var(--trace-bg);color:var(--trace-text)}:where([data-mode=light]){color-scheme:light}:where([data-mode=dark]){color-scheme:dark}}@layer trace.elements{:where(:scope){--trace-font-size-h1:3rem;--trace-font-size-h2:2.5rem;--trace-font-size-h3:2rem;--trace-font-size-h4:1.5rem;--trace-font-size-h5:1.25rem;--trace-font-size-h6:1rem;--trace-typography-line-height:1.6;--trace-heading-line-height:1.25;--trace-heading-margin-block-end:1rem;--trace-paragraph-margin-block-end:1rem;--trace-divider-margin-block:2rem;--trace-blockquote-margin-block:1.5rem;--trace-blockquote-padding-block:.75rem;--trace-blockquote-padding-inline:1.25rem;--trace-typography-border:light-dark(var(--trace-neutral-light),var(--trace-neutral-dark));--trace-mark-bg:var(--trace-secondary-lighter);--trace-mark-text:var(--trace-neutral-darker);--trace-kbd-bg:light-dark(var(--trace-neutral-dark),var(--trace-neutral-lighter));--trace-kbd-text:light-dark(var(--trace-text-dark),var(--trace-text-light));--trace-kbd-border:light-dark(var(--trace-neutral-darker),var(--trace-neutral-light));--trace-kbd-shadow:1px 1px 0 0 oklch(from var(--trace-neutral-darker) l c h / 25%);--trace-blockquote-border:light-dark(var(--trace-primary),var(--trace-secondary));--trace-blockquote-bg:light-dark(color-mix(in oklch, var(--trace-bg-light), var(--trace-neutral-darker) 5%),color-mix(in oklch, var(--trace-bg-dark), var(--trace-neutral-lighter) 8%))}@media (width<48rem){:where(:scope){--trace-font-size-h1:2rem;--trace-font-size-h2:1.75rem;--trace-font-size-h3:1.5rem;--trace-font-size-h4:1.25rem;--trace-font-size-h5:1.125rem}}:where(:scope){line-height:var(--trace-typography-line-height);overflow-wrap:anywhere}:where(h1,h2,h3,h4,h5,h6){margin-block:0 var(--trace-heading-margin-block-end);font-family:var(--trace-font-heading);font-weight:700;line-height:var(--trace-heading-line-height);overflow-wrap:anywhere}:where(h1){font-size:var(--trace-font-size-h1)}:where(h2){font-size:var(--trace-font-size-h2)}:where(h3){font-size:var(--trace-font-size-h3)}:where(h4){font-size:var(--trace-font-size-h4)}:where(h5){font-size:var(--trace-font-size-h5)}:where(h6){font-size:var(--trace-font-size-h6)}:where(code,pre,kbd,samp){font-family:var(--trace-font-code)}:where(pre){min-inline-size:0;max-inline-size:100%;overflow-x:auto}:where(p){margin-block:0 var(--trace-paragraph-margin-block-end);line-height:var(--trace-typography-line-height)}:where(ul,ol,dl){line-height:var(--trace-typography-line-height)}:where(abbr[title]){text-underline-offset:.2em;cursor:help;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(strong,b){font-weight:700}:where(i,em,cite){font-style:italic}:where(del,s){text-decoration:line-through}:where(ins,u){text-underline-offset:.15em;text-decoration:underline}:where(kbd){border:1px solid var(--trace-kbd-border);border-radius:var(--trace-radius-sm);background-color:var(--trace-kbd-bg);color:var(--trace-kbd-text);box-shadow:var(--trace-kbd-shadow);vertical-align:baseline;border-bottom-width:2px;padding:.125em .375em;font-size:.875em;line-height:1.25;display:inline-block}:where(mark){border-radius:var(--trace-radius-sm);background-color:var(--trace-mark-bg);color:var(--trace-mark-text);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.125em .25em}:where(small){font-size:.875em}:where(sub,sup){vertical-align:baseline;font-size:.75em;line-height:0;position:relative}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(hr){height:0;margin-block:var(--trace-divider-margin-block);border:0;border-block-start:2px solid var(--trace-typography-border)}:where(blockquote){margin-block:var(--trace-blockquote-margin-block);padding-block:var(--trace-blockquote-padding-block);padding-inline:var(--trace-blockquote-padding-inline);border-inline-start:.25rem solid var(--trace-blockquote-border);background-color:var(--trace-blockquote-bg);line-height:var(--trace-typography-line-height);margin-inline:0}:where(blockquote>:last-child){margin-block-end:0}:where(:scope){--trace-link-color:light-dark(var(--trace-primary),var(--trace-secondary));--trace-link-hover:light-dark(var(--trace-primary-light),var(--trace-secondary-light));--trace-link-active:light-dark(var(--trace-primary-dark),var(--trace-secondary-dark));--trace-link-visited:var(--trace-link-color);--trace-link-focus:var(--trace-link-color);--trace-link-underline-offset:.2em;--trace-link-underline-thickness:.08em}:where(a[href]){color:var(--trace-link-color);text-decoration-line:underline;text-decoration-color:currentColor;text-decoration-thickness:var(--trace-link-underline-thickness);text-underline-offset:var(--trace-link-underline-offset);-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto;border-radius:var(--trace-radius-sm);transition:color .15s ease-in-out;&:visited{color:var(--trace-link-visited)}&:hover{color:var(--trace-link-hover);text-decoration-thickness:calc(var(--trace-link-underline-thickness) * 2)}&:active{color:var(--trace-link-active)}&:focus-visible{outline:2px solid var(--trace-link-focus);outline-offset:3px}}@media (prefers-reduced-motion:reduce){:where(a[href]){transition:none}}@media (forced-colors:active){:where(a[href]){color:linktext;&:visited{color:visitedtext}&:active{color:activetext}&:focus-visible{outline-color:highlight}}}:where(:scope){--trace-table-text:var(--trace-text);--trace-table-accent:light-dark(var(--trace-primary),var(--trace-secondary));--trace-table-border:color-mix(in oklch, var(--trace-table-accent), transparent 78%);--trace-table-header-bg:transparent;--trace-table-header-text:var(--trace-table-accent);--trace-table-row-heading:var(--trace-table-text);--trace-table-footer-bg:transparent;--trace-table-stripe-bg:color-mix(in oklch, var(--trace-table-accent), transparent 97%);--trace-table-hover-bg:light-dark(color-mix(in oklch, var(--trace-primary), transparent 93%),color-mix(in oklch, var(--trace-secondary), transparent 90%));--trace-table-radius:0;--trace-table-padding-block:.75rem;--trace-table-padding-inline:.75rem;--trace-table-font-size:1rem;--trace-table-line-height:1.5}:where(table){border-collapse:separate;border-spacing:0;inline-size:100%;color:var(--trace-table-text);font-size:var(--trace-table-font-size);line-height:var(--trace-table-line-height);text-align:start}:where(table>caption){caption-side:top;text-align:start;padding-block:0 1rem;padding-inline:0;font-size:1em;font-weight:600;line-height:1.4}:where(table>:is(thead,tbody,tfoot)>tr>:is(th,td),table>tr>:is(th,td)){padding:var(--trace-table-padding-block) var(--trace-table-padding-inline);border-block-end:1px solid var(--trace-table-border);vertical-align:top;text-align:inherit}:where(table>:is(thead,tbody,tfoot)>tr>th,table>tr>th){font-weight:600}:where(table>thead>tr>:is(th,td)){background-color:var(--trace-table-header-bg);color:var(--trace-table-header-text);border-block-end:2px solid var(--trace-table-accent);vertical-align:middle;letter-spacing:normal;font-size:.875em}:where(table>tbody>tr>th){color:var(--trace-table-row-heading)}:where(table>thead>tr:first-child>:first-child){border-start-start-radius:var(--trace-table-radius)}:where(table>thead>tr:first-child>:last-child){border-start-end-radius:var(--trace-table-radius)}:where(table:has(>tfoot)>tbody:last-of-type>tr:last-child>:is(th,td)){border-block-end:0}:where(table>tfoot>tr>:is(th,td)){background-color:var(--trace-table-footer-bg);color:var(--trace-table-accent);border-block-start:2px solid var(--trace-table-accent);border-block-end:0;font-weight:600}:where(table>tfoot>tr:last-child>:first-child){border-end-start-radius:var(--trace-table-radius)}:where(table>tfoot>tr:last-child>:last-child){border-end-end-radius:var(--trace-table-radius)}@keyframes trace-square-rotate{0%{transform:rotateX(0)rotateY(0)}25%{transform:rotateX(180deg)rotateY(0)}50%{transform:rotateX(180deg)rotateY(180deg)}75%{transform:rotateX(0)rotateY(180deg)}to{transform:rotateX(0)rotateY(0)}}:where(div,section,article,main,aside,nav,header,footer,form,fieldset,figure):where([aria-busy=true]){isolation:isolate;cursor:wait;position:relative;&:before{content:"";z-index:1;border-radius:inherit;background:var(--trace-loader-overlay,color-mix(in srgb, var(--trace-bg), transparent 30%));position:absolute;inset:0}&:after{content:"";z-index:2;inline-size:var(--trace-loader-size,2rem);block-size:var(--trace-loader-size,2rem);border-radius:var(--trace-loader-radius,2px);background-color:var(--trace-loader-color,light-dark(var(--trace-primary),var(--trace-secondary)));animation:trace-square-rotate var(--trace-loader-duration,3s) ease-in-out infinite;pointer-events:none;margin:auto;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){&:after{animation:none}}}:where(:scope){--trace-button-color:light-dark(var(--trace-primary-darker),var(--trace-secondary));--trace-button-contrast:light-dark(var(--trace-secondary),var(--trace-primary-dark));--trace-button-outline-color:var(--trace-button-color);--trace-button-radius:var(--trace-radius-control);--trace-button-font-size:1rem;--trace-button-line-height:1.5rem;--trace-button-padding-block:.375rem;--trace-button-padding-inline:.75rem;--trace-button-box-shadow:var(--trace-shadow);--trace-button-icon-gap:.5em}:where(button[type=reset],input[type=reset]){--trace-button-color:var(--trace-primary-light);--trace-button-contrast:var(--trace-secondary-lighter);--trace-button-outline-color:var(--trace-button-color)}:where(button,input[type=button],input[type=submit],input[type=reset]){justify-content:center;align-items:center;gap:var(--trace-button-icon-gap);box-sizing:border-box;padding:var(--trace-button-padding-block) var(--trace-button-padding-inline);border:2px solid var(--trace-button-border,var(--trace-button-color));border-radius:var(--trace-button-radius);background-color:var(--trace-button-bg,var(--trace-button-color));color:var(--trace-button-text,var(--trace-button-contrast));font-size:var(--trace-button-font-size);font-weight:400;line-height:var(--trace-button-line-height);text-align:center;cursor:pointer;transition:background-color .2s ease-in-out,color .2s ease-in-out,border-color .2s ease-in-out,box-shadow .2s ease-in-out,transform .2s ease-in-out;display:inline-flex}:where(button:hover:not(:disabled),input[type=button]:hover:not(:disabled),input[type=submit]:hover:not(:disabled),input[type=reset]:hover:not(:disabled)){box-shadow:var(--trace-button-box-shadow)}:where(button:active:not(:disabled),input[type=button]:active:not(:disabled),input[type=submit]:active:not(:disabled),input[type=reset]:active:not(:disabled)){box-shadow:var(--trace-button-box-shadow);transform:scale(.95)}:where(button:focus-visible,input[type=button]:focus-visible,input[type=submit]:focus-visible,input[type=reset]:focus-visible){outline:2px solid var(--trace-button-outline-color);outline-offset:2px;box-shadow:none}:where(button:disabled,input[type=button]:disabled,input[type=submit]:disabled,input[type=reset]:disabled){opacity:.5;cursor:not-allowed}:where(button[aria-busy=true]):after{content:"";inline-size:var(--trace-loader-size,1em);block-size:var(--trace-loader-size,1em);border-radius:var(--trace-loader-radius,2px);background-color:var(--trace-button-loader-color,var(--trace-button-text,var(--trace-button-contrast)));animation:trace-square-rotate var(--trace-loader-duration,3s) ease-in-out infinite;pointer-events:none;margin:auto;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){:where(button,input[type=button],input[type=submit],input[type=reset]){transition:none;transform:none}}@media (forced-colors:active){:where(button:disabled,input[type=button]:disabled,input[type=submit]:disabled,input[type=reset]:disabled){opacity:1;color:graytext;border-color:graytext}}:where(button[aria-busy=true]){cursor:wait;opacity:1;box-shadow:none;color:#0000;position:relative;transform:none}@media (prefers-reduced-motion:reduce){:where(button[aria-busy=true]):after{animation:none}}@media (forced-colors:active){:where(button[aria-busy=true]){forced-color-adjust:none;background-color:buttonface;border-color:buttontext}:where(button[aria-busy=true]):after{background-color:buttontext}}:where(button[aria-busy=true]>*){opacity:0}:where(:scope){--trace-switch-width:2.125rem;--trace-switch-height:1.25rem;--trace-switch-dot-size:.75rem;--trace-switch-dot-active-size:.875rem;--trace-switch-padding:.125rem;--trace-switch-color:light-dark(var(--trace-primary),var(--trace-secondary));--trace-switch-radius:var(--trace-radius-sm)}:where(input[type=checkbox][role=switch]){appearance:none;box-sizing:border-box;inline-size:var(--trace-switch-width);block-size:var(--trace-switch-height);padding:var(--trace-switch-padding);border:2px solid var(--trace-switch-color);border-radius:var(--trace-switch-radius);background-color:var(--trace-switch-bg,var(--trace-control-bg));background-image:radial-gradient(ellipse at center, var(--trace-switch-color) 50%, transparent 50%);vertical-align:middle;cursor:pointer;background-position:right -100% top 50%;background-repeat:no-repeat;background-size:200% 300%;flex-shrink:0;margin:2px;transition:transform .25s ease-in-out,background-position .25s ease-in-out;display:inline-block;position:relative;overflow:hidden}:where(input[type=checkbox][role=switch]):before{content:"";inline-size:var(--trace-switch-dot-size);block-size:var(--trace-switch-dot-size);background-color:var(--trace-switch-color);border-radius:2px;transition:inset-inline-start .2s ease-in-out,inline-size .2s ease-in-out,background-color .2s ease-in-out;position:absolute;inset-block-start:var(--trace-switch-padding);inset-inline-start:var(--trace-switch-padding)}:where(input[type=checkbox][role=switch]:checked){background-position:right 40% top 50%}:where(input[type=checkbox][role=switch]:checked):before{background-color:var(--trace-switch-dot-checked,var(--trace-switch-bg,var(--trace-control-bg)));inset-inline-start:calc(100% - var(--trace-switch-dot-size) - var(--trace-switch-padding))}:where(input[type=checkbox][role=switch]:dir(rtl)){background-position:-100%}:where(input[type=checkbox][role=switch]:dir(rtl):checked){background-position:40%}:where(input[type=checkbox][role=switch]:focus-visible){outline:2px solid var(--trace-switch-color);outline-offset:2px}:where(label:has(>input[type=checkbox][role=switch])){cursor:pointer;align-items:center;gap:.5rem;display:inline-flex}:where(input[type=checkbox][role=switch]:active:not(:disabled),label:active>input[type=checkbox][role=switch]:not(:disabled)){transform:scale(.9)}:where(input[type=checkbox][role=switch]:active:not(:disabled),label:active>input[type=checkbox][role=switch]:not(:disabled)):before{inline-size:var(--trace-switch-dot-active-size)}:where(input[type=checkbox][role=switch]:active:checked:not(:disabled),label:active>input[type=checkbox][role=switch]:checked:not(:disabled)):before{inset-inline-start:calc(100% - var(--trace-switch-dot-active-size) - var(--trace-switch-padding))}:where(input[type=checkbox][role=switch]:disabled){opacity:.5;cursor:not-allowed}:where(label:has(>input[type=checkbox][role=switch]:disabled)){cursor:not-allowed}:where(label>input[type=checkbox][role=switch]:disabled~span){opacity:.5}@media (prefers-reduced-motion:reduce){:where(input[type=checkbox][role=switch]),:where(input[type=checkbox][role=switch]):before{transition:none;transform:none}}@media (forced-colors:active){:where(input[type=checkbox][role=switch]){appearance:auto;background:0 0}:where(input[type=checkbox][role=switch]):before{content:none}}:where(input[type=checkbox][role=switch][aria-invalid=true]){--trace-switch-color:var(--trace-danger)}:where(:scope){--trace-radio-size:1.25rem;--trace-radio-color:light-dark(var(--trace-primary),var(--trace-secondary))}:where(input[type=radio]){appearance:none;box-sizing:border-box;inline-size:var(--trace-radio-size);block-size:var(--trace-radio-size);border:2px solid var(--trace-radio-color);background:var(--trace-radio-bg,var(--trace-control-bg));vertical-align:middle;cursor:pointer;border-radius:50%;flex-shrink:0;margin:2px;padding:0;transition:transform .25s ease-in-out,border-color .25s ease-in-out;display:inline-block;position:relative}:where(input[type=radio]):before{content:"";box-sizing:border-box;border:2px solid var(--trace-radio-color);background-color:#0000;border-radius:50%;transition:border-color .25s ease-in-out,background-color .25s ease-in-out,transform .25s ease-in-out;position:absolute;inset:-2px}:where(input[type=radio]:checked):before{background-color:var(--trace-radio-color);transform:scale(.6)}:where(input[type=radio]:focus-visible){outline:2px solid var(--trace-radio-color);outline-offset:2px}:where(label:has(>input[type=radio])){cursor:pointer;align-items:center;gap:.5rem;display:inline-flex}:where(input[type=radio]:active:not(:disabled),label:active>input[type=radio]:not(:disabled)){transform:scale(.9)}:where(input[type=radio]:disabled){opacity:.5;cursor:not-allowed}:where(label:has(>input[type=radio]:disabled)){cursor:not-allowed}:where(label>input[type=radio]:disabled~span){opacity:.5}@media (prefers-reduced-motion:reduce){:where(input[type=radio]),:where(input[type=radio]):before{transition:none;transform:none}:where(input[type=radio]:checked):before{transform:scale(.6)}}@media (forced-colors:active){:where(input[type=radio]){appearance:auto}:where(input[type=radio]):before{content:none}}:where(input[type=radio][aria-invalid=true]){--trace-radio-color:var(--trace-danger)}:where(:scope){--trace-input-font-size:1rem;--trace-input-line-height:1.5rem;--trace-input-padding-block:.375rem;--trace-input-padding-inline:.625rem;--trace-input-radius:var(--trace-radius-control);--trace-input-text:var(--trace-text);--trace-input-border:light-dark(var(--trace-primary),var(--trace-secondary));--trace-input-focus:light-dark(var(--trace-primary-light),var(--trace-secondary-light));--trace-input-placeholder:light-dark(var(--trace-neutral),var(--trace-neutral-light));--trace-input-error:var(--trace-danger);--trace-input-shadow:var(--trace-shadow)}:where(input:not([type]),input:is([type=text],[type=search],[type=email],[type=url],[type=tel],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=week],[type=time],[type=color],[type=file])){--_trace-input-border:var(--trace-input-border);box-sizing:border-box;inline-size:100%;min-inline-size:0;padding:var(--trace-input-padding-block) var(--trace-input-padding-inline);border:2px solid var(--_trace-input-border);border-radius:var(--trace-input-radius);background-color:var(--trace-input-bg,var(--trace-control-bg));color:var(--trace-input-text);caret-color:var(--trace-input-focus);font-family:var(--trace-font-body);font-size:var(--trace-input-font-size);line-height:var(--trace-input-line-height);text-align:start;cursor:text;margin:0;transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out;display:block;&::placeholder{color:var(--trace-input-placeholder);opacity:1}&:hover:not(:disabled):not([readonly]):not(:focus){box-shadow:var(--trace-input-shadow)}&:focus{--_trace-input-border:var(--trace-input-focus);outline-offset:2px;box-shadow:0 0 0 4px color-mix(in srgb, var(--trace-input-focus), transparent 70%);outline:2px solid #0000}&[readonly]{cursor:default}&[aria-invalid=true]{--_trace-input-border:var(--trace-input-error)}&:user-invalid{--_trace-input-border:var(--trace-input-error)}&:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}@media (prefers-reduced-motion:reduce){transition:none}}:where(input[type=color]){block-size:calc(var(--trace-input-line-height) + var(--trace-input-padding-block) * 2 + 4px);cursor:pointer;padding:.25rem}:where(input[type=color])::-webkit-color-swatch-wrapper{padding:0}:where(input[type=color])::-webkit-color-swatch{border:0;border-radius:1px}:where(input[type=color])::-moz-color-swatch{border:0;border-radius:1px}:where(label:has(>input:not([type]),>input:is([type=text],[type=search],[type=email],[type=url],[type=tel],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=week],[type=time],[type=color],[type=file]))){cursor:pointer;min-inline-size:0;color:var(--trace-input-text);gap:.25rem;display:grid;&:has(>input[aria-invalid=true])>small:last-child{color:var(--trace-input-error)}&:has(>input:user-invalid)>small:last-child{color:var(--trace-input-error)}&:has(>input:disabled){color:color-mix(in srgb, var(--trace-input-text), transparent 50%);cursor:not-allowed}&>small{margin:0;line-height:1.5}}:where(label:has(input)+small){margin-block-start:.25rem;line-height:1.5;display:block}:where(label:has(input[aria-invalid=true],input:user-invalid)+small){color:var(--trace-input-error)}:where(label[for]:not(:has(input))){cursor:pointer;color:var(--trace-input-text);margin-block-end:.25rem;display:inline-block}:where(input[aria-invalid=true]+small,input:user-invalid+small){color:var(--trace-input-error)}:where(label[for]:has(+input:disabled)){opacity:.5;cursor:not-allowed}:where(:scope){--trace-file-button-bg:var(--trace-primary-light);--trace-file-button-text:var(--trace-secondary-lighter)}:where(input[type=file]){cursor:pointer;padding-block:0;padding-inline-start:0}:where(input[type=file])::file-selector-button{padding:var(--trace-input-padding-block) var(--trace-input-padding-inline);background:var(--trace-file-button-bg);color:var(--trace-file-button-text);font:inherit;line-height:inherit;cursor:pointer;border:0;border-radius:0;margin:0;margin-inline-end:var(--trace-input-padding-inline)}:where(input[type=file]:hover:not(:disabled):not([readonly]):not(:focus)){box-shadow:none}:where(input[type=file]:disabled)::file-selector-button{cursor:not-allowed}@media (forced-colors:active){:where(input[type=file])::file-selector-button{border-inline-end:1px solid buttontext}}:where(:scope){--trace-textarea-font-size:1rem;--trace-textarea-line-height:1.5rem;--trace-textarea-padding-block:.375rem;--trace-textarea-padding-inline:.625rem;--trace-textarea-radius:var(--trace-radius-control);--trace-textarea-text:var(--trace-text);--trace-textarea-border:light-dark(var(--trace-primary),var(--trace-secondary));--trace-textarea-focus:light-dark(var(--trace-primary-light),var(--trace-secondary-light));--trace-textarea-placeholder:light-dark(var(--trace-neutral),var(--trace-neutral-light));--trace-textarea-error:var(--trace-danger);--trace-textarea-shadow:var(--trace-shadow)}:where(textarea){--_trace-textarea-border:var(--trace-textarea-border);box-sizing:border-box;inline-size:100%;min-inline-size:0;padding:var(--trace-textarea-padding-block) var(--trace-textarea-padding-inline);border:2px solid var(--_trace-textarea-border);border-radius:var(--trace-textarea-radius);background:var(--trace-textarea-bg,var(--trace-control-bg));color:var(--trace-textarea-text);caret-color:var(--trace-textarea-focus);font-family:var(--trace-font-body);font-size:var(--trace-textarea-font-size);line-height:var(--trace-textarea-line-height);text-align:start;resize:vertical;cursor:text;margin:0;transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out;display:block;&::placeholder{color:var(--trace-textarea-placeholder);opacity:1}&:hover:not(:disabled):not([readonly]):not(:focus){box-shadow:var(--trace-textarea-shadow)}&:focus{--_trace-textarea-border:var(--trace-textarea-focus);outline-offset:2px;box-shadow:0 0 0 4px color-mix(in srgb, var(--trace-textarea-focus), transparent 70%);outline:2px solid #0000}&[aria-invalid=true]{--_trace-textarea-border:var(--trace-textarea-error)}&:user-invalid{--_trace-textarea-border:var(--trace-textarea-error)}&[readonly]{cursor:default}&:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}@media (prefers-reduced-motion:reduce){transition:none}}:where(label:has(>textarea)){min-inline-size:0;color:var(--trace-textarea-text);cursor:pointer;gap:.25rem;display:grid;&>small{margin:0;line-height:1.5}&:has(>textarea:disabled){color:color-mix(in srgb, var(--trace-textarea-text), transparent 50%);cursor:not-allowed}&:has(>textarea[aria-invalid=true],>textarea:user-invalid)>small:last-child{color:var(--trace-textarea-error)}}:where(label:has(>textarea)+small){margin-block-start:.25rem;line-height:1.5;display:block}:where(label:has(>textarea[aria-invalid=true],>textarea:user-invalid)+small){color:var(--trace-textarea-error)}:where(label[for]:has(+textarea:disabled)){opacity:.5;cursor:not-allowed}:where(textarea[aria-invalid=true]+small,textarea:user-invalid+small){color:var(--trace-textarea-error)}:where(:scope){--trace-checkbox-size:1.25rem;--trace-checkbox-radius:var(--trace-radius-control);--trace-checkbox-color:light-dark(var(--trace-primary),var(--trace-secondary));--trace-checkbox-mark:light-dark(var(--trace-neutral-lighter),var(--trace-primary-dark))}:where(input[type=checkbox]:not([role=switch])){appearance:none;isolation:isolate;box-sizing:border-box;inline-size:var(--trace-checkbox-size);block-size:var(--trace-checkbox-size);border:2px solid var(--trace-checkbox-color);border-radius:var(--trace-checkbox-radius);background-color:var(--trace-checkbox-bg,var(--trace-control-bg));vertical-align:middle;cursor:pointer;flex-shrink:0;margin:2px;padding:0;transition:transform .2s ease-in-out,border-color .2s ease-in-out;display:inline-block;position:relative;&:before{content:"";z-index:1;background:var(--trace-checkbox-mark);opacity:0;transition:opacity .18s ease-in-out,transform .18s ease-in-out;position:absolute;inset:10%;transform:scale(.6);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4 4 10-10' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50%/contain no-repeat}&:after{content:"";z-index:0;border-radius:max(0px, calc(var(--trace-checkbox-radius) - 2px));background-color:var(--trace-checkbox-color);opacity:0;transition:opacity .18s ease-in-out,transform .18s ease-in-out;position:absolute;inset:0;transform:scale(.6)}&:checked:after,&:indeterminate:after,&:checked:before{opacity:1;transform:scale(1)}&:indeterminate:before{opacity:1;border-radius:1px;block-size:2px;inline-size:60%;margin:auto;inset:0;transform:scale(1);mask:none}&:focus-visible{outline:2px solid var(--trace-checkbox-color);outline-offset:2px}&:active:not(:disabled){transform:scale(.9)}&:disabled{opacity:.5;cursor:not-allowed}&[aria-invalid=true]{--trace-checkbox-color:var(--trace-danger);--trace-checkbox-mark:var(--trace-neutral-lighter)}&:user-invalid{--trace-checkbox-color:var(--trace-danger);--trace-checkbox-mark:var(--trace-neutral-lighter)}@media (prefers-reduced-motion:reduce){transition:none;transform:none;&:before,&:after{transition:none;transform:none}}@media (forced-colors:active){appearance:auto;background:0 0;&:before,&:after{content:none}}}:where(label:has(>input[type=checkbox]:not([role=switch]))){color:var(--trace-text);cursor:pointer;align-items:center;gap:.5rem;display:inline-flex;&:has(>input:disabled){color:color-mix(in srgb, var(--trace-text), transparent 50%);cursor:not-allowed}}:where(:scope){--trace-select-font-size:1rem;--trace-select-line-height:1.5rem;--trace-select-padding-block:.375rem;--trace-select-padding-inline:.625rem;--trace-select-radius:var(--trace-radius-control);--trace-select-text:var(--trace-text);--trace-select-border:light-dark(var(--trace-primary),var(--trace-secondary));--trace-select-focus:light-dark(var(--trace-primary-light),var(--trace-secondary-light));--trace-select-error:var(--trace-danger);--trace-select-shadow:var(--trace-shadow);--trace-select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646b79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");--trace-select-arrow-offset:var(--trace-select-padding-inline);--trace-select-arrow-size:1.25em}:where(select){--_trace-select-border:var(--trace-select-border);box-sizing:border-box;inline-size:100%;min-inline-size:0;padding:var(--trace-select-padding-block) var(--trace-select-padding-inline);border:2px solid var(--_trace-select-border);border-radius:var(--trace-select-radius);background:var(--trace-select-bg,var(--trace-control-bg));color:var(--trace-select-text);font-family:var(--trace-font-body);font-size:var(--trace-select-font-size);line-height:var(--trace-select-line-height);text-align:start;appearance:auto;cursor:pointer;margin:0;transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out;display:block;&:hover:not(:disabled):not(:focus){box-shadow:var(--trace-select-shadow)}&:focus{--_trace-select-border:var(--trace-select-focus);outline-offset:2px;box-shadow:0 0 0 4px color-mix(in srgb, var(--trace-select-focus), transparent 70%);outline:2px solid #0000}&[aria-invalid=true]{--_trace-select-border:var(--trace-select-error)}&:user-invalid{--_trace-select-border:var(--trace-select-error)}&:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}@media (prefers-reduced-motion:reduce){transition:none}}:where(select:not([multiple]):not([size]),select:not([multiple])[size="0"],select:not([multiple])[size="1"]){appearance:none;background-image:var(--trace-select-arrow);background-repeat:no-repeat;background-size:var(--trace-select-arrow-size) var(--trace-select-arrow-size);background-position:right var(--trace-select-arrow-offset) center;padding-inline-end:calc(var(--trace-select-arrow-offset) + var(--trace-select-arrow-size) + var(--trace-select-padding-inline));&:dir(rtl){background-position:left var(--trace-select-arrow-offset) center}@media (forced-colors:active){appearance:auto;background-image:none}}:where(select option,select optgroup){background-color:var(--trace-select-bg,var(--trace-control-bg));color:var(--trace-select-text)}:where(select[multiple],select[size]:not([size="1"])){cursor:default}:where(label:has(>select)){min-inline-size:0;color:var(--trace-select-text);cursor:pointer;gap:.25rem;display:grid;&>small{margin:0;line-height:1.5}&:has(>select:disabled){color:color-mix(in srgb, var(--trace-select-text), transparent 50%);cursor:not-allowed}&:has(>select[aria-invalid=true])>small:last-child{color:var(--trace-select-error)}&:has(>select:user-invalid)>small:last-child{color:var(--trace-select-error)}}:where(label:has(>select)+small){margin-block-start:.25rem;line-height:1.5;display:block}:where(label:has(>select[aria-invalid=true])+small),:where(label:has(>select:user-invalid)+small){color:var(--trace-select-error)}:where(label[for]:has(+select:disabled)){opacity:.5;cursor:not-allowed}:where(select[aria-invalid=true]+small,select:user-invalid+small){color:var(--trace-select-error)}:where(:scope){--trace-range-color:light-dark(var(--trace-primary),var(--trace-secondary));--trace-range-track-color:light-dark(var(--trace-primary-light),var(--trace-secondary-dark));--trace-range-error:var(--trace-danger);--trace-range-track-size:.375rem;--trace-range-thumb-size:1.25rem;--trace-range-height:2rem;--trace-range-active-scale:1.15;--trace-range-duration:.15s}:where(input[type=range]){appearance:none;box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--trace-range-height);color:var(--trace-range-color);accent-color:var(--trace-range-color);cursor:pointer;background:0 0;border:0;margin:0;padding:0;display:block;&:focus-visible{outline:2px solid var(--trace-range-color);outline-offset:2px;border-radius:var(--trace-radius-control)}&:disabled{opacity:.5;cursor:not-allowed}&[aria-invalid=true]{--trace-range-color:var(--trace-range-error);--trace-range-track-color:color-mix(in srgb, var(--trace-range-error), transparent 70%)}}:where(input[type=range])::-webkit-slider-runnable-track{box-sizing:border-box;block-size:var(--trace-range-track-size);background:var(--trace-range-track-color);border:0;border-radius:999px}:where(input[type=range])::-moz-range-track{box-sizing:border-box;block-size:var(--trace-range-track-size);background:var(--trace-range-track-color);border:0;border-radius:999px}:where(input[type=range])::-webkit-slider-thumb{appearance:none;box-sizing:border-box;inline-size:var(--trace-range-thumb-size);block-size:var(--trace-range-thumb-size);border:2px solid var(--trace-range-color);background:var(--trace-range-color);transition:transform var(--trace-range-duration) ease-out, box-shadow .2s ease-in-out;border-radius:50%;margin-block-start:calc((var(--trace-range-track-size) - var(--trace-range-thumb-size)) / 2)}:where(input[type=range])::-moz-range-thumb{appearance:none;box-sizing:border-box;inline-size:var(--trace-range-thumb-size);block-size:var(--trace-range-thumb-size);border:2px solid var(--trace-range-color);background:var(--trace-range-color);transition:transform var(--trace-range-duration) ease-out, box-shadow .2s ease-in-out;border-radius:50%}:where(input[type=range]:focus:not(:disabled))::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb, var(--trace-range-color), transparent 70%)}:where(input[type=range]:focus:not(:disabled))::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in srgb, var(--trace-range-color), transparent 70%)}:where(input[type=range]:active:not(:disabled))::-webkit-slider-thumb{transform:scale(var(--trace-range-active-scale))}:where(input[type=range]:active:not(:disabled))::-moz-range-thumb{transform:scale(var(--trace-range-active-scale))}@media (prefers-reduced-motion:reduce){:where(input[type=range])::-webkit-slider-thumb{transition:none;transform:none}:where(input[type=range]:active:not(:disabled))::-webkit-slider-thumb{transition:none;transform:none}:where(input[type=range])::-moz-range-thumb{transition:none;transform:none}:where(input[type=range]:active:not(:disabled))::-moz-range-thumb{transition:none;transform:none}}:where(label:has(>input[type=range])){min-inline-size:0;color:var(--trace-text);cursor:pointer;gap:.25rem;display:grid;&>small{margin:0;line-height:1.5}&:has(>input[aria-invalid=true])>small:last-child{color:var(--trace-range-error)}&:has(>input:disabled){cursor:not-allowed;color:color-mix(in srgb, var(--trace-text), transparent 50%)}}@media (forced-colors:active){:where(input[type=range]){--trace-range-color:ButtonText;--trace-range-track-color:GrayText}}}@layer trace.extensions;}