@bakung-ui/bakung.css/dist/bakung.css

HTML UI library pure CSS, lightweight, no javascript

@charset "UTF-8";
: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;
    --font:var(--font-style) var(--font-variant) var(--font-weight) var(--font-stretch) var(--font-size) / var(--line-height) var(--font-family);
    --letter-spacing:0.06em;
    
    --accent-color:oklch(0.59 0.11 281.84);
    
    --font-color:oklch(0.36 0.02 285.26);
    --font-color:oklch(0 0 0);
    --font-color-alt-1:oklch(0.44 0.02 284.16);
    --font-color-alt-2:oklch(0.6 0.02 285.26);
    
    --bg-color:oklch(0.98 0 0);
    --bg-color-text-alt-1:oklch(0.36 0.02 285.26);
    --bg-color-text:oklch(0.95 0.01 285.37);
    --bg-color-clickable:oklch(0.96 0.01 285.53);
    --border-color-control:oklch(0.75 0.02 285.18);
    --border-color-boundary:oklch(0.82 0.02 285.18);
    --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);
    
    --elements-block-level-space:1rem;
    
    --boundary--border:1px solid var(--border-color-boundary);
    
    --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);
    
    --backdrop--bg-color:var(--transparent-color);
    
    --dialog--height:auto;
    --dialog--width:auto;

    --blockquote--border-width:0 0 0 4px;
    --blockquote--border-style:solid;
    --blockquote--border-color:var(--border-color-boundary);
    --blockquote_--footer--color:var(--font-color-alt-2);
    --blockquote_--footer--margin:1rem 0 0;
    
    --pre--color:var(--font-color-alt-1);
    --pre--background:var(--bg-color-text);
    --pre--border:var(--boundary--border);
    --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(--pre--background) .9 c h / .8);

    --kbd--color:white;
    --kbd--background:var(--bg-color-text-alt-1);
    --kbd--border-radius:3px;
    
    --kbd_-kbd--font-weight:400;
    --kbd_-kbd--color:var(--font-color);
    --kbd_-kbd--border:solid var(--border-color-boundary);
    --kbd_-kbd--border-width:1px 2px 3px 1px;
    --kbd_-kbd--padding:0 0.5rem 0.25rem .25rem;

    --controls--font-color:var(--font-color);
    --controls--border:1px solid var(--border-color-control);
    --controls--min-height:1.75rem;
    --controls--padding:0.125em 0.25em 0.25em;

    --input--bg-color:white;
    
    --btn--font-weight:400;
    --btn--font-size:var(--font-size);
    --btn--line-height:1.5;
    --btn--font:normal var(--btn--font-weight) var(--btn--font-size) / var(--btn--line-height) var(--font-family);
    --btn--font-color:var(--font-color);
    --btn--bg-color:var(--bg-color-clickable);
    --btn--paddings:0.2lh 1.5em;
    --btn--paddings:.2lh .75lh .25lh;
    --btn--borders-width:1px;
    --btn--border-style:solid;
    --btn--border-color:var(--border-color-control);
    --btn--borders-radius:0.375em;
    --btn--borders-radius:0.25em;
    --btn--shadow:var(--shadow-clickable);

    --moz-input--paddings:0.125em 0.25em 0.25em;
    --moz-input--select-paddings:0.125em 0.25em 0.25em;
    --moz-btn-paddings:0.2lh 1.5em;
    --moz-btn-paddings:.2lh .75lh .25lh;
}
:root{
  --color-base-white:white;
  --color-base-1:oklch(0.99 0 0);
  --color-base-2:;
  --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);
  --bg-color-off:oklch(0.9 0.02 285.26);
  --bg-color-active:oklch(0.97 0.01 285.51);
  --border-color-light:oklch(0.9 0.02 285.18);
  --shadow-float-alt-1:drop-shadow(0 2px 2px var(--transparent-color));
  --shadow-border:drop-shadow(0 1px 1px var(--transparent-color));
  
  --as-btn--paddings:.21lh 1em .26lh;
  --as-btn--paddings:.2lh .75lh .25lh;
  --indicator-dimension:1em;
   --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;
  --avatar-size:1;
  --badge-size:1;
  --btn-size:1;
  --toggle-size:1;
  --popover-space:1;
  --visual-aside-size:1;
  --visual-indicator-size:1;
}
@layer base{
    *,
    *::before,
    *::after{
        box-sizing:border-box;
        margin:0;
        padding:0;
    }

    *:focus-visible{
        outline:var(--focus-outline);
    }

    *:where([type="radio"], [type="range"]):focus-visible{
        outline:none;
    }

    html{
        font:var(--font);
        -webkit-text-size-adjust:100%;
        &:has(dialog[open], dialog[popover]:popover-open){
            overflow:hidden;
        }
    }

    body{
        accent-color:var(--accent-color);
        color:var(--font-color);
        background:var(--bg-color);
        letter-spacing:var(--letter-spacing);
        line-height:var(--line-height);
    }

    main{
        display:block;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6{
        font:var(--h--font-weight) 4rem / var(--h--line-height) var(--h--font-family);
        
        letter-spacing:var(--h--letter-spacing);
        color:var(--h--color);
        
        margin:2.5rem 0 1.25rem;
    }

    h1{
        font-size:clamp(2.799rem, calc(2.799rem + 0.125vw), 3.799rem);
    }

    h2{
        font-size:clamp(2.332rem, calc(2.332rem + 0.125vw), 3.332rem);
    }

    h3{
        font-size:clamp(1.944rem, calc(1.944rem + 0.125vw), 2.944rem);
    }

    h4{
        font-size:clamp(1.62rem, calc(1.62rem + 0.125vw), 2.62rem);
    }

    h5{
        font-size:clamp(1.35rem, calc(1.35rem + 0.125vw), 2.35rem);
    }

    h6{
        font-size:clamp(1.125rem, calc(1.125rem + 0.125vw), 2.125rem);
    }

    blockquote{
        --data-quoter-marker:attr(data-quoter-marker, "\2014 \00A0");
        border-width:var(--blockquote--border-width);
        border-style:var(--blockquote--border-style);
        border-color:var(--blockquote--border-color);
        padding:1rem;
        margin:0 0 0 1rem;

        :where(&) footer{
            color:var(--blockquote_--footer--color);
            margin:var(--blockquote_--footer--margin);
        }

        :where(&) footer:before{
            content:var(--data-quoter-marker);
        }
    }

    ul,
    ol{
        padding:0 0 0 1.25em;
    }

    fieldset{
        border:var(--boundary--border);
        padding:0.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{
        font-weight:bold;
    }

    pre{
        color:var(--pre--color);
        background:var(--pre--background);
        border:var(--pre--border);
        padding:1rem;
        overflow:auto;
    }

    hr{
        border:var(--boundary--border);
        border-width:0 0 1px;
        box-sizing:content-box;

        color:inherit;
        overflow:visible;
        margin:0.5rem 0;
    }

    a{
        display:inline-block;

        &:focus,
        &:hover{
            filter:brightness(105%);
        }

        &:visited{
            color:var(--href--visited-color);
        }
    }

    [href]{
        color:var(--href--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:bold;
    }

    code,
    kbd,
    samp{
        font:normal var(--cks--font-weight) var(--cks--font-size) var(--cks--font-family);
        font-optical-sizing:auto;
    }

    code{
        color:var(--code--color);
        background:var(--code--background);
    }

    kbd{
        color:var(--kbd--color);
        background:var(--kbd--background);
        border-radius:var(--kbd--border-radius);

        &:has(kbd){
            background-color:unset;
            border:var(--kbd_-kbd--border);
            border-width:var(--kbd_-kbd--border-width);
            padding:var(--kbd_-kbd--padding);
        }
        
        kbd{
            font-weight:var(--kbd_-kbd--font-weight);
            
            color:var(--kbd_-kbd--color);
            background-color:unset;
        }
    }

    small{
        font-size:80%;
    }

    sub,
    sup{
        font-size:75%;
        line-height:0;
        position:relative;
        vertical-align:baseline;
    }

    sub{
        bottom:-0.25em;
    }

    sup{
        top:-0.5em;
    }

    img{
        border:none;
        
        max-height:90vh;
        max-width:90vw;
        
        display:inline-block;
    }
    
    figure{
        :where(&) img{
            margin:auto auto 0.5rem;
            line-height:1;
        }
    }
    
    figcaption{
        font-size:0.875em;
    }
    
    button,
    input,
    optgroup,
    option,
    select,
    textarea{
        color:var(--controls--font-color);
        font:var(--font-weight) var(--font-size)/var(--line-height) var(--font-family);
    }
    
    button,
    input,
    optgroup,
    select,
    textarea{
        border:var(--controls--border);
        margin:0;
        min-height:var(--controls--min-height);
        padding:var(--controls--padding);
    }
    
    button,
    input,
    select{
        text-transform:none;
    }

    button,
    [type="button"],
    [type="reset"],
    [type="submit"],
    .btn{
        cursor:pointer;

        font:var(--btn--font);
        line-height:var(--btn--line-height);
        color:var(--btn--font-color,);

        background-color:var(--btn--bg-color, revert);

        border:0 var(--btn--border-style) var(--btn--border-color, initial);
        border-width:var(--btn--borders-width, 1px);
        border-radius:var(--btn--borders-radius);

        box-shadow:var(--btn--shadow,);

        min-height:var(--controls--min-height);

        position:relative;

        padding:var(--btn--paddings);
        text-align:center;
        text-decoration:none;
        vertical-align:middle;

        overflow:visible;

        -webkit-appearance:button;
        -moz-appearance:button;
        appearance:button;

        -webkit-user-select:none;
        -moz-user-select:none;
        user-select:none;

        :where(&:active):not(:disabled){
            transform:translateY(1px);
            box-shadow:none;
        }

        &:disabled{
            color:revert;
        }

        &:focus-visible{
            box-shadow:none;
        }
    }

    input{
        overflow:visible;
    }

    [type="color"]{
        cursor:pointer;
        background:inherit;
        padding:0.25em;
        min-height:2rem;
    }

    [type="checkbox"],
    [type="radio"]{
        min-height:initial;
        padding:0;
    }

    [type="date"],
    [type="datetime-local"],
    [type="month"],
    [type="week"],
    [type="time"]{
        padding:0.125em 0.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 0.125em 0 0;
    }

    ::file-selector-button{
        -webkit-appearance:button;
        font:inherit;
        padding:0.125em 0.25em;
        margin:-1px 0.125em -1px -1px;
    }

    progress{
        display:inline-block;
        vertical-align:baseline;
    }

    select{
        min-width:1.7em;
    }

    select optgroup{
        border:none;
    }

    optgroup{
        color:var(--font-color-alt-1);
        padding:0.125em;
    }

    option{
        margin:0 0 0 .5em;
        padding:0.25em 0.25em 0.125em;
    }

    textarea{
        overflow:auto;
        vertical-align:top;
    }

    svg:not(:root){
        overflow:hidden;
    }

    table{
        text-indent:0;
        border-color:inherit;
    }
    
    th{
        color:var(--font-color-alt-1);
    }

    td{
        padding:0.5em;
    }
    dialog,
    [popover]{
        pointer-events:none;
        
        color:inherit;
        background:var(--bg-color);
        border:none;
        opacity:0;
        
        box-shadow:var(--shadow-float);
        
        position:fixed;
        inset:50% auto auto 50%;

        display:none;
        padding:1rem;

        text-align:initial;
        
        overflow:visible;

        z-index:1000;
        
        transform:translate(-50%, -50%) scale(0.85);
        transition:opacity 350ms ease-in-out, transform 350ms ease-in-out, overlay 350ms allow-discrete, display 350ms allow-discrete;
    }

    dialog{
        min-height:5rem;
        height:var(--dialog--height, auto);
        max-height:calc(100vh - 4rem);
        
        min-width:clamp(280px, 100vw - 4rem, 400px);
        width:var(--dialog--width, auto);
        max-width:clamp(280px, 100vw - 4rem, 1160px);
    }

    [popover]{
        height:var(--popover--height, auto);
        max-height:calc(100vh - 2rem);
        
        width:var(--popover--width, auto);
        max-width:clamp(4rem, 100vw - 2rem, 1200px);
    }

    dialog[open],
    [popover]:popover-open{
        pointer-events:initial;
        
        opacity:1;
        
        display:block;
        transform:translate(-50%, -50%) scale(1);
        @starting-style{
            opacity:0;
            transform:translate(-50%, -50%) scale(0.85);
        }
    }

    dialog::backdrop,
    [popover]::backdrop{
        background:var(--backdrop--bg-color);
        backdrop-filter:blur(0.5rem);
    }

    template{
        display:none;
    }

    input,
    textarea,
    select,
    [type="color"]{
        background:var(--input--bg-color);
    }

    [type="checkbox"],
    [type="file"],
    [type="radio"],
    [type="range"]{
        cursor:pointer;
    }

    [type="range"]:focus-visible::-webkit-slider-thumb{
        border-radius:50%;
        outline:var(--focus-outline);

        height:0.8em;
        width:0.8em;
    }

    [type="radio"]:focus-visible{
        box-shadow:var(--focus--box-shadow);
    }

    [disabled]{
        cursor:not-allowed;
        filter:contrast(.5);
    }

    [hidden]{
        display:none;
    }

    :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);
    }
    input,
    select,
    textarea,
    audio,
    video,
    details,
    button,
    [type="button"],
    [type="reset"],
    [type="submit"],
    .btn{
        margin:0.25rem;
    }

    @-moz-document url-prefix(){
        button,
        [type="button"],
        [type="reset"],
        [type="submit"],
        .btn{
            padding:var(--moz-btn-paddings);
        }

        textarea,
        [type="email"],
        [type="number"],
        [type="password"],
        [type="search"],
        [type="tel"],
        [type="text"],
        [type="url"],
        [type="date"],
        [type="datetime"],
        [type="datetime-local"],
        [type="month"],
        [type="week"],
        [type="time"]{
            padding:var(--moz-input--paddings);
        }

        select{
            min-width:1.5em;
            padding:var(--moz-input--select-paddings);

            &: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{
                cursor:pointer;
                background:var(--accent-color);
                border-radius:.25rem;
                height:.5rem;
            }
        }
    }
}
@layer base{
  
}
@layer ui{
  .avatar{
    font:300 calc(var(--avatar--font-size, .75rem) * var(--avatar-size)) var(--font-family);
    background:var(--color-base-6);

    border-radius:.125em;

    height:var(--avatar--height, 2em);
    width:var(--avatar--width, 2em);

    position:relative;

    display:inline-block;

    text-align:center;
  }

  [data-avatar-name]::before{
      content:attr(data-avatar-name);
    font-size:.5em;

    width:80%;

    position:absolute;
    inset:50% auto auto 50%;
    translate:-50% -50%;

    overflow:hidden;
  }
  
  .avatar__img{
    border-radius:inherit;

    height:100%;
    width:100%;

    position:absolute;
    inset:0 auto auto 0;

    z-index:1;
  }

  .avatar__figure:not(img){
    border-radius:inherit;

    position:absolute;
    inset:50% auto auto 50%;

    display:block;

    translate:-50% -50%;

    z-index:1;
  }

  .avatar__indicator{
    background:var(--bg-color-off);

    border-radius:50%;
    box-shadow:0 0 0 1px var(--color-base-5);

    height:var(--avatar__indicator--height, .65em);
    width:var(--avatar__indicator--width, .65em);

    position:absolute;
    inset:0 -.25em auto auto;

    text-align:center;

    z-index:1;
  }

  .avatar--circle{
    border-radius:50%;

    .avatar__indicator{
      inset:0 0 auto auto;

      translate:0;
    }
  }
  .badge{
      user-select:none;
      
    font:normal normal calc(var(--badge--font-size, .9rem) * var(--badge-size)) / 1 var(--font-family);

    color:var(--badge--color, var(--color-base-50));
    background:var(--badge--bg-color, var(--color-base-6));

    border:0 var(--badge--border-style, solid) var(--badge--border-color, var(--border-color-boundary));
      border-width:var(--badge--borders-width, 1px);
    border-radius:var(--badge--borders-radius, 1rem);

    white-space:nowrap;
    
    min-height:var(--badge--min-height, .75rem);
    min-width:var(--badge--min-width, .75rem);

    display:inline-block;
    margin:0;
    padding:.125rem .5rem .25rem;
    
    display:inline-flex;
    align-items:baseline;
    
    a&{
      text-decoration:none;
    }
  }

  .badge--accent{
    color:white;
    background:var(--accent-color);
    border-color:var(--accent-color);
  }

  .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{
    color:var(--color-danger-70);
    background:var(--color-danger-10);
    border-color:var(--color-danger-20);
  }
  .badge--chip{
    background:var(--bg-color);
    
    border:1px solid currentColor;
    border-radius:.25rem;

    transition:color 200ms ease-out, background 200ms ease-out, border 200ms 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{
    --btn--font-size:calc(var(--btn--font-size, 1rem) * var(--btn-size));

    transition:color 500ms ease-out, background 500ms ease-out, border 500ms ease-out;
  }

  .btn:not(:where(button, [type="button"], [type="reset"], [type="submit"])){
    padding:var(--as-btn--paddings, .21lh 1em .26lh);
  }

  .btn--icon{
    background:none;
    border:none;
    border-radius:50%;
    line-height:1;
    min-height:auto;

    margin:0;
    padding:0;

    box-shadow:none;

    &:focus,
    &:hover{
      scale:1.1;
    }

    &:hover{
      box-shadow:none;
    }
    
    .badge &{
      translate:0 .125em;
    }
  }

  .btn--accent, .btn--low, .btn--normal, .btn--important, .btn--critical, .btn--success, .btn--info, .btn--caution, .btn--warning, .btn--error, .btn--danger{
    &:not(:disabled):focus,
    &:not(:disabled):hover{
      filter:brightness(105%);
    }

    &:not(:disabled):active{
      filter:brightness(110%);
    }
  }

  .btn--accent{
    color:white;
    background:var(--accent-color);
    border-color:var(--accent-color);
  }

  .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]{
      user-select:none;

    display:inline-flex;
    align-items:flex-end;
    
    opacity:1;

    transition:opacity 350ms linear, display 350ms allow-discrete, scale 200ms linear;

    :where(&) > .btn{
      margin:auto auto auto .75em;
    }

    &:has([data-state-handler]:not(:checked)){
      scale:85%;
      opacity:0;
      display:none;
    }

    &:has([data-state-handler]:focus-visible){
        outline:var(--focus-outline);
    }
  }
  [be-switchable]{
      user-select:none;

    cursor:pointer;
    
    color:var(--font-color-alt-2);
    border-color:var(--border-color-control);

    :where(&) > .visual-indicator{
      margin:0 .5em 0 0;
      overflow:clip;
      
      transition:opacity 350ms ease-out, width 200ms ease-out, margin 200ms ease-out;
    }

    &:has([data-state-handler]:focus-visible){
        outline:var(--focus-outline);
    }
  }
  
  [selected], :has(> [data-state-handler]:checked){
    [be-switchable]:not(&){
      .active-visible{
        opacity:0;
        width:0;
        margin:0;
      }
    }
    
    [be-switchable]:is(&){
      color:white;
      background:var(--accent-color);
      border-color:var(--accent-color);
      
      .active-invisible{
        opacity:0;
        width:0;
        margin:0;
      }
    }
  }
  .toggle{
    display:inline-flex;
    align-items:baseline;

    &:has(:is([data-toggle-handler-on], [data-toggle-handler-off-on]):not(:checked)) .active-visible,
    &:has([data-toggle-handler-off]:not(:checked)) .active-invisible{
      display:none;
    }
  }

  .toggle__control{
    --the-size:var(--toggle-size, 1);
    align-self:center;

    border:none;
    height:calc(.75em * var(--the-size));
    width:calc(1.5em * var(--the-size));

    position:relative;

    display:flex;
    margin:0 .5em;
    padding:0;


    & > label{
      cursor:pointer;

      height:inherit;
      width:inherit;

      position:absolute;

      display:block;

      z-index:1;

      &:has(:is([data-toggle-handler-off], [data-toggle-handler-on]):checked){
        opacity:0;
        height: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{
      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;
    }

    &::before,
    &::after{
      content:"";

      position:absolute;
      display:block;
    }
    &::before{
      background:var(--bg-color-off);
      border:var(--controls--border);
      border-radius:calc(1em * var(--the-size));

      height:calc(.5em * var(--the-size));
      width:100%;
      transition:background 200ms ease-in-out;

      transform:translate(0, 25%);
    }
    &::after{
      background:var(--bg-color-clickable);

      border:var(--controls--border);
      border-radius:50%;
      box-shadow:none;

      height:calc(.75em * var(--the-size));
      width:calc(.75em * var(--the-size));

      position:absolute;
      inset:0 calc(100% - calc(.75em * var(--the-size))) auto auto;

      transition:inset 200ms ease-in-out;
    }
  }

  .toggle__control:has(:is([data-toggle-handler-on], [data-toggle-handler-off-on]):checked),
  .toggle:is(.toggle--mutual) .toggle__control{
    &::before{
      background:var(--color-base-5);
    }

    &::after{
      background:var(--accent-color);
    }
  }

  .toggle--vertical{
    display:inline-flex;
    flex-flow:column-reverse;

    > .toggle__control{
      margin:.5em 0;
      transform:rotate(270deg);
    }
  }
  .divider{
    align-self:stretch;

    border-color:var(--border-color-boundary);
    margin:.75rem .5rem;

    position:relative;
    inset:0;

    height:auto;
  }

    [be-divider-caption]::after{
      content:attr(be-divider-caption, 'or');

      font-size:.8rem;

      color:var(--font-color-alt-2);

      background:var(--bg-color);

      position:absolute;
      inset:auto auto auto 50%;

      padding:0;

      translate:-50% -50%;

      padding:.125rem .5rem;
    }

  .divider--vertical{
    border-width:0 1px 0 0;

    margin:.5rem 1rem;

    :where(&)[be-divider-caption]::after{
      inset:50% auto auto;
    }
  }
  .img--fluid{
    height:auto;
    width:100%;
    max-width:100%;
    max-width:-webkit-fill-available;
    display:block;
  }

  .img--thumbnail{
    background:var(--bg-color);

    border:var(--boundary--border);
    border-radius:0.375rem;

    height:auto;
    width:100%;
    max-width:100%;
    max-width:-webkit-fill-available;

    display:block;
    padding:0.25em;
  }

  .img--fit-cover{
    object-fit:cover;
  }

  .img--fit-contain{
    object-fit:contain;
  }
  .video--fluid{
    height:auto;
    width:100%;
    max-width:100%;

    position:relative;

    display:block;
    padding:0;

    overflow:hidden;
  }

  .video--fluid::before{
    content:none;
  }

  .video--scale-4-3::before{
    padding-bottom:75%;
  }

  .video--scale-1-1::before{
    padding-bottom:100%;
  }
  .navbar{
    display:flex;
    flex-flow:row wrap;

    align-items:center;

    & a{
      text-decoration:none;
    }

    > .nav > .nav__item > .nav{
      filter:var(--shadow-float-alt-1);
    }

    .navbar__toggle,
    .active-visible,
    .active-invisible{
      border-radius:50%;
      display:none;
      z-index:1;
    }
    &:has([data-toggle-navbar-handler]:checked){
      .active-invisible{
        display:none;
      }

      .active-visible{
        display:block;
      }
    }
  }

  .navbar__brand{
    display:inline-block;
  }

  .navbar__toggle{
    cursor:pointer;

    padding:.5rem;

    box-shadow:none;

    &:is(:focus, :focus-within){
      outline:var(--focus-outline);
    }
  }

  .nav{
    background:var(--bg-color);

    width:max-content;

    display:inline-flex;
    flex-flow:row wrap;

    margin:0;
    padding:0;

    list-style:none;

    .nav{
      background:var(--bg-color);

      position:absolute;
      inset:100% auto auto 0;

      display:none;
      flex-flow:column nowrap;

      margin:0;
      padding:0;

      transform:translateY(-.25rem);

      z-index:var(--z-index-popover);

      transition:display 200ms allow-discrete, transform 200ms ease-in-out;

      .nav{
        inset:0 auto auto 100%;
      }
    }
  }

  .nav__item-line::before{
    content:"";
    border:var(--boundary--border);
    border-width:0 0 1px;
    height:0;

    display:block;
    padding:0;
  }

  .nav__item{
    flex:0 0 auto;
    position:relative;
    padding:.5rem 1rem;

    &:has(.nav) > a::after{
      content:"";

      position:relative;
      display:inline-block;
      margin:auto auto auto 1em;

      border-right:.25em solid transparent;
      border-bottom:.25em solid currentColor;
      border-left:.25em solid transparent;

      inset:auto auto .25em auto;
      transition:transform 350ms ease-in-out;
    }

    &:hover{
      background-color:var(--bg-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 350ms 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{
    flex-flow:column;

    align-items:initial;

    .navbar__brand{
      padding:.5rem 1rem;
    }

    .nav{
      inset:0 auto auto 100%;
      flex-flow:column;
    }
  }

  .navbar--compact{
    justify-content:space-between;

    .navbar__toggle,
    .active-invisible{
      display:block;
    }

    > .nav{
      display:none;
      overflow:hidden;

      transition:display 200ms allow-discrete, margin-top 200ms ease-in-out;

      > .nav__item > .nav{
        filter:none;
      }

      > .nav__item:first-child{
        margin-top:-110%;

        transition:margin-top 350ms ease-in-out;
      }
    }

    .nav{
      background:transparent;

      position:static;
      width:100%;

      .nav{
        width:calc(100% + 2rem);
        display:none;
        margin:.5rem -1rem -.5rem -1rem;
        padding:0 0 0 1rem;

        transition:none;
      }
    }

    .nav__item{
      .nav__item:first-child{
        margin:0;
      }

      .nav__item:last-child{
        padding:.5rem 1rem;
      }
      
        &:hover{
          filter:brightness(98%);
        }
    }

    .nav__item:is(:focus, :focus-within),
    &:not(.navbar--no-hover) .nav__item:hover{
      > .nav{
        display:block;
      }
    }

    :where(&).navbar--compact-expand,
    &:has([data-toggle-navbar-handler]:checked){
      > .nav{
        display:block;

        > .nav__item:first-child{
          margin-top:0;
        
          @starting-style{
            margin-top:-110%;
          }
        }
      }
    }
  }
  .navbar--breadcrumb{
    --breadcrumb-divider:attr(be-breadcrumb-divider, '/');

    .navbar__brand::after,
    > .nav > .nav__item:not(:last-child)::after{
      content:var(--breadcrumb-divider);

      color:var(--font-color-alt-2);

      margin:0 .5em;
    }

    > .nav > .nav__item{
      padding:0;

      &:hover{
        background:inherit;
      }
    }
  }
  .steps{
    display:grid;
    grid:max-content min-content / auto-flow 200px;
    gap:1rem;

    list-style:none;
  }
  
  .step{
    grid-area:span 2 / auto;
    grid:subgrid [row-1-start] [row-1-end row-2-start] [row-2end] / subgrid [col];

    display:grid;

    text-align:center;
  }
  
  .step__header{
    display:flex;
    margin:.5rem;
  }

  .step__trail{
    position:relative;
    width:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    &::before,
    &::after{
      content:"";
      background:var(--bg-color-off);

      position:absolute;

      z-index:-1;
    }

    :where(.step:not(:last-child)) &::after{
      height:1px;
      width:calc(100% + 2rem);
      transform:translate(50%, 0);
    }
  }

  .step__indicator{
    background:var(--bg-color-off);

    border:0 var(--step__indicator--border-style) var(--step__indicator--border-color, var(--bg-color));
      border-width:var(--step__indicator--borders-width, 0);
    border-radius:50%;
    
    min-height:.5rem;
    min-width:.5rem;
    
    display:inline-flex;
    
    &:has(.visual-aside, .visual-indicator){
      padding:.25rem;
    }
    
    .visual-aside,
    .visual-indicator{
      translate:0;
    }
  }
  
  .step__body{
    color:var(--step__body--color, var(--font-color-alt-2));
    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{
      margin-top:.25lh;
      align-items:baseline;
      justify-content:center;

      .step:not(:last-child) &::after{
        height:calc(100% + 2.5rem);
        width:1px;
        transform:none;
      }
    }
  }
  
  .step--active{
    .step:has(~ &){
      .step__trail{
        &::before, &::after{
          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(--bg-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{
      &::before, &::after{
        background:var(--accent-color);
      }
    }
    
    .step__indicator:not(:has(.visual-aside, .visual-indicator)){
      background:var(--accent-color);

      min-height:.75rem;
      min-width:.75rem;
    }
    
    .step__body{
      color:revert-layer;
    }
  }
  .tabs{
    display:flex;
    flex-flow:column nowrap;
    filter:var(--shadow-border);
    margin:auto auto 1rem;
  }

  .tabs__nav{
    border:0 var(--tabs__nav--border-style, solid) var(--tabs__nav--border-color, var(--border-color-boundary));
      border-width:0;
    display:flex;
  }

  .tab__nav{
    cursor:pointer;

    background:var(--bg-color-clickable);

    border:var(--boundary--border);
    border-width:1px 1px 0;
    border-radius:.125rem .125rem 0 0;

    position:relative;

    padding:.25rem .75rem;

    box-shadow:none;
    
    &:is(&:focus, &:focus-within){
      text-decoration:underline 2px dashed var(--color-base-9);
      box-shadow:none;
      outline:none;
      scale:none;
    }
  }

  .tab__nav[data-tab-active],
  .tab__nav:has([data-tab-select-handler]:checked){
    background:var(--bg-color);

    z-index:100;
  }

  .tabs__content{
    background:var(--bg-color);

    border:var(--boundary--border);
      border-width:1px;

    position:relative;

    margin:-1px 0 0;
    padding:1rem;

    z-index:99;
  }

  .tab__content{
    border:0 solid var(--border-color-boundary);

    display:none;
  }

  .tab__content[data-tab-active],
  .tabs:has(.tab__nav:nth-child(1) [data-tab-select-handler]:checked)
    .tab__content:nth-child(1),
  .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),
  .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){
    display:block;
  }

  .tabs--right{
    flex-flow:row-reverse nowrap;

    .tabs__nav{
      flex:0 0 auto;
      flex-flow:column;
    }

    .tab__nav{
      border-width:1px 1px 0 0;

      border-radius:0 .125rem .125rem 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-width:0 0 1px 1px;

      border-radius:0 0 .125rem .125rem;

      &:last-child{
        border-width:0 1px 1px 1px;
      }
    }

    .tabs__content{
      flex:1 0 auto;
      margin:0 0 -1px 0;
    }
  }

  .tabs--left{
    flex-flow:row nowrap;

    .tabs__nav{
      flex:0 0 auto;
      flex-flow:column;
    }

    .tab__nav{
      border-width:1px 0 0 1px;

      border-radius:.125rem 0 0 .125rem;

      &:last-child{
        border-width:1px 0 1px 1px;
      }
    }

    .tabs__content{
      flex:1 0 auto;
      margin:0 0 0 -1px;
    }
  }
  [be-tooltip]{
    &::before{
      content:"";

      border-left:.4rem solid transparent;
      border-right:.4rem solid transparent;
      border-bottom:.4rem solid var(--bg-color-text);

      position:absolute;
      inset:0 auto auto 50%;

      opacity:0;

      transform:scaleY(-1) translateX(-50%);

      z-index:1;

      transition:opacity 200ms ease-in-out, inset 200ms ease-in-out;
    }

    &:is(.tooltip--active)::before,
    &:is(.tooltip--focus):focus::before,
    &:hover::before{
      inset:-.5rem auto auto 50%;

      opacity:1;
    }

    &::after{
      pointer-events:none;

      font-size:.7rem;
      color:revert-layer;

      background:var(--bg-color-text);

      border-radius:.125rem;

      opacity:0;

      max-width:clamp(200px, 100vw - 1.5rem, 50rem);

      position:absolute;
      inset:auto auto 100% 50%;

      display:block;
      overflow:hidden;
      padding:.25rem .5rem;

      content:attr(be-tooltip);
      white-space:pre;
      text-overflow:ellipsis;

      transform:translateX(-50%);
      z-index:var(--z-index-tooltip);

      transition:opacity 200ms ease-in-out, inset 200ms ease-in-out;
    }

    &:is(.tooltip--active)::after,
    &:is(.tooltip--focus):focus::after,
    &:hover::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%;
    }
    
    &:is(.tooltip--active)::before,
    &:is(.tooltip--focus):focus::before,
    &:hover::before{
      inset:50% auto auto 100%;
    }

    &::after{
      inset:50% auto auto 100%;

      transform:translateY(-50%);
    }

    &:is(.tooltip--active)::after,
    &:is(.tooltip--focus):focus::after,
    &:hover::after{
      inset:50% auto auto calc(100% + .55rem);
    }
  }

  .tooltip--bottom{
    &::before{
      inset:auto auto 0 50%;
      transform:rotate(0deg) translateX(-50%);
    }

    &:is(.tooltip--active)::before,
    &:is(.tooltip--focus):focus::before,
    &:hover::before{
      inset:auto auto -.5rem 50%;
    }

    &::after{
      inset:100% auto auto 50%;

      transform:translateX(-50%);
    }

    &:is(.tooltip--active)::after,
    &:is(.tooltip--focus):focus::after,
    &:hover::after{
      inset:calc(100% + .5rem) auto auto 50%;
    }
  }

  .tooltip--left{
    &::before{
      inset:50% calc(100% - .5rem) auto auto;
      transform:rotate(90deg);
      translate:0 -50%;
    }

    &:is(.tooltip--active)::before,
    &:is(.tooltip--focus):focus::before,
    &:hover::before{
      inset:50% 100% auto auto;
    }

    &::after{
      inset:50% 100% auto auto;
      transform:translateY(-50%);
    }
    
    &:is(.tooltip--active)::after,
    &:is(.tooltip--focus):focus::after,
    &:hover::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{
    color:var(--dialog--font-color, revert-layer);

    background:var(--dialog--bg-color, var(--bg-color));

    border:0 var(--dialog--border-style, solid) var(--dialog--border-color, var(--border-color-light));
      border-width:va