@zeix/ui-element/docs/assets/main.css

UIElement - minimal reactive framework based on Web Components

:root{--content-max-width:48rem;--breakout-size:12rem;--space-xxs:.2361rem;--space-xs:.382rem;--space-s:.618rem;--space-m:1rem;--space-l:1.618rem;--space-xl:2.6179rem;--space-xxl:4.2358rem;--font-size-xs:clamp(.75rem,.125vw + .725rem,.7813rem);--font-size-s:clamp(.875rem,.25vw + .825rem,.9375rem);--font-size-m:clamp(1rem,.5vw + .9rem,1.125rem);--font-size-l:clamp(1.125rem,.75vw + .975rem,1.3125rem);--font-size-xl:clamp(1.3125rem,1vw + 1.1125rem,1.5625rem);--font-size-xxl:clamp(1.5rem,1.5vw + 1.2rem,1.875rem);--font-size-xxxl:clamp(1.75rem,2vw + 1.35rem,2.25rem);--line-height-xs:1;--line-height-s:1.2;--line-height-m:1.414;--line-height-l:1.618;--color-white:white;--color-black:black;--color-gray-10:#f6f7f8;--color-gray-20:#ebeef0;--color-gray-30:#dee3e5;--color-gray-40:#cfd4d8;--color-gray-50:#bdc3c7;--color-gray-60:#a8adb1;--color-gray-70:#8e9295;--color-gray-80:#6d6f71;--color-gray-90:#404142;--color-primary:#325df1;--color-primary-hover:#2144ca;--color-primary-active:#18338f;--color-secondary:var(--color-gray-20);--color-secondary-hover:var(--color-gray-30);--color-secondary-active:var(--color-gray-40);--color-selection:#1ea9ea;--color-error:#c83c15;--color-error-hover:#a32a07;--color-error-active:#792109;--color-success:#417f11;--color-success-hover:#2e6400;--color-success-active:#234905;--color-input:var(--color-white);--color-background:var(--color-gray-10);--color-background-alt:var(--color-gray-20);--color-border:var(--color-gray-50);--color-text:var(--color-black);--color-text-soft:var(--color-gray-80);--color-text-inverted:var(--color-white);--font-family-sans:"Helvetica Neue",Arial,Roboto,sans-serif;--font-family-mono:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;--font-weight-regular:400;--font-weight-bold:700;--opacity-transparent:0;--opacity-translucent:.4;--opacity-dimmed:.8;--opacity-solid:1;--transition-short:.2s;--transition-medium:.5s;--transition-long:1.25s;--easing-linear:linear;--easing-in:ease-in;--easing-out:ease-out;--easing-inout:ease-in-out;--input-height:2rem}@media screen and (min-width:45em) and (max-width:75em){:root{--font-size-xs:clamp(.7813rem,.1042vw + .7344rem,.8125rem);--font-size-s:clamp(.9375rem,.2083vw + .8438rem,1rem);--font-size-m:clamp(1.125rem,.4167vw + .9375rem,1.25rem);--font-size-l:clamp(1.3125rem,.8333vw + .9375rem,1.5625rem);--font-size-xl:clamp(1.5625rem,1.4583vw + .9063rem,2rem);--font-size-xxl:clamp(1.875rem,2.0833vw + .9375rem,2.5rem);--font-size-xxxl:clamp(2.25rem,2.9167vw + .9375rem,3.125rem)}}@media (prefers-color-scheme:dark){:root{--color-gray-10:#e6e8e8;--color-gray-20:#ccd2d2;--color-gray-30:#b1bbbc;--color-gray-40:#98a4a5;--color-gray-50:#7f8c8d;--color-gray-60:#677374;--color-gray-70:#505959;--color-gray-80:#383c3d;--color-gray-90:#1c1e1e;--color-input:var(--color-black);--color-background:var(--color-gray-90);--color-background-alt:var(--color-gray-80);--color-primary:#4f7cfd;--color-primary-hover:#779cf9;--color-primary-active:#a5bbf1;--color-secondary:var(--color-gray-80);--color-secondary-hover:var(--color-gray-70);--color-secondary-active:var(--color-gray-60);--color-error:#e55a32;--color-error-hover:#f7805d;--color-error-active:#fdab92;--color-success:#5d9934;--color-success-hover:#80b261;--color-success-active:#aaca95;--color-text:var(--color-white);--color-text-soft:var(--color-gray-20);--color-text-inverted:var(--color-black)}}@media (prefers-reduced-transparency){:root{--opacity-translucent:.7;--opacity-dimmed:.9}}html{-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--font-family-sans);scroll-padding-top:var(--space-xl);scroll-behavior:smooth}input,textarea,button,select,option,optgroup{font-family:var(--font-family-sans)}body{line-height:inherit;color:var(--color-text);background:var(--color-background);margin:0;padding:0}:focus-visible{box-shadow:0 0 var(--space-xxs)2px var(--color-selection);outline:none}::selection{background-color:color-mix(in srgb,var(--color-selection)50%,transparent)}h1{font-size:var(--font-size-xxxl);line-height:var(--line-height-xs)}h2{font-size:var(--font-size-xxl);line-height:var(--line-height-s)}h3{font-size:var(--font-size-xl);line-height:var(--line-height-s)}h4{font-size:var(--font-size-l);line-height:var(--line-height-m)}h5,h6{font-size:var(--font-size-m);line-height:var(--line-height-m)}p,li,th,td,dt,dd,pre,input{font-size:var(--font-size-m);line-height:var(--line-height-l)}small{font-size:var(--font-size-s);line-height:var(--line-height-m)}dl{gap:var(--space-s)var(--space-m);grid-template-columns:auto 1fr;display:grid}dl dt{font-weight:var(--font-weight-bold);color:var(--color-text-soft)}dl dd{margin:0}details[open] summary{margin-bottom:var(--space-m)}header{margin-block:var(--space-xl)}header h1{justify-content:space-between;align-items:baseline;gap:var(--space-m);display:flex}header ol{gap:var(--space-s);margin-block:var(--space-l);grid-template-columns:1fr;padding:0;list-style:none;display:grid}header li{margin:0;padding:0}header a{gap:var(--space-xs)var(--space-s);padding:var(--space-m);height:calc(100% - 2*var(--space-m));color:var(--color-text);grid-template:"icon title""icon description"1fr/auto 1fr;text-decoration:none;display:grid}header a:hover{background-color:var(--color-secondary-hover)}header a:focus{background-color:var(--color-secondary-hover)}header a.active{background-color:var(--color-background-alt)}header a .icon{font-size:var(--font-size-l);width:var(--space-xl);height:var(--space-xl);background-color:var(--color-background);border:1px solid var(--color-border);border-radius:50%;grid-area:icon;justify-content:center;align-items:center;display:flex}header a strong{font-size:var(--font-size-m);line-height:var(--line-height-s);grid-area:title;margin:0}header a small{font-size:var(--font-size-s);line-height:var(--line-height-m);color:var(--color-text-soft);grid-area:description;margin:0}@media screen and (min-width:32em) and (max-width:48em){header ol{gap:var(--space-m);grid-template-columns:1fr 1fr}}@media screen and (min-width:48em){header ol{gap:var(--space-l);grid-template-columns:1fr 1fr 1fr}}.content-grid,main{grid-template-columns:[fullwidth-start]minmax(var(--space-l),1fr)[breakout-start]minmax(0,var(--breakout-size))[content-start]min(var(--content-max-width),calc(100% - 2*var(--space-l)))[content-end]minmax(0,var(--breakout-size))[breakout-end]minmax(var(--space-l),1fr)[fullwidth-end];display:grid}:is(.content-grid,main)>.content{grid-column:content}:is(.content-grid,main)>section{grid-column:content}:is(.content-grid,main) .breakout{grid-column:breakout}section{margin-block:var(--space-xl)}section.hero{grid-column:fullwidth;grid-template-columns:inherit;background-color:var(--color-primary);color:var(--color-white);padding-block:var(--space-xxl);margin-top:0;margin-bottom:0;display:grid}section.hero h1{margin-bottom:var(--space-xl);grid-column:content}section.hero .lead{font-size:var(--font-size-l);grid-column:content}section h3{margin-top:var(--space-xl);margin-bottom:var(--space-l)}h1,h2,h3,h4,h5,h6,p,ol,ul,dl,table,pre{margin-top:0;margin-bottom:var(--space-l)}ol,ul{gap:var(--space-m);flex-direction:column;display:flex}p code,li code,dt code,dd code,td code{background-color:var(--color-background-alt);border-radius:var(--space-xxs);padding:var(--space-xxs);font-family:var(--font-family-mono);font-size:calc(.95*var(--font-size-m))}:is(h1,h2,h3,h4,h5,h6)[id]{margin-left:calc(-1*var(--space-l));display:flex}:is(h1,h2,h3,h4,h5,h6) .anchor{width:var(--space-l);text-decoration:none;display:inline-block}:is(h1,h2,h3,h4,h5,h6) .anchor .permalink{visibility:hidden;font-size:var(--font-size-m)}:is(h1,h2,h3,h4,h5,h6):hover .anchor .permalink{visibility:visible}a[href]{color:var(--color-primary)}a[href]:hover{color:var(--color-primary-hover)}a[href]:active{color:var(--color-primary-active)}[aria-hidden=true]{display:none}.visually-hidden{width:1px;height:1px;position:absolute;top:auto;left:-10000px;overflow:hidden}my-counter{gap:.5rem;margin-top:1rem;margin-bottom:1rem;display:flex}my-counter p{flex:1;margin:0;display:inline-block}my-counter span{margin-right:.5rem}my-counter button{flex:0;padding:.25rem .5rem}my-slider{aspect-ratio:16/9;display:flex;position:relative;overflow:hidden}my-slider .slides{justify-content:center;align-items:center;width:100%;display:flex}my-slider .slide{text-align:center;min-width:100%}my-slider .slide:not(.active){display:none}my-slider .dots{justify-content:center;gap:var(--space-xs);width:100%;padding-block:var(--space-s);display:flex;position:absolute;bottom:0;left:0}my-slider .dots>span{width:var(--space-s);height:var(--space-s);background-color:var(--color-text);opacity:var(--opacity-translucent);border-radius:50%}my-slider .dots>span.active{opacity:var(--opacity-solid)}my-slider>button{border-radius:var(--space-xs);height:96%;padding:var(--space-m);font-size:var(--font-size-xxl);color:var(--color-text);opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout);background:0 0;border:0;position:absolute;top:2%}my-slider>button:hover{opacity:var(--opacity-solid);background-color:rgba(0,0,0,.05)}my-slider>button:active{opacity:var(--opacity-solid);background-color:rgba(0,0,0,.05)}my-slider>button:focus{opacity:var(--opacity-solid);background-color:rgba(0,0,0,.05)}my-slider>button:active{background-color:rgba(0,0,0,.1)}my-slider>button.prev{left:1%}my-slider>button.next{right:1%}code-block{margin:0 0 var(--space-l);display:block;position:relative}code-block .meta{margin-bottom:var(--space-xs);font-size:var(--font-size-s);color:var(--color-text-soft);display:flex}code-block .meta:not(:has(.file)) .language{margin-top:calc(-1*var(--space-m))}code-block .language{text-transform:uppercase;margin-left:auto}code-block pre{font-size:var(--font-size-s);color:var(--color-gray-10);background:var(--color-gray-90);padding:var(--space-s);margin:var(--space-xs)0;border-radius:var(--space-xs);overflow:auto}code-block .copy{right:var(--space-s);bottom:var(--space-s);position:absolute}code-block .overlay{display:none}code-block[collapsed]{max-height:12rem;overflow:hidden}code-block[collapsed]:after{content:"";width:100%;height:var(--space-m);background:linear-gradient(-135deg,var(--color-secondary).5rem,transparent 0)0 .5rem,linear-gradient(135deg,var(--color-secondary).5rem,var(--color-background)0)0 .5rem;background-color:var(--color-secondary);background-size:var(--space-m)var(--space-m);background-position:bottom;display:block;position:absolute;bottom:0}code-block[collapsed] .copy{display:none}code-block[collapsed] .overlay{width:100%;height:6rem;color:var(--color-text);background:linear-gradient(transparent,var(--color-secondary));cursor:pointer;padding:var(--space-xs)var(--space-s);margin-bottom:var(--space-m);font-size:var(--font-size-s);transition:background-color var(--transition-short)var(--easing-inout);text-shadow:var(--color-background)1px 0 var(--space-xs);border:0;flex-direction:column-reverse;align-items:center;display:flex;position:absolute;bottom:0;left:0}code-block[collapsed] .overlay:hover{text-shadow:var(--color-text-inverted)var(--space-xs)0 var(--space-s)}code-block[collapsed] .overlay:active{text-shadow:var(--color-text-inverted)var(--space-xs)0 var(--space-s)}tab-group{margin-bottom:var(--space-l);display:block}tab-group>[role=tablist]{border-bottom:1px solid var(--color-gray-50);margin-bottom:0;padding:0;display:flex}tab-group>[role=tablist] button{font-family:var(--font-family-sans);font-size:var(--font-size-s);font-weight:var(--font-weight-bold);padding:var(--space-s)var(--space-m);color:var(--color-text-soft);background-color:var(--color-secondary);cursor:pointer;transition:all var(--transition-short)var(--easing-inout);border:0;border-top:2px solid transparent}tab-group>[role=tablist] button:hover{color:var(--color-text);background-color:var(--color-secondary-hover)}tab-group>[role=tablist] button:focus{color:var(--color-text);background-color:var(--color-secondary-hover)}tab-group>[role=tablist] button:active{color:var(--color-text);background-color:var(--color-secondary-active)}tab-group>[role=tablist] button[aria-selected=true]{color:var(--color-primary-active);border-top:3px solid var(--color-primary);background-color:var(--color-background);margin-bottom:-1px}tab-group>[role=tabpanel]{font-family:sans-serif;font-size:var(--font-size-m);background:var(--color-background);margin-block:var(--space-l)}input-button{flex:0;display:inline-block;position:relative}input-button button{height:var(--input-height);min-width:var(--input-height);border:1px solid var(--color-border);border-radius:var(--space-xs);background-color:var(--color-secondary);color:var(--color-text);padding:0 var(--space-s);font-size:var(--font-size-s);line-height:var(--line-height-s);white-space:nowrap;opacity:var(--opacity-dimmed);transition:all var(--transition-shorter)var(--easing-inout)}input-button button:disabled{opacity:var(--opacity-translucent)}input-button button:not(:disabled){cursor:pointer;opacity:var(--opacity-solid)}input-button button:not(:disabled):hover{background-color:var(--color-secondary-hover)}input-button button:not(:disabled):active{background-color:var(--color-secondary-active)}input-button button.primary{color:var(--color-text-inverted);background-color:var(--color-primary);border-color:var(--color-primary-active)}input-button button.primary:not(:disabled){opacity:var(--opacity-solid)}input-button button.primary:not(:disabled):hover{background-color:var(--color-primary-hover)}input-button button.primary:not(:disabled):active{background-color:var(--color-primary-active)}input-button button.destructive{color:var(--color-text-inverted);background-color:var(--color-error);border-color:var(--color-error-active)}input-button button.destructive:not(:disabled){opacity:var(--opacity-solid)}input-button button.destructive:not(:disabled):hover{background-color:var(--color-error-hover)}input-button button.destructive:not(:disabled):active{background-color:var(--color-error-active)}input-button button.constructive{color:var(--color-text-inverted);background-color:var(--color-success);border-color:var(--color-success-active)}input-button button.constructive:not(:disabled){opacity:var(--opacity-solid)}input-button button.constructive:not(:disabled):hover{background-color:var(--color-success-hover)}input-button button.constructive:not(:disabled):active{background-color:var(--color-success-active)}input-button button.small{--input-height:var(--space-l);font-size:var(--font-size-xs);padding-inline:var(--space-xs)}input-button button.large{--input-height:var(--space-xl);font-size:var(--font-size-m);padding-inline:var(--space-m)}input-button .badge{box-sizing:border-box;top:calc(-1*var(--space-s));right:calc(-1*var(--space-s));font-size:var(--font-size-xs);line-height:var(--line-height-xs);background-color:var(--color-primary);color:var(--color-white);padding:var(--space-xxs)var(--space-xs);height:calc(2*var(--space-s));min-width:calc(2*var(--space-s));border-radius:var(--space-s);position:absolute}input-button .badge:empty{display:none}input-field{width:100%}input-field[value="0"] input{color:color-mix(in srgb,var(--color-text)50%,transparent)}input-field:hover button{opacity:var(--opacity-translucent)}input-field:hover button:not(:disabled){opacity:var(--opacity-solid);cursor:pointer}input-field:focus-within label{opacity:var(--opacity-solid)}input-field:focus-within p{opacity:var(--opacity-solid)}input-field:focus-within span{opacity:var(--opacity-solid)}input-field:focus-within button{opacity:var(--opacity-translucent)}input-field:focus-within button:not(:disabled){opacity:var(--opacity-solid);cursor:pointer}input-field:focus-within input{color:var(--color-text)}input-field label{opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout)}input-field p{opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout)}input-field span{opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout)}input-field label{font-size:var(--font-size-s);color:var(--color-text);margin-bottom:var(--space-xxs);display:block}input-field .row{gap:var(--space-s);display:flex}input-field .group{background:var(--color-input);border-bottom:1px solid var(--color-border);align-items:baseline;width:100%;display:flex}input-field .group.short{width:6rem}input-field .group .clear{color:var(--color-input);width:var(--space-m);height:var(--space-m);text-align:center;margin:0 var(--space-xxs);border:0;border-radius:50%;align-self:center;padding:0;line-height:1.1}input-field .group .hidden{display:none}input-field .group span:first-child{padding-left:var(--space-xs)}input-field .group span:last-child{padding-right:var(--space-xs)}input-field input{box-sizing:border-box;background:var(--color-input);color:var(--color-text);padding:var(--space-xs)var(--space-xxs);font-size:var(--font-size-m);width:100%;height:2rem;transition:color var(--transition-short)var(--easing-inout);border:0;flex-grow:1;display:inline-block}input-field input::-ms-input-placeholder{color:var(--color-text);opacity:var(--opacity-translucent)}input-field input::placeholder{color:var(--color-text);opacity:var(--opacity-translucent)}input-field input[type=number]{text-align:right}input-field input[aria-invalid=true]{box-shadow:0 0 var(--space-xxs)2px var(--color-error)}input-field span{flex-grow:0}input-field ::-webkit-textfield-decoration-container{height:100%}input-field ::-webkit-inner-spin-button{-ms-appearance:none;appearance:none}input-field .spinbutton{display:flex}input-field button{border:1px solid var(--color-border);background-color:var(--color-secondary);color:var(--color-text);padding:var(--space-xs)var(--space-s);font-size:var(--font-size-s);line-height:var(--line-height-s);width:2rem;height:2rem;opacity:var(--opacity-transparent);transition:opacity var(--transition-short)var(--easing-inout);-webkit-user-select:none;-ms-user-select:none;user-select:none}input-field button:disabled{cursor:revert;background-color:var(--color-background)}input-field button:not(:disabled):hover{background-color:var(--color-secondary-hover)}input-field button:not(:disabled):active{background-color:var(--color-secondary-active)}input-field .decrement{border-radius:var(--space-xs)0 0 var(--space-xs)}input-field .increment{border-radius:0 var(--space-xs)var(--space-xs)0;border-left:0}input-field .error{margin:var(--space-xs)0 0;font-size:var(--font-size-xs);line-height:var(--line-height-s)}input-field .error:empty{display:none}input-field .description{margin:var(--space-xs)0 0;font-size:var(--font-size-xs);line-height:var(--line-height-s)}input-field .description:empty{display:none}input-field .error{color:color-mix(in srgb,var(--color-text)50%,var(--color-error))}input-field .description{color:var(--color-text-soft)}input-checkbox{border-radius:var(--space-xs);flex-grow:1}input-checkbox:focus-within{box-shadow:0 0 var(--space-xxs)2px var(--color-selection)}input-checkbox input:focus{box-shadow:none;outline:none}input-checkbox label{font-size:var(--font-size-s)}input-checkbox.todo label{gap:var(--space-s);line-height:var(--input-height);cursor:pointer;display:flex}input-checkbox.todo label:before{box-sizing:border-box;content:"";font-size:var(--font-size-l);text-align:center;width:var(--input-height);height:var(--input-height);border:1px solid var(--color-border);background-color:var(--color-secondary);border-radius:100%;display:inline-block}input-checkbox.todo label:hover:before{background-color:var(--color-secondary-hover);opacity:var(--opacity-solid)}input-checkbox.todo label:active:before{background-color:var(--color-secondary-active)}input-checkbox.todo[checked] label{opacity:var(--opacity-translucent)}input-checkbox.todo[checked] label span{text-decoration:line-through}input-checkbox.todo[checked] label:before{color:var(--color-text-inverted);background-color:var(--color-success);border-color:var(--color-success-active);text-shadow:0 0 var(--space-xs)var(--color-success-active);content:"✓"}input-checkbox.todo[checked] label:hover:before{background-color:var(--color-success-hover)}input-checkbox.todo[checked] label:active:before{background-color:var(--color-success-active)}input-radiogroup{display:inline-block}input-radiogroup>fieldset{gap:var(--space-m);padding:var(--space-xs)0 var(--space-s);border:none;margin:0;display:flex}input-radiogroup legend{font-size:var(--font-size-s)}input-radiogroup label{font-size:var(--font-size-s)}input-radiogroup label{border-radius:var(--space-xs)}input-radiogroup label:focus-within{box-shadow:0 0 var(--space-xxs)2px var(--color-selection)}input-radiogroup label input:focus{box-shadow:none;outline:none}input-radiogroup.split-button fieldset{gap:0;padding:0}input-radiogroup.split-button label{box-sizing:border-box;height:var(--input-height);min-width:var(--input-height);border:1px solid var(--color-border);background-color:var(--color-secondary);color:var(--color-text);padding:var(--space-xs)var(--space-s);cursor:pointer;line-height:var(--line-height-s);opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout);border-left-width:0;border-radius:0;display:inline-block}input-radiogroup.split-button label:hover{background-color:var(--color-secondary-hover);opacity:var(--opacity-solid)}input-radiogroup.split-button label:active{background-color:var(--color-secondary-active)}input-radiogroup.split-button label.selected{color:var(--color-text-inverted);background-color:var(--color-primary);border-color:var(--color-primary-active)}input-radiogroup.split-button label.selected:hover{background-color:var(--color-primary-hover)}input-radiogroup.split-button label.selected:active{background-color:var(--color-primary-active)}input-radiogroup.split-button legend+label{border-radius:var(--space-xs)0 0 var(--space-xs);border-left-width:1px}input-radiogroup.split-button label:last-child{border-radius:0 var(--space-xs)var(--space-xs)0}component-demo{gap:var(--space-m);flex-direction:column;margin-bottom:var(--space-l);display:flex}component-demo .preview{border:1px dotted var(--color-border);border-radius:var(--space-xs);padding:var(--space-s)}todo-app{gap:var(--space-l);flex-direction:column;display:flex;container-type:inline-size}todo-app form{align-items:flex-start;gap:var(--space-m);flex-direction:column;justify-content:space-between;display:flex}todo-app ol{gap:var(--space-m);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}todo-app ol li{justify-content:space-between;gap:var(--space-m);margin:0;padding:0;display:flex}todo-app ol[filter=completed] li:not(:has([checked])){display:none}todo-app ol[filter=active] li:has([checked]){display:none}todo-app footer{align-items:center;gap:var(--space-m);grid-template-columns:1fr 1fr 1fr;margin:0;display:grid}todo-app footer .todo-count{justify-self:start}todo-app footer .todo-count p{font-size:var(--font-size-s);margin:0}todo-app footer .clear-completed{justify-self:end}@container (width>32rem){todo-app form{flex-direction:row;align-items:flex-end}}callout-box{padding:var(--space-s)var(--space-s)var(--space-s)var(--space-xl);margin:0 0 var(--space-l);font-size:var(--font-size-m);line-height:var(--line-height-l);border-left:var(--space-xxs)solid #4f7cfd;border-radius:var(--space-xs);background:#a5bbf1;display:block;position:relative}callout-box:before{content:"ℹ️";left:var(--space-s);position:absolute}callout-box>:last-child{margin-bottom:0}callout-box.tip{background:#aaca95;border-color:#5d9934}callout-box.tip:before{content:"💡"}callout-box.note{background:var(--color-gray-20);border-color:var(--color-gray-40)}callout-box.note:before{content:"💬"}callout-box.caution{background:var(--color-gray-20);border-color:var(--color-gray-40)}callout-box.caution:before{content:"⚠️"}callout-box.danger{background:#fdab92;border-color:#e55a32}callout-box.danger:before{content:"🚨"}@media (prefers-color-scheme:dark){callout-box{background:#18338f;border-color:#325df1}callout-box.tip{background:#234905;border-color:#417f11}callout-box.note{background:var(--color-gray-80);border-color:var(--color-gray-60)}callout-box.caution{background:var(--color-gray-80);border-color:var(--color-gray-60)}callout-box.danger{background:#792109;border-color:#c83c15}}product-catalog{gap:var(--space-l);flex-direction:column;display:flex}product-catalog>header{margin:0}product-catalog p{margin:0}product-catalog ul{margin:0;padding:0}product-catalog header{gap:var(--space-m);justify-content:space-between;display:flex}product-catalog li{gap:var(--space-m);justify-content:space-between;display:flex}spin-button{max-width:7rem;display:inline-flex}spin-button .value{box-sizing:border-box;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);height:var(--input-height);text-align:center;min-width:2rem;max-width:3rem;font-size:var(--font-size-s);padding:0 var(--space-s);flex-grow:1;margin:0;line-height:2}spin-button>button{box-sizing:border-box;height:var(--input-height);min-width:var(--input-height);border:1px solid var(--color-border);background-color:var(--color-secondary);color:var(--color-text);padding:0 var(--space-s);font-size:var(--font-size-s);line-height:var(--line-height-s);white-space:nowrap;cursor:pointer;transition:all var(--transition-shorter)var(--easing-inout);flex-grow:0}spin-button>button:disabled{opacity:var(--opacity-translucent)}spin-button>button:not(:disabled){cursor:pointer;opacity:var(--opacity-solid)}spin-button>button:not(:disabled):hover{background-color:var(--color-secondary-hover)}spin-button>button:not(:disabled):active{background-color:var(--color-secondary-active)}spin-button>button:first-child{border-radius:var(--space-xs)0 0 var(--space-xs)}spin-button>button:last-child{border-radius:0 var(--space-xs)var(--space-xs)0}spin-button [hidden]+button{border-radius:var(--space-xs);color:var(--color-text-inverted);background-color:var(--color-primary);border-color:var(--color-primary-active);flex-grow:1}spin-button [hidden]+button:hover{background-color:var(--color-primary-hover)}spin-button [hidden]+button:active{background-color:var(--color-primary-active)}rating-stars{display:inline-block}rating-stars fieldset{border:none;justify-content:center;margin:0;padding:0;display:flex}rating-stars label{cursor:pointer;width:var(--input-height);height:var(--input-height);color:var(--color-primary);font-size:var(--font-size-l);border-radius:var(--space-xs);text-align:center;display:block}rating-stars label:hover{color:var(--color-primary-hover);background-color:rgba(0,0,0,.05)}rating-stars label:focus-within{color:var(--color-primary-hover);background-color:rgba(0,0,0,.05)}rating-stars label:active{color:var(--color-primary-active);background-color:rgba(0,0,0,.1)}rating-feedback{gap:var(--space-m);text-align:left;flex-direction:column;width:80%;display:inline-flex;position:relative}rating-feedback header{gap:var(--space-s);margin-block:var(--space-l);flex-direction:row-reverse;display:flex}rating-feedback .hide{box-sizing:border-box;border-radius:var(--space-xs);color:var(--color-text);height:var(--input-height);font-size:var(--font-size-l);background:0 0;border:0;display:block;position:relative;top:0;right:0}rating-feedback .hide:hover{background:rgba(0,0,0,.05)}rating-feedback .hide:focus{background:rgba(0,0,0,.05)}rating-feedback .hide:active{background:rgba(0,0,0,.1)}rating-feedback p{margin:0}rating-feedback form{flex-direction:column;display:flex}rating-feedback fieldset{border:0;margin:0;padding:0}rating-feedback .feedback label{margin-bottom:var(--space-xxs);display:block}rating-feedback textarea{resize:vertical;box-sizing:border-box;background:var(--color-input);width:100%;color:var(--color-text);border:1px solid var(--color-border);padding:var(--space-xs)var(--space-xxs);font-size:var(--font-size-m);line-height:var(--line-height-m);margin-bottom:var(--space-xs);display:inline-block}calc-table{display:inline-block}calc-table .rows{gap:var(--space-m);justify-content:space-between;margin-bottom:var(--space-m);display:flex}calc-table .rows p{margin:0}calc-table .columns{gap:var(--space-m);justify-content:space-between;margin-bottom:var(--space-m);display:flex}calc-table .columns p{margin:0}