@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
1 lines • 133 kB
CSS
@layer base, ui;:root{--font-style:normal;--font-variant:normal;--font-weight:300;--font-stretch:normal;--font-size:16px;--line-height:1.5;--font-family:Lato,"Helvetica Neue",sans-serif;--letter-spacing:0.06em;--accent-color:oklch(0.59 0.11 281.84);--font-color:oklch(0 0 0);--font-color:oklch(0.23 0.04 280.81);--font-color-alt-1:oklch(0.44 0.02 284.16);--font-color-alt-1:oklch(0.34 0.02 283.59);--font-color-alt-2:oklch(0.6 0.02 285.26);--font-color-alt-2:oklch(0.49 0.02 283.94);--background-color:oklch(0.98 0 0);--background-color-text-alt-1:oklch(0.36 0.02 285.26);--background-color-text:oklch(0.95 0.01 285.37);--background-color-clickable:oklch(0.96 0.01 285.53);--transparent-color:oklch(from var(--accent-color) l c h/.15);--href--color:oklch(0.56 0.22 276.32);--href--visited-color:oklch(0.42 0.13 279.17);--shadow-float:0 3px 10px 0 var(--transparent-color);--shadow-clickable:0 2px 2px 0 var(--transparent-color);--focus-outline:0.25rem solid var(--transparent-color);--focus--box-shadow:0 0 0 0.25rem var(--transparent-color);--border-color-control:oklch(0.75 0.02 285.18);--boundary--border-width:1px;--boundary--border-style:solid;--boundary--border-color:oklch(0.82 0.02 285.18);--h--font-family:Montserrat,sans-serif;--h--font-weight:500;--h--line-height:1;--h--letter-spacing:-0.016em;--h--color:var(--font-color-alt-1);--small-header--font-weight:500;--backdrop--background:oklch(0.34 0.03 284.04/0.9);--dialog--border-color:var(--boundary--border-color);--blockquote--border-width:0 0 0 4px;--blockquote--border-color:var(--boundary--border-color);--blockquote__footer--color:var(--font-color-alt-2);--blockquote__footer--margin:1rem 0 0;--pre--color:var(--font-color-alt-1);--pre--background:var(--background-color-text);--cks--font-family:"Sometype Mono",monospace,monospace;--cks--font-size:1.125rem;--cks--font-weight:400;--code--color:var(--font-color);--code--background:oklch(from var(--background-color-text) .9 c h/.4);--kbd--color:#fff;--kbd--background:var(--background-color-text-alt-1);--kbd--border-radius:3px;--kbd_-kbd--border-style:solid;--kbd_-kbd--border-color:var(--boundary--border-color);--kbd_-kbd--border-width:1px 2px 3px 1px;--kbd_-kbd--padding:0 0.5rem 0.25rem .25rem;--kbd__kbd--font-weight:400;--kbd__kbd--color:var(--font-color);--controls--color:var(--font-color);--controls--border-width:1px;--controls--border-style:solid;--controls--border-color:var(--border-color-control);--controls--border-radius:0.125em;--controls--min-height:1.75rem;--controls--padding:0.125em 0.25em 0.25em;--input--background:#fff;--btn--font-weight:400;--btn--font-size:var(--font-size);--btn--line-height:1.5;--btn--padding:.2lh .75lh .25lh;--moz-input--padding:0.125em 0.25em 0.25em;--moz-input--select-padding:0.125em 0.25em 0.25em;--moz-btn-padding:.2lh .75lh .25lh;--elements-block-level-space:1rem;--color-base-white:#fff;--color-base-1:oklch(0.99 0 0);--color-base-2:oklch(0.99 0 0);--color-base-5:oklch(0.98 0 0);--color-base-6:oklch(0.96 0.02 285.26);--color-base-7:oklch(0.93 0.02 285.26);--color-base-8:oklch(0.9 0.02 285.26);--color-base-9:oklch(0.87 0.02 285.26);--color-base-10:oklch(0.77 0.02 285.26);--color-base-20:oklch(0.67 0.02 285.26);--color-base-30:oklch(0.57 0.02 285.26);--color-base-40:oklch(0.47 0.02 285.26);--color-base-50:oklch(0.36 0.02 285.26);--color-base-60:oklch(0.31 0.02 285.26);--color-base-70:oklch(0.26 0.02 285.26);--color-base-80:oklch(0.21 0.02 285.26);--color-base-90:oklch(0.16 0.02 285.26);--color-low-5:oklch(0.97 0.06 129.67);--color-low-10:oklch(0.96 0.1 134.3);--color-low-20:oklch(0.94 0.14 134.71);--color-low-30:oklch(0.91 0.13 133.87);--color-low-40:oklch(0.86 0.15 134.24);--color-low-50:oklch(0.58 0.19 135.24);--color-low-60:oklch(0.51 0.19 135.24);--color-low-70:oklch(0.46 0.19 135.24);--color-low-80:oklch(0.39 0.19 135.24);--color-low-90:oklch(0.19 0.19 135.24);--color-normal-5:oklch(0.98 0.08 107.75);--color-normal-10:oklch(0.96 0.1 106.96);--color-normal-20:oklch(0.93 0.11 107.32);--color-normal-30:oklch(0.91 0.14 107.68);--color-normal-40:oklch(0.86 0.15 107.93);--color-normal-50:oklch(0.58 0.15 108.19);--color-normal-60:oklch(0.5 0.15 108.19);--color-normal-70:oklch(0.44 0.15 108.19);--color-normal-80:oklch(0.37 0.15 108.19);--color-normal-90:oklch(0.2 0.15 108.19);--color-important-5:oklch(0.95 0.02 51.36);--color-important-10:oklch(0.95 0.03 51.33);--color-important-20:oklch(0.94 0.04 51.31);--color-important-30:oklch(0.91 0.06 51.27);--color-important-40:oklch(0.86 0.07 51.23);--color-important-50:oklch(0.61 0.13 50.75);--color-important-60:oklch(0.54 0.13 50.75);--color-important-70:oklch(0.49 0.13 50.75);--color-important-80:oklch(0.42 0.13 50.75);--color-important-90:oklch(0.29 0.13 50.75);--color-critical-5:oklch(0.97 0.03 329.25);--color-critical-10:oklch(0.96 0.04 329.32);--color-critical-20:oklch(0.95 0.06 329.46);--color-critical-30:oklch(0.92 0.09 329.69);--color-critical-40:oklch(0.89 0.13 330.04);--color-critical-50:oklch(0.63 0.18 335.23);--color-critical-60:oklch(0.57 0.18 335.16);--color-critical-70:oklch(0.52 0.18 335.16);--color-critical-80:oklch(0.46 0.18 335.16);--color-critical-90:oklch(0.23 0.22 335.7);--color-info-5:oklch(0.99 0.04 177.23);--color-info-10:oklch(0.94 0.04 178.96);--color-info-20:oklch(0.93 0.06 176.76);--color-info-30:oklch(0.9 0.07 176.68);--color-info-40:oklch(0.86 0.1 175.98);--color-info-50:oklch(0.57 0.09 175.98);--color-info-60:oklch(0.51 0.09 175.98);--color-info-70:oklch(0.47 0.09 175.98);--color-info-80:oklch(0.38 0.09 175.98);--color-info-90:oklch(0.17 0.09 175.98);--color-success-5:oklch(0.97 0.06 129.67);--color-success-10:oklch(0.96 0.1 134.3);--color-success-20:oklch(0.94 0.14 134.71);--color-success-30:oklch(0.91 0.13 133.87);--color-success-40:oklch(0.86 0.15 134.24);--color-success-50:oklch(0.58 0.19 135.24);--color-success-60:oklch(0.51 0.19 135.24);--color-success-70:oklch(0.46 0.19 135.24);--color-success-80:oklch(0.39 0.19 135.24);--color-success-90:oklch(0.19 0.19 135.24);--color-caution-5:oklch(0.98 0.08 107.75);--color-caution-10:oklch(0.96 0.1 106.96);--color-caution-20:oklch(0.93 0.11 107.32);--color-caution-30:oklch(0.91 0.14 107.68);--color-caution-40:oklch(0.86 0.15 107.93);--color-caution-50:oklch(0.58 0.15 108.19);--color-caution-60:oklch(0.5 0.15 108.19);--color-caution-70:oklch(0.44 0.15 108.19);--color-caution-80:oklch(0.37 0.15 108.19);--color-caution-90:oklch(0.2 0.15 108.19);--color-warning-5:oklch(0.95 0.02 51.36);--color-warning-10:oklch(0.95 0.03 51.33);--color-warning-20:oklch(0.94 0.04 51.31);--color-warning-30:oklch(0.91 0.06 51.27);--color-warning-40:oklch(0.86 0.07 51.23);--color-warning-50:oklch(0.61 0.13 50.75);--color-warning-60:oklch(0.54 0.13 50.75);--color-warning-70:oklch(0.49 0.13 50.75);--color-warning-80:oklch(0.42 0.13 50.75);--color-warning-90:oklch(0.29 0.13 50.75);--color-error-5:oklch(0.97 0.03 329.25);--color-error-10:oklch(0.96 0.04 329.32);--color-error-20:oklch(0.95 0.06 329.46);--color-error-30:oklch(0.92 0.09 329.69);--color-error-40:oklch(0.89 0.13 330.04);--color-error-50:oklch(0.63 0.18 335.23);--color-error-60:oklch(0.57 0.18 335.16);--color-error-70:oklch(0.52 0.18 335.16);--color-error-80:oklch(0.46 0.18 335.16);--color-error-90:oklch(0.23 0.22 335.7);--color-danger-5:oklch(0.93 0.04 9.18);--color-danger-10:oklch(0.91 0.06 10.23);--color-danger-20:oklch(0.99 0.23 17.23);--color-danger-30:oklch(0.91 0.23 17.23);--color-danger-40:oklch(0.83 0.23 17.23);--color-danger-50:oklch(0.7 0.23 17.23);--color-danger-60:oklch(0.64 0.23 17.23);--color-danger-70:oklch(0.61 0.23 17.23);--color-danger-80:oklch(0.54 0.21 16.44);--color-danger-90:oklch(0.22 0.23 17.23);--space-distance-1:1rem;--space-distance-2:1.25rem;--space-distance-3:1.5rem;--space-distance-4:1.75rem;--space-distance-5:2rem;--space-group-1:.125rem;--space-group-2:.25rem;--space-group-3:.5rem;--space-group-4:.75rem;--space-group-5:1rem;--z-index-layover:900;--z-index-dropdown:1000;--z-index-sticky:1020;--z-index-fixed:1030;--z-index-offcanvas-backdrop:1040;--z-index-offcanvas:1045;--z-index-modal-backdrop:1050;--z-index-modal:1055;--z-index-popover:1070;--z-index-tooltip:1080;--background-color-off:oklch(0.9 0.02 285.26);--background-color-active:oklch(0.97 0.01 285.51);--shadow-float-alt-1:drop-shadow(0 2px 2px var(--transparent-color));--shadow-border:drop-shadow(0 1px 1px var(--transparent-color));--indicator-dimension:1em;--badge--color:var(--color-base-50);--badge--background:var(--background-color-text);--badge--border-color:var(--boundary--border-color);--btn--icon-font-size:var(--btn--font-size);--as-btn--padding:.21lh 1em .26lh;--as-btn--padding:.2lh .75lh .25lh;--toggle-size:1;--divider--background:var(--background-color);--navbar--background:var(--background-color);--nav__nav--background:var(--background-color);--navbar--breadcrumb-gap:0 1.5rem;--step__body--color:var(--font-color-alt-2);--step__indicator--border-color:var(--background-color);--tabs__nav--border-color:var(--boundary--border-color);--tabs__content--background:var(--background-color);--tab__nav--active--background:var(--background-color);--notice--background-color:var(--background-color);--notice--border-color:var(--boundary--border-color);--popper-space:1;--popper--background:var(--background-color);--popper--border-color:var(--boundary--border-color);--appear-size:300px;--appear--offcanvas_-appear__content--background:var(--background-color);--accordions--height:290px;--accordions--background:var(--background-color);--accordion--border-color:var(--boundary--border-color);--accordion__header--background:var(--background-color-clickable);--accordion__header--border-color:var(--boundary--border-color);--card--background:var(--background-color);--cards--slide--height:auto;--slide__indicator-item--border-color:var(--boundary--border-color);--slide__indicator-item--active--border-color:var(--boundary--border-color);--slide-prev-nav:attr(be-prev-nav,"<");--slide-next-nav:attr(be-next-nav,">")}@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}[popover],dialog,template{display:none}[popover],dialog{background:var(--background-color);border:unset;box-shadow:var(--shadow-float);color:inherit;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:before,.toggle__control>*{align-self:normal}.toggle__control:before{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{height:100%;object-fit:fill}.img--fit-fill,.video--fluid{display:block;width:100%}.video--fluid{height:auto;max-width:100%;overflow:hidden;padding:0;position:relative}.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{gap:1rem;grid:max-content min-content/auto-flow 200px;list-style:none}.step,.steps{display:grid}.step{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(.po