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

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

@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;
    }

    .toggle__control:after{
      
    }
  }
  .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,