@bakung-ui/bakung.css

Version:

A modern, lightweight, zero-JS composable HTML-UI library designed for those who build on desktop and aim for mobile

bakung-ui.github.io/bakung.css

1 lines • 123 kB

CSS

@layer base{*,:after,:before{box-sizing:border-box;margin:0;padding:0}:focus-visible{outline:var(--focus-outline);outline-offset:0}:where([type=range]):focus-visible{outline:none}html{font:var(--font,var(--font-style) var(--font-variant) var(--font-weight) var(--font-stretch) var(--font-size)/var(--line-height) var(--font-family));-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;&:has(dialog[open],dialog[popover]:popover-open){overflow:hidden}}body{accent-color:var(--accent-color);background:var(--background-color);color:var(--font-color);letter-spacing:var(--letter-spacing);min-height:100vh}main{display:block}h1,h2,h3,h4,h5,h6{color:var(--h--color);font:var(--h--font-weight) 4rem /var(--h--line-height) var(--h--font-family);letter-spacing:var(--h--letter-spacing);margin:2.5rem 0 1.25rem}h1{font-size:clamp(2.799rem,calc(2.799rem + .125vw),3.799rem)}h2{font-size:clamp(2.332rem,calc(2.332rem + .125vw),3.332rem)}h3{font-size:clamp(1.944rem,calc(1.944rem + .125vw),2.944rem)}h3,h4{line-height:1.125}h4{font-size:clamp(1.62rem,calc(1.62rem + .125vw),2.62rem)}h5{font-size:clamp(1.35rem,calc(1.35rem + .125vw),2.35rem)}h5,h6{letter-spacing:normal;line-height:clamp(1em,1.5em - .75vw,1.5em)}h6{font-size:clamp(1.125rem,calc(1.125rem + .125vw),2.125rem)}blockquote{--data-quoter-marker:attr(data-quoter-marker,"\2014 \00A0");border-color:var(--blockquote--border-color);border-style:var(--blockquote--border-style,solid);border-width:var(--blockquote--border-width);margin:0 0 0 1rem;padding:1rem;:where(&) footer{color:var(--blockquote__footer--color);margin:var(--blockquote__footer--margin)}:where(&) footer:before{content:var(--data-quoter-marker)}}ol,ul{padding:0 0 0 1.25em}fieldset{border:0 var(--boundary--border-style) var(--boundary--border-color);border-width:var(--boundary--border-width);padding:.5rem;:where(&)>label{margin:0 1rem 0 0}}legend{color:inherit;display:table;padding:0;white-space:normal}details{display:block}summary{cursor:pointer;display:list-item}dt{color:var(--font-color-alt-1);font-weight:var(--small-header--font-weight,bold)}pre{background:var(--pre--background);border:var(--pre--border,var(--boundary--border-width) var(--boundary--border-style) var(--boundary--border-color));color:var(--pre--color);overflow:auto;padding:1rem}hr{border:var(--boundary--border-width) var(--boundary--border-style) var(--boundary--border-color);border-width:0 0 1px;box-sizing:content-box;color:inherit;margin:.5rem 0;overflow:visible}a{display:inline-block}[href]{color:var(--href--color);&:focus,&:hover{filter:brightness(105%)}&:visited{color:var(--href--visited-color)}}abbr[title]{border-bottom:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}audio,video{display:inline-block}audio:not([controls]){display:none}b,strong{font-weight:700}code,kbd,samp{font:normal var(--cks--font-weight) var(--cks--font-size) var(--cks--font-family);font-optical-sizing:auto}code{background:var(--code--background);color:var(--code--color)}kbd{background:var(--kbd--background);border-radius:var(--kbd--border-radius);color:var(--kbd--color);&:has(kbd){background-color:unset;border:0 var(--kbd_-kbd--border-style) var(--kbd_-kbd--border-color);border-width:var(--kbd_-kbd--border-width);padding:var(--kbd_-kbd--padding)}kbd{background-color:unset;color:var(--kbd__kbd--color);font-weight:var(--kbd__kbd--font-weight)}}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border:none;display:inline-block;max-height:90vh;max-width:90vw}figure{:where(&) img{line-height:1;margin:auto auto .5rem}}figcaption{font-size:.875em}svg:not(:root){overflow:hidden}table{border-color:inherit;text-indent:0}th{color:var(--font-color-alt-1);font-weight:var(--small-header--font-weight,bold)}td{padding:.5em}template{display:none}[popover],dialog{background:var(--background-color);border:unset;box-shadow:var(--shadow-float);color:inherit;display:none;inset:50% auto auto 50%;opacity:0;overflow:visible;padding:1rem;pointer-events:none;position:fixed;text-align:initial;transform:translate(-50%,-50%) scale(.85);transition:opacity .35s ease-in-out,transform .35s ease-in-out,overlay allow-discrete .35s,display allow-discrete .35s;z-index:1000}dialog{background:var(--dialog--background,var(--background-color));border:0 var(--dialog--border-style,solid) var(--dialog--border-color);border-radius:var(--dialog--border-radius,.125em);border-width:var(--dialog--border-width,1px);color:var(--dialog--color,var(--font-color));height:var(--dialog--height,auto);max-height:calc(100vh - 4rem);max-width:clamp(280px,100vw - 4rem,1160px);min-height:5rem;min-width:clamp(280px,100vw - 4rem,400px);width:var(--dialog--width,auto)}[popover]{height:var(--popover--height,auto);max-height:calc(100vh - 2rem);max-width:clamp(4rem,100vw - 2rem,1200px);width:var(--popover--width,auto)}[popover]:popover-open,dialog[open]{display:block;opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);@starting-style{opacity:0;transform:translate(-50%,-50%) scale(.85)}}[popover]::backdrop,dialog::backdrop{backdrop-filter:blur(1px);background:var(--backdrop--background)}progress{display:inline-block;vertical-align:baseline}button,input,optgroup,option,select,textarea{color:var(--controls--color);font:var(--font-weight) var(--font-size)/var(--line-height) var(--font-family)}button,input,optgroup,select,textarea{border:0 var(--controls--border-style) var(--controls--border-color);border-width:var(--controls--border-width);margin:0;min-height:var(--controls--min-height);padding:var(--controls--padding)}button,input,select{text-transform:none}.btn,[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;-moz-appearance:button;appearance:button;background-color:var(--btn--background,var(--background-color-clickable,revert));border:0 var(--btn--border-style,solid) var(--btn--border-color,var(--border-color-control));border-radius:var(--btn--border-radius,.25em);border-width:var(--btn--border-width,1px);box-shadow:var(--btn--shadow,var(--shadow-clickable));color:var(--btn--color,var(--font-color));cursor:pointer;font:var(--btn--font,normal var(--btn--font-weight) var(--btn--font-size)/var(--btn--line-height) var(--font-family));min-height:var(--controls--min-height);overflow:visible;padding:var(--btn--padding);position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;:where(&:hover,&:focus):not(:disabled){filter:brightness(103%)}:where(&:active):not(:disabled){box-shadow:none;filter:brightness(105%);transform:translateY(1px)}&:disabled{color:revert}&:focus-visible{box-shadow:none}}[type=color],input,select,textarea{background:var(--input--background);border-radius:var(--controls--border-radius)}select{min-width:1.7em}optgroup{border:none;color:var(--font-color-alt-2);padding:.125em}option{margin:0 0 0 .5em;padding:.25em .25em .125em;&:checked{background-color:var(--background-color-text);color:var(--accent-color)}}textarea{overflow:auto;vertical-align:top}input{overflow:visible}[type=checkbox],[type=color],[type=file],[type=radio],[type=range]{cursor:pointer}[type=color]{background:inherit;min-height:2rem;padding:.25em}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{padding:.125em .25em}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;appearance:textfield}[type=search]::-webkit-search-decoration{-webkit-appearance:none}[type=file]{padding:0 .125em 0 0}::file-selector-button{-webkit-appearance:button;background-color:var(--btn--background,var(--background-color-clickable,revert));border:0 var(--btn--border-style,solid) var(--btn--border-color,var(--border-color-control));border-width:var(--btn--border-width,1px);color:var(--btn--color,var(--font-color));cursor:pointer;font:var(--btn--font,normal var(--btn--font-weight) var(--btn--font-size)/var(--btn--line-height) var(--font-family));margin:-1px .125em -1px -1px;padding:.125em .25em}[type=range]:focus-visible::-webkit-slider-thumb{border-radius:50%;height:.8em;outline:var(--focus-outline);width:.8em}[type=checkbox],[type=radio]{min-height:auto;padding:0}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-grid;font-size:inherit;height:.75em;place-content:center;width:.75em}input[type=checkbox]:before{background-color:var(--accent-color);-webkit-clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);content:"";height:.65em;transform:scale(0);width:.5em}input[type=checkbox]:checked:before{transform:scale(1) rotate(15deg)}input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:50%;display:inline-grid;font-size:inherit;height:.875em;place-content:center;translate:0 -.05lh;width:.875em}input[type=radio]:before{background-color:var(--accent-color);border-radius:50%;content:"";height:.5em;transform:scale(0);width:.5em}input[type=radio]:checked:before{transform:scale(1)}[disabled]{cursor:not-allowed;filter:contrast(.5)}[hidden]{display:none}:target{scroll-margin-block:5ex}:where(dl,ol,ul,fieldset,p,details,pre,form,address,blockquote,figure,table):has(+:is(dl,ol,ul,fieldset,p,details,pre,form,address,blockquote,figure,table,nav)){margin-bottom:var(--elements-block-level-space)}.btn,[type=button],[type=reset],[type=submit],audio,button,details,input,select,textarea,video{margin:.25rem}@-moz-document url-prefix(){.btn,[type=button],[type=reset],[type=submit],button{padding:var(--moz-btn-padding)}[type=date],[type=datetime-local],[type=datetime],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],textarea{padding:var(--moz-input--padding)}select{min-width:1.5em;padding:var(--moz-input--select-padding);&:focus{outline:var(--focus-outline)}}input[type=range]{background:transparent;border:none;&:active{filter:brightness(120%)}&::-moz-range-thumb{background:var(--accent-color);border:none;height:1rem;width:1rem}&:focus-visible::-moz-range-thumb{outline:var(--focus-outline)}&::-moz-range-track{background:var(--accent-color);border-radius:.25rem;cursor:pointer;height:.5rem}}}}@layer ui{a{:where(&.ignore-visited):visited{color:currentColor}}.avatar{background:var(--background-color-text);border-radius:.125em;display:inline-block;font:300 var(--avatar--font-size,.75rem) var(--font-family);height:var(--avatar--height,2em);position:relative;text-align:center;width:var(--avatar--width,2em)}[data-avatar-name]:before{content:attr(data-avatar-name);font-size:.5em;inset:50% auto auto 50%;overflow:hidden;position:absolute;translate:-50% -50%;width:80%}.avatar__img{height:100%;inset:0 auto auto 0;width:100%}.avatar__figure:not(img),.avatar__img{border-radius:inherit;position:absolute;z-index:1}.avatar__figure:not(img){display:block;inset:50% auto auto 50%;translate:-50% -50%}.avatar__indicator{background:var(--background-color-off);border-radius:50%;box-shadow:0 0 0 1px var(--color-base-5);height:var(--avatar__indicator--height,.65em);inset:0 -.25em auto auto;position:absolute;text-align:center;width:var(--avatar__indicator--width,.65em);z-index:1}.avatar--circle{border-radius:50%;.avatar__indicator{inset:0 0 auto auto;translate:0}}.badge{align-items:baseline;background:var(--badge--background);border:0 var(--badge--border-style,solid) var(--badge--border-color);border-radius:var(--badge--border-radius,1rem);border-width:var(--badge--border-width,1px);color:var(--badge--color);display:inline-block;display:inline-flex;font:normal normal var(--badge--font-size,.9rem) /1 var(--font-family);margin:0;min-height:var(--badge--min-height,.75rem);min-width:var(--badge--min-width,.75rem);padding:.125rem .5rem .25rem;user-select:none;white-space:nowrap;a&{text-decoration:none}}.badge--accent{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.badge--low{background:var(--color-low-10);border-color:var(--color-low-20)}.badge--normal{background:var(--color-normal-10);border-color:var(--color-normal-20)}.badge--important{background:var(--color-important-10);border-color:var(--color-important-20)}.badge--critical{background:var(--color-critical-10);border-color:var(--color-critical-20)}.badge--success{background:var(--color-success-10);border-color:var(--color-success-20)}.badge--info{background:var(--color-info-10);border-color:var(--color-info-20)}.badge--caution{background:var(--color-caution-10);border-color:var(--color-caution-20)}.badge--warning{background:var(--color-warning-10);border-color:var(--color-warning-20)}.badge--error{background:var(--color-error-10);border-color:var(--color-error-20)}.badge--danger{background:var(--color-danger-10);border-color:var(--color-danger-20);color:var(--color-danger-70)}.badge--chip{background:var(--background-color);border:1px solid;border-radius:.25rem;transition:color .2s ease-out,background .2s ease-out,border .2s ease-out;:where(&) .btn--icon{color:inherit}&:where(.badge--accent){color:var(--accent-color)}&:where(.badge--low){color:var(--color-low-50)}&:where(.badge--normal){color:var(--color-normal-50)}&:where(.badge--important){color:var(--color-important-50)}&:where(.badge--critical){color:var(--color-critical-50)}&:where(.badge--success){color:var(--color-success-50)}&:where(.badge--info){color:var(--color-info-50)}&:where(.badge--caution){color:var(--color-caution-50)}&:where(.badge--warning){color:var(--color-warning-50)}&:where(.badge--error){color:var(--color-error-50)}&:where(.badge--danger){color:var(--color-danger-50)}}.btn{font-size:var(--btn--font-size);transition:color .5s ease-out,background .5s ease-out,border .5s ease-out}.btn:not(:where(button,[type=button],[type=reset],[type=submit])){padding:var(--as-btn--padding)}.btn--icon{background:none;border:none;border-radius:50%;box-shadow:none;font-size:var(--btn--icon-font-size);line-height:1;margin:0;min-height:auto;padding:0;&:focus,&:hover{scale:1.1}&:hover{box-shadow:none}.badge &{translate:0 .125em}}.btn--accent{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.btn--low{background:var(--color-low-30);border-color:var(--color-low-40)}.btn--normal{background:var(--color-normal-30);border-color:var(--color-normal-40)}.btn--important{background:var(--color-important-30);border-color:var(--color-important-40)}.btn--critical{background:var(--color-critical-30);border-color:var(--color-critical-40)}.btn--success{background:var(--color-success-30);border-color:var(--color-success-40)}.btn--info{background:var(--color-info-30);border-color:var(--color-info-40)}.btn--caution{background:var(--color-caution-30);border-color:var(--color-caution-40)}.btn--warning{background:var(--color-warning-30);border-color:var(--color-warning-40)}.btn--error{background:var(--color-error-30);border-color:var(--color-error-40)}.btn--danger{background:var(--color-danger-30);border-color:var(--color-danger-40)}.btn--ghost{background:oklch(from var(--accent-color) l c h/.05);border:0;box-shadow:none;text-decoration:underline 2px dotted var(--color-base-9);&:focus{text-decoration-style:solid}&:active{background:oklch(from var(--accent-color) l c h/.25)}}.btn--bordered{background:revert-layer;border-color:currentColor;:where(&).btn--accent{color:var(--accent-color)}:where(&).btn--low{color:var(--color-low-50)}:where(&).btn--normal{color:var(--color-normal-50)}:where(&).btn--important{color:var(--color-important-50)}:where(&).btn--critical{color:var(--color-critical-50)}:where(&).btn--success{color:var(--color-success-50)}:where(&).btn--info{color:var(--color-info-50)}:where(&).btn--caution{color:var(--color-caution-50)}:where(&).btn--warning{color:var(--color-warning-50)}:where(&).btn--error{color:var(--color-error-50)}:where(&).btn--danger{color:var(--color-danger-50)}}[be-removeable]{align-items:flex-end;display:inline-flex;opacity:1;transition:opacity .35s linear,display allow-discrete .35s,scale .2s linear;user-select:none;:where(&)>.btn{margin:auto auto auto .75em}&:has([data-state-handler]:not(:checked)){display:none;opacity:0;scale:85%}&:has([data-state-handler]:focus-visible){outline:var(--focus-outline)}}[be-switchable]{border-color:var(--border-color-control);color:var(--font-color-alt-2);cursor:pointer;user-select:none;:where(&)>.visual-indicator{margin:0 .5em 0 0;overflow:clip;transition:opacity .35s ease-out,width .2s ease-out,margin .2s ease-out}&:has([data-state-handler]:focus-visible){outline:var(--focus-outline)}}:has(>[data-state-handler]:checked),[selected]{[be-switchable]:not(&){.active-visible{margin:0;opacity:0;width:0}}[be-switchable]:is(&){background:var(--accent-color);border-color:var(--accent-color);color:#fff;.active-invisible{margin:0;opacity:0;width:0}}}.toggle{align-items:baseline;display:inline-flex;&:has(:where([data-toggle-handler-on],[data-toggle-handler-off-on]):not(:checked)) .active-visible,&:has([data-toggle-handler-off]:not(:checked),[data-toggle-handler-off-on]:checked) .active-invisible{display:none}}.toggle__control{align-items:center;align-self:center;border:none;display:flex;height:calc(.75em*var(--toggle-size));margin:0 .5em;padding:0;position:relative;width:calc(1.5em*var(--toggle-size));&>label{cursor:pointer;display:block;height:inherit;position:absolute;width:inherit;z-index:1;&:has(:is([data-toggle-handler-off],[data-toggle-handler-on]):checked){height:0;opacity:0;width:0;z-index:-1}}&:has([data-toggle-handler-off]:focus-visible,[data-toggle-handler-on]:focus-visible,[data-toggle-handler-off-on]:focus-visible):after{outline:var(--focus-outline)}&:has(:is([data-toggle-handler-on],[data-toggle-handler-off-on]):checked){&:after,.toggle__indicator{inset:0 0 auto auto}}&:has(:is([data-toggle-handler-off],[data-toggle-handler-on],[data-toggle-handler-off-on]):disabled)>label{cursor:not-allowed}&:after,&:before{content:"";display:block;position:absolute}&:before{background:var(--background-color-off);border:0 var(--controls--border-style) var(--controls--border-color);border-radius:calc(1em*var(--toggle-size));border-width:var(--controls--border-width);height:calc(var(--toggle-path-size, .5em)*var(--toggle-size));transition:background .2s ease-in-out;width:100%}&:has(>.toggle__indicator){&:after{display:none}&:has([data-toggle-handler-off]:focus-visible,[data-toggle-handler-on]:focus-visible,[data-toggle-handler-off-on]:focus-visible):before{outline:var(--focus-outline)}}}.toggle__indicator{align-items:center;display:flex;justify-content:center}.toggle__control:after,.toggle__indicator{background:var(--background-color-clickable);border:0 var(--controls--border-style) var(--controls--border-color);border-radius:50%;border-width:var(--controls--border-width);box-shadow:none;height:calc(.75em*var(--toggle-size));inset:0 calc(100% - .75em*var(--toggle-size)) auto auto;position:absolute;transition:inset .2s ease-in-out;width:calc(.75em*var(--toggle-size))}.toggle:is(.toggle--mutual) .toggle__control,.toggle__control:has(:is([data-toggle-handler-on],[data-toggle-handler-off-on]):checked){&:before{background:var(--color-base-5)}&:after,.toggle__indicator{background:var(--accent-color)}}.toggle--vertical{display:inline-flex;flex-flow:column-reverse;.toggle__control{margin:.5em 0;transform:rotate(270deg)}.toggle__control>*{align-self:normal}.toggle__control:before{align-self:normal;translate:0 25%}.toggle__control:has(.toggle__indicator):before{translate:unset}}.divider{align-self:stretch;border-color:var(--boundary--border-color);height:auto;inset:0;margin:.75rem .5rem;position:relative}[be-divider-caption]:after{background:var(--divider--background);color:var(--font-color-alt-2);content:attr(be-divider-caption,"or");font-size:.8rem;inset:auto auto auto 50%;padding:.125rem .5rem;position:absolute;translate:-50% -50%}.divider--vertical{border-width:0 1px 0 0;margin:.5rem 1rem;:where(&)[be-divider-caption]:after{inset:50% auto auto}}.img--fluid,.img--thumbnail{display:block;height:auto;max-width:100%;max-width:-webkit-fill-available;width:100%}.img--thumbnail{background:var(--background-color);border:0 var(--boundary--border-style) var(--boundary--border-color);border-radius:.375rem;border-width:var(--boundary--border-width);padding:.25em}.img--fit-cover{object-fit:cover}.img--fit-contain{object-fit:contain}.img--fit-fill{display:block;height:100%;object-fit:fill;width:100%}.video--fluid{display:block;height:auto;max-width:100%;overflow:hidden;padding:0;position:relative;width:100%}.video--fluid:before{content:none}.video--scale-4-3:before{padding-bottom:75%}.video--scale-1-1:before{padding-bottom:100%}.navbar{align-items:center;background:var(--navbar--background);display:flex;flex-flow:row wrap;& a{text-decoration:none}>.nav>.nav__item>.nav{filter:var(--shadow-float-alt-1)}&:where([data-navbar-active]){&:is([data-navbar-active=true i]) .active-invisible{display:none}&:not([data-navbar-active=true i]) .active-visible{display:none}}&:has([data-toggle-navbar-handler]:checked) .active-invisible{display:none}&:has([data-toggle-navbar-handler]:not(:checked)) .active-visible{display:none}}.navbar__brand{display:inline-block;padding:.5rem 1rem;position:relative}.navbar__toggle{opacity:0;overflow:clip;position:absolute;visibility:hidden;&:is(:focus,:focus-within){outline:var(--focus-outline)}}.nav{background:var(--nav--background,inherit);display:inline-flex;flex-flow:row wrap;list-style:none;padding:0;width:max-content;.nav{background:var(--nav__nav--background);display:none;flex-flow:column nowrap;inset:100% auto auto 0;margin:0;padding:0;position:absolute;transform:translateY(-.25rem);transition:display allow-discrete .2s,transform .2s ease-in-out;z-index:var(--z-index-popover);.nav{inset:0 auto auto 100%}}}.nav__item-line:before{border:0 var(--boundary--border-style) var(--boundary--border-color);border-width:0 0 1px;content:"";display:block;height:0;padding:0}.nav__item{flex:0 0 auto;padding:.5rem 1rem;position:relative;&:has(.nav)>a:after{border-bottom:.25em solid;border-left:.25em solid transparent;border-right:.25em solid transparent;content:"";display:inline-block;inset:auto auto .25em auto;margin:auto auto auto 1em;position:relative;transition:transform .35s ease-in-out}&:hover{background:var(--background-color-active);&>a:after{transform:scaleY(-1);transform-origin:center}}>*>.visual-indicator,>.visual-indicator{margin:0 0 0 1em;padding:0;transform:rotate(90deg) scaleX(-1);transition:transform .35s ease-in-out}&:is(:hover,:focus,:focus-within){>*>.visual-indicator,>.visual-indicator{transform:rotate(90deg) scaleX(1)}>.nav{display:inline-flex;transform:translateY(0);@starting-style{transform:translateY(-.25rem)}}}}.navbar--no-indicator .nav__item>a:after{display:none}.navbar--vertical{align-items:normal;flex-flow:column;.navbar__brand{padding:.5rem 1rem}.nav{flex-flow:column;inset:0 auto auto 100%}}.navbar--compact{justify-content:space-between;:where(.navbar__toggle){opacity:1;overflow:initial;position:static;visibility:visible}>.nav{display:none;overflow:hidden;transition:display allow-discrete .2s,margin-top .2s ease-in-out;>.nav__item>.nav{filter:none}>.nav__item:first-child{margin-top:-110%;transition:margin-top .35s ease-in-out}}.nav{background:transparent;position:static;width:100%;.nav{display:none;margin:.5rem -1rem -.5rem;padding:0 0 0 1rem;transition:none;width:calc(100% + 2rem)}}.nav__item{.nav__item:first-child{margin:0}.nav__item:last-child{padding:.5rem 1rem}&:hover{filter:brightness(98%)}}&:not(.navbar--no-hover) .nav__item:hover,.nav__item:is(:focus,:focus-within){>.nav{display:block}}&:has([data-toggle-navbar-handler]:checked),:where(&)[data-navbar-active=true i]{>.nav{display:block;>.nav__item:first-child{margin-top:0;@starting-style{margin-top:-110%}}}}}.navbar--breadcrumb{--breadcrumb-divider:attr(be-breadcrumb-divider,"/");background:var(--navbar--breadcrumb--background,unset);gap:var(--navbar--breadcrumb-gap,0 1.5rem);.navbar__brand{padding:0}>.nav{background:unset;gap:var(--navbar--breadcrumb-gap,0 1.5rem)}.navbar__brand:after,>.nav>.nav__item:not(:last-child):after{color:var(--font-color-alt-2);content:var(--breadcrumb-divider);position:absolute;right:-1rem}>.nav>.nav__item{padding:0;&:hover{background:inherit}}}.steps{display:grid;gap:1rem;grid:max-content min-content/auto-flow 200px;list-style:none}.step{display:grid;grid:subgrid [row-1-start] [row-1-end row-2-start] [row-2end]/subgrid [col];grid-area:span 2/auto;text-align:center;z-index:1}.step__header{display:flex;margin:.5rem}.step__trail{align-items:center;display:flex;justify-content:center;position:relative;width:100%;&:after,&:before{background:var(--background-color-off);content:"";position:absolute;z-index:-1}:where(.step:not(:last-child)) &:after{height:1px;transform:translate(50%);width:calc(100% + 2rem)}}.step__indicator{background:var(--background-color-off);border:0 var(--step__indicator--border-style,solid) var(--step__indicator--border-color);border-radius:50%;border-width:var(--step__indicator--border-width,0);display:inline-flex;margin:initial;min-height:.5rem;min-width:.5rem;padding:initial;&:active,&:focus{filter:unset;transform:unset}&:has(.visual-aside,.visual-indicator){padding:.25rem}.visual-aside,.visual-indicator{translate:0}}.step__body{color:var(--step__body--color);padding:.5rem}.steps--vertical{grid:auto-flow min-content/min-content minmax(auto,1fr);.step{grid-area:auto/span 2;text-align:left}.step__header{justify-content:center}.step__trail{align-items:baseline;justify-content:center;margin-top:.25lh;.step:not(:last-child) &:after{height:calc(100% + 2.5rem);transform:none;width:1px}}}.step--active{.step:has(~&){.step__trail{&:after,&:before{background:var(--accent-color)}}.step__indicator{background:var(--accent-color);min-height:.75rem;min-width:.75rem}.step__body{color:revert-layer}}.step__trail:before{background:var(--accent-color)}.step__indicator{background:var(--background-color);border:0 var(--step--active_-step__indicator--border-style,solid) var(--accent-color);border-width:var(--step--active_-step__indicator--border-width,.125rem);min-height:.75rem;min-width:.75rem}.step__body{color:revert-layer}}.steps--done{.step__trail{&:after,&:before{background:var(--accent-color)}}.step__indicator{background:var(--accent-color);min-height:.75rem;min-width:.75rem}.step__body{color:revert-layer}}.tabs{display:flex;filter:var(--shadow-border);flex-flow:column nowrap;margin:auto auto 1rem}.tabs__nav{border:0 var(--tabs__nav--border-style,solid) var(--tabs__nav--border-color);border-width:0;display:flex}.tab__nav{background:var(--background-color-clickable);border:0 var(--boundary--border-style) var(--boundary--border-color);border-radius:.125rem .125rem 0 0;border-width:1px 1px 0;box-shadow:none;cursor:pointer;padding:.25rem .75rem;position:relative;&:is(&:focus,&:focus-within){box-shadow:none;outline:none;scale:none;text-decoration:underline 2px dashed var(--color-base-9)}}.tab__nav:has([data-tab-select-handler]:checked),.tab__nav[data-tab-active=true i]{background:var(--tab__nav--active--background);z-index:100}.tabs__content{background:var(--tabs__content--background);border:0 var(--boundary--border-style) var(--boundary--border-color);border-width:1px;margin:-1px 0 0;padding:1rem;position:relative;z-index:99}.tab__content{border:0 solid var(--boundary--border-color);display:none}.tab__content[data-tab-active=true i],.tabs:has(.tab__nav:first-child [data-tab-select-handler]:checked) .tab__content:first-child,.tabs:has(.tab__nav:nth-child(10) [data-tab-select-handler]:checked) .tab__content:nth-child(10),.tabs:has(.tab__nav:nth-child(11) [data-tab-select-handler]:checked) .tab__content:nth-child(11),.tabs:has(.tab__nav:nth-child(12) [data-tab-select-handler]:checked) .tab__content:nth-child(12),.tabs:has(.tab__nav:nth-child(13) [data-tab-select-handler]:checked) .tab__content:nth-child(13),.tabs:has(.tab__nav:nth-child(14) [data-tab-select-handler]:checked) .tab__content:nth-child(14),.tabs:has(.tab__nav:nth-child(15) [data-tab-select-handler]:checked) .tab__content:nth-child(15),.tabs:has(.tab__nav:nth-child(2) [data-tab-select-handler]:checked) .tab__content:nth-child(2),.tabs:has(.tab__nav:nth-child(3) [data-tab-select-handler]:checked) .tab__content:nth-child(3),.tabs:has(.tab__nav:nth-child(4) [data-tab-select-handler]:checked) .tab__content:nth-child(4),.tabs:has(.tab__nav:nth-child(5) [data-tab-select-handler]:checked) .tab__content:nth-child(5),.tabs:has(.tab__nav:nth-child(6) [data-tab-select-handler]:checked) .tab__content:nth-child(6),.tabs:has(.tab__nav:nth-child(7) [data-tab-select-handler]:checked) .tab__content:nth-child(7),.tabs:has(.tab__nav:nth-child(8) [data-tab-select-handler]:checked) .tab__content:nth-child(8),.tabs:has(.tab__nav:nth-child(9) [data-tab-select-handler]:checked) .tab__content:nth-child(9){display:block}.tabs--right{flex-flow:row-reverse nowrap;.tabs__nav{flex:0 0 auto;flex-flow:column}.tab__nav{border-radius:0 .125rem .125rem 0;border-width:1px 1px 0 0;&:last-child{border-width:1px 1px 1px 0}}.tabs__content{flex:1 0 auto;margin:0 -1px 0 0}}.tabs--bottom{flex-flow:column-reverse nowrap;.tabs__nav{flex:0 0 auto;flex-flow:row}.tab__nav{border-radius:0 0 .125rem .125rem;border-width:0 0 1px 1px;&:last-child{border-width:0 1px 1px}}.tabs__content{flex:1 0 auto;margin:0 0 -1px}}.tabs--left{flex-flow:row nowrap;.tabs__nav{flex:0 0 auto;flex-flow:column}.tab__nav{border-radius:.125rem 0 0 .125rem;border-width:1px 0 0 1px;&:last-child{border-width:1px 0 1px 1px}}.tabs__content{flex:1 0 auto;margin:0 0 0 -1px}}[be-tooltip]{&:before{border-bottom:.4rem solid var(--background-color-text);border-left:.4rem solid transparent;border-right:.4rem solid transparent;content:"";inset:0 auto auto 50%;opacity:0;position:absolute;transform:scaleY(-1) translateX(-50%);transition:opacity .2s ease-in-out,inset .2s ease-in-out;z-index:1}&:hover:before,&:is(.tooltip--focus):focus:before,&:is([data-tooltip-active=true i]):before{inset:-.5rem auto auto 50%;opacity:1}&:after{background:var(--background-color-text);border-radius:.125rem;color:revert-layer;content:attr(be-tooltip);display:block;font-size:.7rem;inset:auto auto 100% 50%;max-width:clamp(200px,100vw - 1.5rem,50rem);opacity:0;overflow:hidden;padding:.25rem .5rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translateX(-50%);transition:opacity .2s ease-in-out,inset .2s ease-in-out;white-space:pre;z-index:var(--z-index-tooltip)}&:hover:after,&:is(.tooltip--focus):focus:after,&:is([data-tooltip-active=true i]):after{inset:auto auto calc(100% + .5rem) 50%;opacity:1}&:disabled{pointer-events:auto}}.tooltip--right{&:before{inset:50% auto auto calc(100% - .5rem);transform:rotate(-90deg);translate:0 -50%}&:hover:before,&:is(.tooltip--focus):focus:before,&:is([data-tooltip-active=true i]):before{inset:50% auto auto 100%}&:after{inset:50% auto auto 100%;transform:translateY(-50%)}&:hover:after,&:is(.tooltip--focus):focus:after,&:is([data-tooltip-active=true i]):after{inset:50% auto auto calc(100% + .55rem)}}.tooltip--bottom{&:before{inset:auto auto 0 50%;transform:rotate(0deg) translateX(-50%)}&:hover:before,&:is(.tooltip--focus):focus:before,&:is([data-tooltip-active=true i]):before{inset:auto auto -.5rem 50%}&:after{inset:100% auto auto 50%;transform:translateX(-50%)}&:hover:after,&:is(.tooltip--focus):focus:after,&:is([data-tooltip-active=true i]):after{inset:calc(100% + .5rem) auto auto 50%}}.tooltip--left{&:before{inset:50% calc(100% - .5rem) auto auto;transform:rotate(90deg);translate:0 -50%}&:hover:before,&:is(.tooltip--focus):focus:before,&:is([data-tooltip-active=true i]):before{inset:50% 100% auto auto}&:after{inset:50% 100% auto auto;transform:translateY(-50%)}&:hover:after,&:is(.tooltip--focus):focus:after,&:is([data-tooltip-active=true i]):after{inset:50% calc(100% + .55rem) auto auto}}.tooltip--no-pointer{&:before{display:none}&:hover:after{translate:0 .25rem}&:is(.tooltip--right):hover:after{translate:-.25rem}&:is(.tooltip--bottom):hover:after{translate:0 -.25rem}&:is(.tooltip--left):hover:after{translate:.25rem}}.dialog{display:grid;gap:.5rem 0;grid:"top-start top-middle top-end" auto "middle-start center middle-end" 1fr "bottom-start bottom-middle bottom-end" min-content/min-content;z-index:var(--z-index-modal);&:not([open],[popover]:popover-open){display:none}}.dialog__header{align-items:center;display:flex;gap:var(--dialog__header--gap,.5rem);grid-area:auto/top-middle/auto/top-end;justify-content:space-between;&>:where(h1,h2,h3,h4,h5,h6){margin:0}}.dialog__aside{align-content:flex-start;grid-area:top-start/auto/bottom-start/auto;padding:.25rem;text-align:center}.dialog__content{grid-area:auto/center/auto/bottom-end;overflow:auto}.dialog__footer{grid-area:auto/bottom-middle/auto/bottom-end}.dialog--md{height:clamp(13rem,100vh - 2rem,458px);width:clamp(280px,100vw - 4rem,590px)}.dialog--lg{height:clamp(13rem,100vh - 4rem,796px);width:clamp(280px,100vw - 4rem,1024px)}.notice{background:var(--notice--background-color);border:0 var(--notice--border-style,solid) var(--notice--border-color);border-radius:var(--notice--border-radius,.125rem);border-width:var(--notice--border-width,1px);box-shadow:var(--notice--box-shadow, );color:var(--notice--color,revert-layer);display:flex;flex-flow:var(--notice--flex-flow,row wrap);gap:.5rem;margin:auto auto 1rem;padding:1rem;position:relative;text-align:initial}.notice__header{display:block;flex:1 1 100%;font-size:1.25rem}.notice__content{align-content:space-evenly;flex:1 1 0;overflow-y:auto}.notice--accent{background:var(--accent-color);border-color:var(--accent-color);color:#fff;.notice__aside{color:var(--accent-color)}}.notice--low{background:var(--color-low-10);border-color:var(--color-low-20);.notice__aside{color:var(--color-low-80)}}.notice--normal{background:var(--color-normal-10);border-color:var(--color-normal-20);.notice__aside{color:var(--color-normal-80)}}.notice--important{background:var(--color-important-10);border-color:var(--color-important-20);.notice__aside{color:var(--color-important-80)}}.notice--critical{background:var(--color-critical-10);border-color:var(--color-critical-20);.notice__aside{color:var(--color-critical-80)}}.notice--success{background:var(--color-success-10);border-color:var(--color-success-20);.notice__aside{color:var(--color-success-80)}}.notice--info{background:var(--color-info-10);border-color:var(--color-info-20);.notice__aside{color:var(--color-info-80)}}.notice--caution{background:var(--color-caution-10);border-color:var(--color-caution-20);.notice__aside{color:var(--color-caution-80)}}.notice--warning{background:var(--color-warning-10);border-color:var(--color-warning-20);.notice__aside{color:var(--color-warning-80)}}.notice--error{background:var(--color-error-10);border-color:var(--color-error-20);.notice__aside{color:var(--color-error-80)}}.notice--danger{background:var(--color-danger-10);border-color:var(--color-danger-20);.notice__aside{color:var(--color-danger-80)}}.notice--notify{background:var(--color-base-5);border:0 var(--notice--notify--border-style,solid) var(--notice--border-color);border-radius:var(--notice--notify--border-radius,.125rem);border-width:var(--notice--notify--border-width,0);box-shadow:var(--shadow-float);display:none;flex-flow:row nowrap;height:auto;inset:auto auto 0 50%;max-height:40vh;max-width:clamp(250px,100vw - 3rem,992px);min-width:250px;opacity:0;padding:0 .5rem;position:fixed;transform:translate(-50%) scale(.85);transition:opacity .35s ease-in-out,transform .35s ease-in-out,overlay allow-discrete .35s,display allow-discrete .35s;width:max-content;z-index:var(--z-index-popover);&[data-notify-active]{display:flex;opacity:1;transform:translate(-50%) scale(1);@starting-style{opacity:0;transform:translate(-50%) scale(.85)}}.notice__aside{align-content:center}.notice__content,.notice__footer{margin:.5rem 0}&.notice--accent{background:var(--accent-color)}&.notice--low{background:var(--color-low-5);border-color:var(--color-low-10)}&.notice--normal{background:var(--color-normal-5);border-color:var(--color-normal-10)}&.notice--important{background:var(--color-important-5);border-color:var(--color-important-10)}&.notice--critical{background:var(--color-critical-5);border-color:var(--color-critical-10)}&.notice--success{background:var(--color-success-5);border-color:var(--color-success-10)}&.notice--info{background:var(--color-info-5);border-color:var(--color-info-10)}&.notice--caution{background:var(--color-caution-5);border-color:var(--color-caution-10)}&.notice--warning{background:var(--color-warning-5);border-color:var(--color-warning-10)}&.notice--error{background:var(--color-error-5);border-color:var(--color-error-10)}&.notice--danger{background:var(--color-danger-5);border-color:var(--color-danger-10)}}.popper-container{display:inline-flex;position:relative}.popper{background:var(--popper--background);border:0 var(--popper--border-style,solid) var(--popper--border-color);border-radius:var(--popper--border-radius,.125rem);border-width:var(--popper--border-width,1px);filter:var(--shadow-float-alt-1);inset:auto auto calc(100% + .25rem*var(--popper-space)) 50%;max-height:75vh;max-width:clamp(200px,100vw - 5rem,816px);min-width:5rem;padding:1rem;position:absolute;translate:-50%;width:max-content;z-index:var(--z-index-popover);&:before{content:"";height:calc(100% + 1rem*var(--popper-space));inset:calc(-.5rem*var(--popper-space)) auto auto calc(-.5rem*var(--popper-space));position:absolute;width:calc(100% + 1rem*var(--popper-space));z-index:-1}@media screen and (max-height:576px){&{max-height:calc(100vh - 5rem)}}}.popper--list{.popper__content{display:flex;flex-flow:column nowrap;margin:-1rem;padding:.25rem}}.popper__content{height:100%;max-height:inherit;overflow-x:hidden;overflow-y:auto}.popper__item{border:none;border-radius:unset;box-shadow:none;margin:0;outline:none;padding:.25rem 1rem;text-align:left;width:100%;:where(&){background:inherit}&:focus{box-shadow:none;text-decoration:underline 2px dashed var(--color-base-9)}&:focus,&:hover{scale:none}&:is(a,button,.btn):hover{filter:brightness(103%)}}.popper__line{z-index:1;&:before{border:0 var(--boundary--border-style) var(--boundary--border-color);border-width:0 0 1px;content:"";display:block;height:0;padding:0}}.popper--tl{inset:auto auto calc(100% + .25rem*var(--popper-space)) 0;translate:0}.popper--tr{inset:auto 0 calc(100% + .25rem*var(--popper-space)) auto;translate:0}.popper--bl{inset:calc(100% + .25rem*var(--popper-space)) auto auto 0;translate:0}.popper--bm{inset:calc(100% + .25rem*var(--popper-space)) auto auto 50%}.popper--br{inset:calc(100% + .25rem*var(--popper-space)) 0 auto auto;translate:0}.popper--lt{inset:0 calc(100% + .25rem*var(--popper-space)) auto auto;translate:0}.popper--lm{inset:50% calc(100% + .25rem*var(--popper-space)) auto auto;translate:0 -50%}.popper--lb{inset:auto calc(100% + .25rem*var(--popper-space)) 0 auto;translate:0}.popper--rt{inset:0 auto auto calc(100% + .25rem*var(--popper-space));translate:0}.popper--rm{inset:50% auto auto calc(100% + .25rem*var(--popper-space));translate:0 -50%}.popper--rb{inset:auto auto 0 calc(100% + .25rem*var(--popper-space));translate:0}.popper--pointer{&:after{border-bottom:.5rem solid var(--background-color);border-left:.5rem solid transparent;border-right:.5rem solid transparent;content:"";inset:auto auto -.375rem 50%;opacity:1;position:absolute;transform:rotate(180deg);translate:-50%}&:is(.popper--tl):after{inset:auto auto -.375rem .8rem;translate:0}&:is(.popper--tr):after{inset:auto .8rem -.375rem auto;translate:0}&:is(.popper--bl):after{inset:-.375rem auto auto .8rem;transform:rotate(0deg);translate:0}&:is(.popper--bm):after{inset:-.375rem auto auto 50%;transform:rotate(0deg);translate:-50%}&:is(.popper--br):after{inset:-.375rem .8rem auto auto;transform:rotate(0deg);translate:0}&:is(.popper--lt):after{inset:.8rem -.65rem auto auto;transform:rotate(90deg);translate:0}&:is(.popper--lm):after{inset:50% -.65rem auto auto;transform:rotate(90deg);translate:0 -50%}&:is(.popper--lb):after{inset:auto -.65rem .8rem auto;transform:rotate(90deg);translate:0}&:is(.popper--rt):after{inset:.8rem auto auto -.65rem;transform:rotate(-90deg);translate:0}&:is(.popper--rm):after{inset:50% auto auto -.65rem;transform:rotate(-90deg);translate:0 -50%}&:is(.popper--rb):after{inset:auto auto .8rem -.65rem;transform:rotate(-90deg);translate:0}}.popper{display:none;opacity:0;transform:translateY(calc(.25rem*var(--popper-space)));transition:display allow-discrete .2s,opacity .2s ease-in-out,transform .2s ease-in-out;&:is(.popper--bl,.popper--bm,.popper--br){transform:translateY(calc(-.25rem*var(--popper-space)))}&:is(.popper--lt,.popper--lm,.popper--lb){transform:translateX(calc(.25rem*var(--popper-space)))}&:is(.popper--rt,.popper--rm,.popper--rb){transform:translateX(calc(-.25rem*var(--popper-space)))}&:focus,&:focus-within,&:hover,&[data-popper-active=true i],:has(+.popper--focus):focus+&,:has(+.popper--hover):hover+&{display:block;opacity:1;transform:translateY(0);@starting-style{opacity:0;transform:translateY(calc(.25rem*var(--popper-space)));&:is(.popper--bl,.popper--bm,.popper--br){transform:translateY(calc(-.25rem*var(--popper-space)))}&:is(.popper--lt,.popper--lm,.popper--lb){transform:translateX(calc(.25rem*var(--popper-space)))}&:is(.popper--rt,.popper--rm,.popper--rb){transform:translateX(calc(-.25rem*var(--popper-space)))}}}}.panel{display:flex;flex-flow:column nowrap;gap:.5rem}.panel,.panel__body,.panel__header{padding:.5rem}.panel__body{overflow:auto}:where(.panel__header,.panel__body)>*{margin:unset}.floater{height:auto;max-width:clamp(280px,calc(100% - 2rem),640px);min-width:280px;position:fixed;width:max-content;z-index:var(--z-index-fixed);@media screen and (max-height:576px){&{max-height:calc(100% - 2rem)}}@media screen and (min-height:576px){&{max-height:80vh}}@media screen and (max-width:576px){&{max-width:100%}}}.floater--top{inset:0 50% auto;transform:translate(-50%)}.floater--top-left{inset:0 auto auto 0;transform:none}.floater--top-right{inset:0 0 auto auto;transform:none}.floater--bottom{inset:auto 50% 0;transform:translate(-50%)}.floater--bottom-right{inset:auto 0 0 auto;transform:none}.floater--bottom-left{inset:auto auto 0 0;transform:none}@media screen and (max-width:816px){.floater--top,.floater--top-left,.floater--top-right{inset:0 50% auto;transform:translate(-50%)}.floater--bottom,.floater--bottom-left,.floater--bottom-right{inset:auto 50% 0;transform:translate(-50%)}}.floater--md{height:clamp(13rem,100vh - 2rem,474px);width:clamp(280px,100vw - 2rem,610px)}.floater--lg,.floater--md{max-height:revert-layer;max-width:revert-layer}.floater--lg{height:clamp(13rem,100vh - 2rem,902px);width:clamp(280px,100vw - 2rem,1160px)}.floater--fluid{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);max-width:revert-layer}.floater:where([popover]){display:block;inset:0;min-width:auto;opacity:1;pointer-events:auto;position:fixed;transition:transform .35s ease-in-out,display allow-discrete .35s;z-index:1;&:not([popover]:popover-open){box-shadow:none;height:100%;max-height:unset;max-width:unset;overflow:clip;position:relative;transform:translate(-50%,-50%);translate:50% 50%;width:auto;.active-visible{opacity:0;overflow:clip;position:absolute}}}.floater[popover]:popover-open{inset:50% auto auto 50%;position:fixed;transform:translate(-50%,-50%) scale(1.01);.active-invisible{opacity:0;overflow:clip;position:absolute}}.appear{display:grid;grid:0fr/100%;max-height:40vh;transition:grid .35s ease-in-out,visibility .35s ease-in-out;visibility:collapse;&:has(>:where([data-appear-handler]:checked)),&:where([data-appear-active=true i]){grid:1fr/100%;visibility:visible;.appear__content{overflow:auto;scrollbar-width:auto}}}.appear-aside{flex:1 1 auto}.appear__overflow{overflow:hidden}.appear__content{height:100%;overflow:clip;scrollbar-width:none;transition:scrollbar-width allow-discrete 1.5s}.appear__toggle{inset:0;position:absolute;z-index:-1}.appear--right{grid:100%/auto 0fr;max-height:none;max-width:40vw;[data-appear-handler]{position:static}&:has(>[data-appear-handler]:checked),&:where([data-appear-active=true i]){grid:100%/auto 1fr}}.appear--bottom{grid:auto 0fr/100%;[data-appear-handler]{position:static}&:has(>[data-appear-handler]:checked),&:where([data-appear-active=true i]){grid:auto 1fr/100%}}.appear--left{grid:100%/0fr;max-height:none;max-width:40vw;&:has(>[data-appear-handler]:checked),&:where([data-appear-active=true i]){grid:100%/1fr}}.appear--fix{grid:0/100%;max-height:none;&:has(>[data-appear-handler]:checked),&:where([data-appear-active=true i]){grid:var(--appear-size) /100%}&:is(.appear--right){grid:100%/auto 0;max-width:none;.appear__content{height:100%;width:var(--appear-size)}&:has(>[data-appear-handler]:checked),&:where([data-appear-active=true i]){grid:100%/auto var(--appear-size)}}&:is(.appear--bottom){grid:auto 0/100%;&:has(>[data-appear-handler]:checked),&:where([data-appear-active=true i]){grid:auto var(--appear-size) /100%}}&:is(.appear--left){grid:100%/0;max-width:none;.appear__content{height:100%;width:var(--appear-size)}&:has(>[data-appear-handler]:checked),&:where([data-appear-active=true i]){grid:100%/var(--appear-size)}}}.appear--offcanvas{backdrop-filter:blur(1px);background:var(--backdrop--background);display:initial;inset:0;max-height:none;max-width:none;position:fixed;transition:visibility .35s ease-in-out;z-index:var(--z-index-offcanvas);.appear__content{background:var(--appear--offcanvas_-appear__content--background);box-shadow:var(--shadow-float);height:auto;max-height:40vh;min-height:50px;position:absolute;transition:translate .35s ease-in-out;translate:0 -10%;width:100%}&:has(>[data-appear-handler]:checked),&:where([data-appear-active=true i]){visibility:visible;.appear__content{translate:0}}&:is(.appear--right) .appear__content{height:100%;inset:0 0 0 auto;max-height:100%;max-width:40vw;min-width:275px;translate:100%;width:auto}&:is(.appear--bottom) .appear__content{inset:auto 0 0 0;translate:0 100%}&:is(.appear--left) .appear__content{height:100%;inset:0 auto 0 0;max-height:100%;max-width:40vw;min-width:275px;translate:-10%;width:auto}&:is(.appear--fix){.appear__content{height:var(--appear-size);max-height:none;max-width:none;min-height:auto;min-width:auto}&:is(.appear--right) .appear__content{height:100%;width:var(--appear-size)}&:is(.appear--bottom) .appear__content{height:var(--appear-size)}&:is(.appear--left) .appear__content{height:100%;width:var(--appear-size)}}}.appear--no-backdrop{inset:0 0 auto 0;&:is(.appear--right){inset:0 0 0 auto}&:is(.appear--bottom){inset:auto 0 0 0}&:is(.appear--left){inset:0 auto 0 0}}html:has(:where(.appear--offcanvas,.appear--offcanvas-vsm,.appear--offcanvas-vmd,.appear--offcanvas-vlg):not(.appear--no-backdrop)>[data-appear-handler]:checked,.appear:where([data-appear-active=true i]):not(.appear--no-backdrop)){overflow:hidden}.accordions{background:var(--accordions--background);border-radius:.125rem;display:flex;height:var(--accordions--height);margin:0 0 1rem}.accordion{border:0 var(--accordion--border-style,solid) var(--accordion--border-color);display:flex;flex:0;min-width:min-content;transition:flex-basis .35s ease-in-out;&:first-child{border-bottom-left-radius:inherit;border-top-left-radius:inherit;border-width:var(--accordion-first-child--border-width,1px 0 1px 1px)}&:last-child{border-bottom-right-radius:inherit;border-top-right-radius:inherit;border-width:var(--accordion-last-child--border-width,1px 1px 1px 0)}&:not(:first-child,:last-child){border-width:var(--accordion--border-width,1px 1px 1px 1px)}&:has(>.accordion__header [data-accordion-select-handler]:checked),&:where([data-accordion-active=true i]){flex:1 1 100%;.accordion__content{overflow:auto;scrollbar-width:auto}}&:has(>.accordion__header [type=checkbox]){transition:flex-grow .35s ease-in-out,flex-basis .35s ease-in-out}}.accordion__header{align-items:baseline;background:var(--accordion__header--background);border:0 var(--accordion__header--border-style,solid) var(--accordion__header--border-color);border-width:0 1px 0 0;color:var(--accordion__header--color,revert-layer);cursor:pointer;display:flex;justify-content:space-between;margin:0 -1px 0 0;padding:1rem .5em;position:relative;writing-mode:tb;:where(&:focus,&:focus-within){text-decoration:underline 2px dashed var(--color-base-9)}>.visual-indicator{transition:transform .35s ease-in-out}&:has([data-accordion-select-handler]:checked)>.visual-indicator{transform:scaleX(-1)}}.accordion__body{background:var(--accordion__body--background,initial);color:var(--accordion__body--color,revert-layer);display:flex;flex:1 1 100%}.accordion__overflow{overflow:hidden;position:relative;width:100%}.accordion__content{inset:0;overflow:clip;overscroll-behavior:contain;padding:1rem;position:absolute;scrollbar-width:none;transition:scrollbar-width allow-discrete 1.5s}.accordions--vertical{flex-flow:column nowrap;>.accordion{flex-flow:column nowrap;min-width:auto;transition:none;&:first-child{border-radius:unset;border-bottom-left-radius:inherit;border-top-left-radius:inherit;border-width:var(--accordion-first-child--border-width,1px 1px 0 1px)}&:last-child{border-radius:unset;border-bottom-right-radius:inherit;border-top-right-radius:inherit;border-width:var(--accordion-last-child--border-width,0 1px 1px 1px)}&:not(:first-child,:last-child){border-width:var(--accordion--border-width,1px 1px 1px 1px)}}.accordion__header{border-width:0 0 1px;margin:0 0 -1px;padding:.5rem 1em;writing-mode:initial;.visual-indicator{transform:rotate(90deg)}&:has([data-accordion-select-handler]:checked) .visual-indicator{transform:rotate(90deg) scaleX(-1)}}.accordion__body{display:grid;grid:0fr/auto;transition:grid .35s ease-in-out,visibility .35s ease-in-out;visibility:hidden;.accordion:has(>.accordion__header [data-accordion-select-handler]:checked)>&{grid:1fr/auto;visibility:visible}}&.accordio