@layer reset, frames, components, layouts, states, theme, forced, debug;

@layer reset {

    /*
        :: css-reset -> global items
    */

    * {
        /*base properties*/
        box-sizing: border-box;
        position: static;
        margin: 0;
        padding: 0;
        /*text properties*/
        direction: ltr;
        overflow-wrap: anywhere;
        text-decoration: none;
        word-spacing: normal;
        word-break: keep-all;
        word-wrap: break-word;
        font-family: monospace;
        letter-spacing: inherit;
        line-height: inherit;
        font-size-adjust: none;
        font-weight: lighter;
        font-size: inherit;
        color: inherit;
        /*design propreties*/
        border: 0;
        -webkit-tap-highlight-color: transparent;
        -webkit-focus-ring-color: transparent;
        text-rendering: optimizeSpeed;
        /* transition: font-size ease.25s; */
        text-rendering: optimizeSpeed;
    }

    *:not(button-item) {
        outline: none;
        outline-width: 0;
        outline-color: transparent;
    }

    *,
    *:hover,
    *:active,
    *:focus {
        outline-width: 0px;
        outline-color: transparent;
        -webkit-tap-highlight-color: transparent;
        -webkit-focus-ring-color: transparent;
    }

    *:not(html, body) {
        /*render animation*/
        backface-visibility: hidden;
        transform-style: flat;
        box-shadow: none;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0;
        margin-inline-end: 0;
    }

    /*
        :: css-reset -> main items
    */

    html {
        width: 100vw;
        height: 100vh;
        max-width: 100%;
        max-height: 100%;
        display: block;
        overflow:clip;
        z-index: 1;
    }

    body {
        justify-content: stretch;
        /* white-space: pre-line; */
        grid-auto-flow: row;
        align-content: stretch;
        align-items: stretch;
        justify-items: stretch;

        display: grid;
        /* align-items: center; */
        /* justify-content: stretch; */
        height: inherit;
        width: inherit;
        max-width: 100%;
        max-height: 100%;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        -webkit-touch-callout: none;
        touch-action: manipulation;
        /*white-space: pre-line;*/
        position: relative;
    }

    body,body:has( body-mainframe[axis="y"] ){
        overflow-y: scroll;
        overflow-x: clip;
    }
    body:has( body-mainframe[axis="x"] )  {
        overflow-y: clip;
        overflow-x: scroll;
    }

    style,
    script {
        width: 0;
        height: 0;
        overflow: hidden;
        display: none;
        position: absolute;
        z-index: 0;
    }

    div,
    main,
    nav,
    article,
    section,
    header,
    hgroup,
    footer,
    aside {
        display: block;
    }

    form,
    fieldset,
    details,
    summary {
        margin: 0;
        display: grid;
        align-items: start;
        max-width: 100%;
    }

    video,
    audio,
    canvas,
    iframe,
    frameset,
    noframes,
    embed,
    object /*define anytype of external resouces object data="xxx .html .mp4 .svg plug-in application"*/ {
        display: grid;
        align-items: center;
        align-items: stretch;
        background: inherit;
        overflow: hidden;
        width: 100%;
    }

    [draggable],
    [draggable] *:not(input),
    div-slot,
    div-slot *:not(input) {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

   hr, table, pre, code, output {
        page-break-after: always;
        break-after: always;
        break-before: always;
    }

    /*
        :: css-reset -> text resets
    */

    hr {
        display: block;
        background: lightgray;
        height: 0.1px;
    }

    br {
        /* display: none; */
        visibility: none;
        display: block;
        width: 100%;
    }

    :where(
        p, a, q,
        address,
        blockquote,
        figcaption,
        caption,
        li,
        dt, dd,
        th, td,
        h1, h2, h3, h4, h5, h6,
    ) br {
        display: block;
        page-break-after: always;
        break-after: always;
        break-before: always;
    }

    a,                      /*links*/
    i,em,                   /*italic*/
    caption,                /*ad image description*/
    cite,                   /*"defines the title of a creative work" || citation attribute url <p cite="url.com"></p>*/
    small,                  /*sub importance text*/
    big,                    /*W3C-OSOLETE*/
    ul,                     /*unorder list*/
    ol,                     /*ordered stepped list*/
    li,                     /*un/orderered list item*/
    dl,                     /*list of definitions*/
    dt,                     /*definition title*/
    dd                      /*definition data*/
    {
        display: inline;
        line-height: 85%;
    }

    p,                      /*paragraph*/
    h1,h2,h3,h4,h5,h6       /*titles*/
    {
        display: block;
        line-height: 85%;
        width: 100%;
    }

    pre,code                /*codes*/
    {
        display: block;
        width: 100%;
        page-break-after: always;
        break-after: always;
        break-before: always;
        line-height: 85%;
    }


    sup, sub,
    small, big,
    em, i,
    u,ins,
    q,
    s,del,
    b, mark, strong,
    var, samp, dfn, kbd
    {
        display: inline-flex;
        align-items: center;
        line-height: 85%;
    }

    span {
        display: inline-block;
        width: auto;
    }

    sup {
        font-size: .65rem;
        vertical-align: text-top;
    }

    sub {
        font-size: .65rem;
        vertical-align: text-bottom;
    }

    a {
        cursor: pointer;
        align-items: center;
    }

    b {
        font-weight: bold;
    }

    q::before {
        content: "";
    }

    q::after {
        content: "";
    }

    blockquote {
        margin: 0;
        position: relative;
        text-transform: uppercase;
        font-weight: 300;
        font-size: 120%;
        display: block;
    }

    blockquote cite {
        position: relative;
        display: block;
        font-size: 45%;
        line-height: 100%;
    }

    blockquote::before,
    blockquote::after {
        position: absolute;
        z-index: -1;
    }

    samp,var,kbd,dfn,mark {
        font-style: unset;
    }

    pre,samp,code,kbd,var,output {
        font-family: monospace;
        text-align: left;
        white-space: pre;
        word-spacing: normal;
        word-break: normal;
        word-wrap: normal;
        line-height: 2;
        tab-size: 2;
        hyphens: none;
        border: lightgray solid 0.1px;
    }

    /*
        :: css-reset -> texts -> tabels
    */

    table {
        display: table;
        border-collapse: collapse;
        width: 100%;
    }

    table caption{
        width: 100%;
        display: table-caption;
        padding: 10px;
        background: lightgray;
    }

    thead * {
        font-weight: bold;
        letter-spacing: 2px;
    }

    th,
    td {
        width: auto;
        display: table-cell;
        padding: 5px;
    }

    th {
        padding-bottom: var(--space-mini);
    }

    th > *,
    td > * {
        vertical-align: middle;
    }

    tfoot td:first-child {
        padding-top: var(--space-mini);
        padding-bottom: var(--space-mini);
    }

    tfoot * {
        font-size: 88%;
        font-weight: bolder;
        letter-spacing: 2px;
        font-style: oblique;
    }

    dl {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    dt {
        width: 20%;
        display: block;
    }

    dd {
        width: 80%;
        display: block;
    }

    /*
        :: css-reset -> image resets
    */

    svg,
    [src$=".svg"] {
        image-rendering: crisp-edges;
    }

    img,
    svg {
        display: grid;
        align-self: center;
        justify-self: center;
        line-height: 0;
    }


    img:not([class*=ratio]),
    image:not([class*=ratio]),
    svg:not([class*=ratio]) {
        max-width: 100%;
    }

    div>svg,
    div>img {
        width: 100%;
        overflow: hidden;
        height: auto;
    }

    p>img,
    a>img,
    q>img,
    h1>img,h2>img,h3>img,h4>img,h5>img,h6>img,
    small>img,big>img,
    caption>img {
        vertical-align: inherit;
    }

    figure,
    picture {
        /* display: flex;
        overflow: hidden;
        position: relative;
        align-items: center;
        justify-content: center;
        width: 100%; */
        display: grid;
        overflow: hidden;
        position: relative;
        align-items: stretch;
        justify-content: stretch;
        width: 100%;
        min-height: 100%;
    }

    figure img,
    figure svg,
    picture img, 
    picture svg {
        min-height: 100%;
        object-fit: cover;
        width: 100%;
        min-height: 100%;
    }

    /*
        :: native progress elements
    */

    meter,
    progress {
        width: 100%;
        display: flex;
        margin: 0;
    }

    /*
        :: native form controls
    */

    [type=text],
    [type=email],
    [type=search],
    [type=number],
    [type=password],
    [type=tel],
    [type=url],
    textarea {
        padding: 0;
        cursor: text;
        user-select: text;
        font-weight: lighter;
        visibility: visible;
        background: transparent;
        width: 100%;
    }

    label {
        cursor: default;
    }

    /*
        :: Dialogs
    */

    dialog {
        z-index: -1;
        position: fixed;
        margin: 0;
        border: 0;
        padding: 0;
        min-width: 350px;
        max-width: 100vw;
        max-height: 100vh;
        left: 50%;
        top: 50%;
        overflow: auto;
        transition: transform 150ms ease-in-out,
                    opacity 150ms ease-in-out,
                    display 150ms allow-discrete,
                    overlay 150ms allow-discrete;
    }

    dialog > div {
        width: 100%;
    }

    dialog > div > div:last-child {
        display: grid;
        grid-auto-flow: column;
        gap: 15px;
    }

    dialog:not([open]) {
        opacity: 0;
        transform: translate(-50%, -50%) scale(80%);
    }

    dialog[open] {
        z-index: 50000;
        opacity: 1;
        pointer-events: all;
        transform: translate(-50%, -50%) scale(100%);
    }

    @starting-style {

        dialog[open] {
            opacity: 0;
            transform: translate(-50%, -50%) scale(80%);
        }

    }

    @media (prefers-reduced-motion: reduce) {
        dialog {
            transition: none;
        }
    }

}

@layer frames {

    div-sticky[side] {
        display: unset;
        position: sticky;
        z-index: 20000;
        width: auto;
    }

    div-sticky[side="top"] {
        top: 0;
    }

    div-sticky[side="bottom"] {
        bottom: 0;
    }

    div-sticky[side="left"] {
        left: 0;
    }

    div-sticky[side="right"] {
        right: 0;
    }

    /* 
        :: tags
    */

    div-taglist:has(div-container) {
        display: grid;
        gap: attr(gap type(<length> | <percentage>), 0);
    }

    div-taglist:not(:has(div-container)) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: attr(gap type(<length> | <percentage>), 0);
    } 

    div-taglist > div-container,
    div-taglist > div-controller {
        display: flex;
        gap: inherit;
    }

    div-taglist > div-container {
        flex-wrap: wrap;
    }

    div-taglist div-controller>input:first-child {
        visibility: hidden;
        position: absolute;
        height: 0;
        width: 0;
    }

    div-taglist div-controller>button-item:last-child{
        width: 200px;
    }

    div-tag {
        display: flex;
        cursor:default;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        border: 1px dashed gray;
        background: lightgray;
    }

    div-tag::before {
        content: '#';
        line-height: 10px;
        width: 15px;
    }

    div-tag:has(a)::before {
        content: '☍';
    }
    
    div-taglist:has(div-controller) div-tag > button {
        cursor: pointer;
        line-height: 10px;
        margin-left: 10px;
        width: 15px;
        padding: 0;
        background: transparent;
    }

    div-taglist:has(div-controller) div-tag > button::before {
        content: '🗙';
    }

    


    /*
        :: list frames
    */

    div-panel {
        display: flex;
         flex-direction: column;
        width: 100%;
        border: 1px solid gray;
    }

    div-panel>div-headbar {
        position: relative;
        width: 100%;
        background: ligthgray;
        border-bottom: inherit;
    }

    div-panel>div-container {
        position: relative;
        width: 100%;
    }

    div-panel>div-statusbar {
        position: relative;
        width: 100%;
        background: ligthgray;
        border-top: inherit;
    }

    /*
        :: list frames
    */

    div-list {
        display: block;
    }

    div-list[axis=y] > ol,
    div-list[axis=y] > ul {
        display: flex;
        flex-flow: column nowrap;
        list-style-position: inside;

    }

    div-list[axis=x] > ol,
    div-list[axis=x] > ul {
        display: flex;
        flex-flow: row nowrap;
        list-style-position: inside;
    }

    div-list[mode="disc"] > ul > li,
    div-list[mode="disc"] > ol > li {
        display: list-item;
        list-style: disc;
        margin-left: 15px;
    }

    div-list[mode="dash"] > ul > li,
    div-list[mode="dash"] > ol > li,
    div-list[mode="custom"] > ul > li,
    div-list[mode="custom"] > ol > li {
        display: list-item;
    }

    div-list[mode="custom"] > ul > li,
    div-list[mode="custom"] > ol > li {
        list-style: none;
    }

    div-list[mode="dash"] > ul > li::marker,
    div-list[mode="dash"] > ol > li::marker {
        content: "- ";
    }

    /*
        :: article media
    */

    article-media {
        display: block;
    }

    article-media[side="left"] {
        float: left;
        padding: 0 1rem 1rem 0;
    }

    article-media[side="right"] {
        float: right;
        padding: 0 0 1rem 1rem;
    }

    article-media:is([side="left"], [side="right"]) ~ p {
        display: block;
        width: auto;
    }

    article-media[side="center"] {
        width: fit-content;
        margin: 0 auto;
        padding: 1rem 0 1rem;
    }

    article-media[side="wide"] {
        padding: 1rem 0 1rem;
        display: block;
        width: 100%;
    }

    article-media[side="wide"] > * {
        width: 100%;
        height: auto;
    }

    @media only screen and (min-width: 1920px) {
        picture > *.max {
            display: inline-block;
        }

        picture > *.medium {
            display: none;
        }

        picture > *.small {
            display: none;
        }

        figure > *.max {
            display: inline-block;
        }

        figure > *.medium {
            display: none;
        }

        figure > *.small {
            display: none;
        }
    }

    @media only screen and (min-width: 755px) and (max-width: 1920px) {
        picture > *.max {
            display: none;
        }

        picture > *.medium {
            display: inline-block;
        }

        picture > *.small {
            display: none;
        }

        figure > *.max {
            display: none;
        }

        figure > *.medium {
            display: inline-block;
        }

        figure > *.small {
            display: none;
        }
    }

    @media only screen and (max-width: 755px) {
        picture > *.max {
            display: none;
        }

        picture > *.medium {
            display: none;
        }

        picture > *.small {
            display: inline-block;
        }

        figure > *.max {
            display: none;
        }

        figure > *.medium {
            display: none;
        }

        figure > *.small {
            display: inline-block;
        }
    }


    article-index,
    article-index ol,
    article-index li{
        display: flex;
        flex-flow: column;
        position: relative;
    }

    article-index li ol {
        margin-left: 1rem;
    }
    
    article-index a {
        padding: .1rem 1rem;
    }

    article-index a.--active {
        font-weight: bold;
    }
    /* article-index li {
        margin-left: 10px;
    } */
/* 
    article-index ol:has(li>ol),
    article-index li>ol::before {
        content: ' ';
        display: block;
        left: 0px;
        border-left: 2px dashed gray;
        position: absolute;
        height: 85%;
        bottom: 5%;
    }
    

    article-index ol ol>li::before {
        content: ' ';
        display: block;
        left: -15px;
        top: 50%;
        border-top: 2px dashed gray;
        position: absolute;
        width: 10px;
    } */

    article-index li>a {
        width: 100%;
        display: flex;
    }

    article-index nav {
        position: relative;
    }

    /*
        :: icons
    */

    img-icon {
        display: inline-grid;
        position: relative;
        height: 100%;
        width: auto;
        aspect-ratio: 1 / 1;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    img-icon > * {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    img-icon::before {
        font-family: monospace;
        content: "\00a0";
        display: block;
        color: transparent;
        font-size: inherit;
        background: var(--src,attr(src url)) no-repeat center center;
        background-position: center;
        background-size: 100% auto;
        background-repeat: no-repeat;
        align-self: center;
        height: 100%;
        width: 100%;
    }

    /*
        :: body overlay
    */

    body-overlay {

        position: fixed;

        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: 0;

        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;

        z-index: -1;

    }

    body:has(
        div-modal:popover-open,
        dialog[open]
    )   body-overlay, 
        body-overlay.--active {
        z-index: 1000;
    }

    /*
        :: scroll boxes
    */

    div-scroll[axis~="x"] {
        position: static;
        display: grid;
        width: inherit;
        overflow-x: scroll;
        overflow-y: hidden;
        scroll-behavior: smooth;
    }

    div-scroll[axis~="y"] {
        position: static;
        display: block;
        height: inherit;
        width: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
        scroll-behavior: smooth;
    }

    div-scroll,
    .--no-scrollbar {
        scrollbar-width: none;       /* Firefox */
        -ms-overflow-style: none;    /* IE/Edge legacy */
    }

    div-scroll::-webkit-scrollbar,
    div-scroll::-webkit-scrollbar-track,
    div-scroll::-webkit-scrollbar-thumb,
    .--no-scrollbar::-webkit-scrollbar,
    .--no-scrollbar::-webkit-scrollbar-track,
    .--no-scrollbar::-webkit-scrollbar-thumb {
        width: 0 !important;        /* Rimuove lo spazio verticale */
        height: 0 !important;       /* Rimuove lo spazio orizzontale (la tua linea grigia) */
        background: transparent;     /* Rende invisibile qualsiasi residuo */
        display: none;              /* Fallback per vecchie versioni */
    }

    /*
        :: button frames
    */

    button-item::before{
        content: "\00a0";
        display: block;
        width: 0;
        min-height: 20px;
    }

    button-item {
        border: 1px solid lightgray;
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    button-item,
    button-item>*,
    button-item:focus,
    button-item:focus>* {
        user-select: none;
    }

    button-item>a,
    button-item>input,
    button-item>button,
    button-item>label,
    button-item>select {

        padding: inherit;
        z-index: 100;
        display: flex;
        flex-direction: row;
        height: inherit;
        align-items: center;
        justify-content: center;
        width: 100%;
        top:0;
        left:0;
        right:0;
        bottom:0;
        position: absolute;
        box-shadow:none;
        background: none;
        color: inherit;
        font-size:inherit;
        font-family:inherit;
        font-weight: lighter;
        line-height: 100%;
        letter-spacing:inherit;
        pointer-events: all;
        appearance: textfield;

    }

    
    
    button-item>input[type]{
        border-radius: inherit;
        background: inherit;
        padding: inherit;
        border: 0;
        margin: 0;
    }

    button-item>input[type=file]::file-selector-button {
        border-radius: inherit;
        background: inherit;
        border: inherit;
    }

    button-item textarea {
        position: relative;
        max-width: 100%;
        min-width: 100%;
        background: none;
        box-shadow:none;
        padding: unset;
        border:0;
        font-family:inherit;
        font-size:inherit;
        color: inherit;
        overflow-x: hidden;
        overflow-y: auto;
        vertical-align: top;
        text-align: left !important;
        width: 100%!important;
        max-width: 100%!important;
        min-width: 100%!important;
        height: auto;
        border: 0;
        background: transparent;
    }

    button-item select {
        cursor: pointer;
        position: absolute;
        padding: inherit;
        width: 100%;
    }

    button-item>input[type=submit],
    button-item>input[type=reset],
    button-item>button {
        cursor: pointer;
        font-weight: initial;
    }
    
    button-item ::file-selector-button {
        height: 100%;
        max-height: 100%;
        background-color: lightgray;
        border: 0;
        font-size: 1rem;
        cursor: pointer;
    }

    button-item label {
        cursor: default;
    }

    button-item:first-child text-icon{
        transform: translate(-100%, 0);
        left: -50%;
    }

    button-item:last-child text-icon{
        transform: translate(100%, 0);
        left: 50%;
    }


    button-item[align=left],
    button-item[align=left]>*{
        justify-content: flex-start;
        text-align: left;
    }

    button-item[align=right],
    button-item[align=right]>*{
        justify-content: flex-end;
        text-align: right;
    }

    button-group{
        display: flex;
    }
    /* 
        :: ratio boxes
    */

    div-ratio {
        display: flex;
        width: 100%;
        position: relative;
    }

    div-ratio > * {
        object-fit: cover;
        min-height: unset;
        max-width: initial;
        max-width: unset
    }

    div-ratio[mode="1/2"]>* {
        aspect-ratio: 1 / 2;
    }

    div-ratio[mode="1/1"]>* {
        aspect-ratio: 1 / 1;
    }

    div-ratio[mode="2/1"]>* {
        aspect-ratio: 2 / 1;
    }

    div-ratio[mode="21/9"]>* {
        aspect-ratio: 21 / 9;
    }

    div-ratio[mode="16/9"]>* {
        aspect-ratio: 16 / 9;
    }

    div-ratio[mode="9/16"]>* {
        aspect-ratio: 9 / 16;
    }

    div-ratio[mode="8/5"]>* {
        aspect-ratio: 8 / 5;
    }

    div-ratio[mode="3/2"]>* {
        aspect-ratio: 3 / 2;
    }

    div-ratio[mode="4/3"]>* {
        aspect-ratio: 4 / 3;
    }

    /*
        :: loadbar frame
    */

    div-loadbar {
        --progress: attr(state %, 0);
        --buffered: attr(buffered %, 0);
        display: flex;
        width: 100%;
        height: 15px;
        overflow: hidden;
        position: relative;
        background: whitesmoke;
        z-index: 1000;
    }

    div-loadbar[state=0] { --progress: 0 }      div-loadbar[buffered=0] { --buffered: 0 }
    div-loadbar[state=1] { --progress: 1 }      div-loadbar[buffered=1] { --buffered: 1 }
    div-loadbar[state=2] { --progress: 2 }      div-loadbar[buffered=2] { --buffered: 2 }
    div-loadbar[state=3] { --progress: 3 }      div-loadbar[buffered=3] { --buffered: 3 }
    div-loadbar[state=4] { --progress: 4 }      div-loadbar[buffered=4] { --buffered: 4 }
    div-loadbar[state=5] { --progress: 5 }      div-loadbar[buffered=5] { --buffered: 5 }
    div-loadbar[state=6] { --progress: 6 }      div-loadbar[buffered=6] { --buffered: 6 }
    div-loadbar[state=7] { --progress: 7 }      div-loadbar[buffered=7] { --buffered: 7 }
    div-loadbar[state=8] { --progress: 8 }      div-loadbar[buffered=8] { --buffered: 8 }
    div-loadbar[state=9] { --progress: 9 }      div-loadbar[buffered=9] { --buffered: 9 }
    div-loadbar[state=10] { --progress: 10 }    div-loadbar[buffered=10] { --buffered: 10 }
    div-loadbar[state=11] { --progress: 11 }    div-loadbar[buffered=11] { --buffered: 11 }
    div-loadbar[state=12] { --progress: 12 }    div-loadbar[buffered=12] { --buffered: 12 }
    div-loadbar[state=13] { --progress: 13 }    div-loadbar[buffered=13] { --buffered: 13 }
    div-loadbar[state=14] { --progress: 14 }    div-loadbar[buffered=14] { --buffered: 14 }
    div-loadbar[state=15] { --progress: 15 }    div-loadbar[buffered=15] { --buffered: 15 }
    div-loadbar[state=16] { --progress: 16 }    div-loadbar[buffered=16] { --buffered: 16 }
    div-loadbar[state=17] { --progress: 17 }    div-loadbar[buffered=17] { --buffered: 17 }
    div-loadbar[state=18] { --progress: 18 }    div-loadbar[buffered=18] { --buffered: 18 }
    div-loadbar[state=19] { --progress: 19 }    div-loadbar[buffered=19] { --buffered: 19 }
    div-loadbar[state=20] { --progress: 20 }    div-loadbar[buffered=20] { --buffered: 20 }
    div-loadbar[state=21] { --progress: 21 }    div-loadbar[buffered=21] { --buffered: 21 }
    div-loadbar[state=22] { --progress: 22 }    div-loadbar[buffered=22] { --buffered: 22 }
    div-loadbar[state=23] { --progress: 23 }    div-loadbar[buffered=23] { --buffered: 23 }
    div-loadbar[state=24] { --progress: 24 }    div-loadbar[buffered=24] { --buffered: 24 }
    div-loadbar[state=25] { --progress: 25 }    div-loadbar[buffered=25] { --buffered: 25 }
    div-loadbar[state=26] { --progress: 26 }    div-loadbar[buffered=26] { --buffered: 26 }
    div-loadbar[state=27] { --progress: 27 }    div-loadbar[buffered=27] { --buffered: 27 }
    div-loadbar[state=28] { --progress: 28 }    div-loadbar[buffered=28] { --buffered: 28 }
    div-loadbar[state=29] { --progress: 29 }    div-loadbar[buffered=29] { --buffered: 29 }
    div-loadbar[state=30] { --progress: 30 }    div-loadbar[buffered=30] { --buffered: 30 }
    div-loadbar[state=31] { --progress: 31 }    div-loadbar[buffered=31] { --buffered: 31 }
    div-loadbar[state=32] { --progress: 32 }    div-loadbar[buffered=32] { --buffered: 32 }
    div-loadbar[state=33] { --progress: 33 }    div-loadbar[buffered=33] { --buffered: 33 }
    div-loadbar[state=34] { --progress: 34 }    div-loadbar[buffered=34] { --buffered: 34 }
    div-loadbar[state=35] { --progress: 35 }    div-loadbar[buffered=35] { --buffered: 35 }
    div-loadbar[state=36] { --progress: 36 }    div-loadbar[buffered=36] { --buffered: 36 }
    div-loadbar[state=37] { --progress: 37 }    div-loadbar[buffered=37] { --buffered: 37 }
    div-loadbar[state=38] { --progress: 38 }    div-loadbar[buffered=38] { --buffered: 38 }
    div-loadbar[state=39] { --progress: 39 }    div-loadbar[buffered=39] { --buffered: 39 }
    div-loadbar[state=40] { --progress: 40 }    div-loadbar[buffered=40] { --buffered: 40 }
    div-loadbar[state=41] { --progress: 41 }    div-loadbar[buffered=41] { --buffered: 41 }
    div-loadbar[state=42] { --progress: 42 }    div-loadbar[buffered=42] { --buffered: 42 }
    div-loadbar[state=43] { --progress: 43 }    div-loadbar[buffered=43] { --buffered: 43 }
    div-loadbar[state=44] { --progress: 44 }    div-loadbar[buffered=44] { --buffered: 44 }
    div-loadbar[state=45] { --progress: 45 }    div-loadbar[buffered=45] { --buffered: 45 }
    div-loadbar[state=46] { --progress: 46 }    div-loadbar[buffered=46] { --buffered: 46 }
    div-loadbar[state=47] { --progress: 47 }    div-loadbar[buffered=47] { --buffered: 47 }
    div-loadbar[state=48] { --progress: 48 }    div-loadbar[buffered=48] { --buffered: 48 }
    div-loadbar[state=49] { --progress: 49 }    div-loadbar[buffered=49] { --buffered: 49 }
    div-loadbar[state=50] { --progress: 50 }    div-loadbar[buffered=50] { --buffered: 50 }
    div-loadbar[state=51] { --progress: 51 }    div-loadbar[buffered=51] { --buffered: 51 }
    div-loadbar[state=52] { --progress: 52 }    div-loadbar[buffered=52] { --buffered: 52 }
    div-loadbar[state=53] { --progress: 53 }    div-loadbar[buffered=53] { --buffered: 53 }
    div-loadbar[state=54] { --progress: 54 }    div-loadbar[buffered=54] { --buffered: 54 }
    div-loadbar[state=55] { --progress: 55 }    div-loadbar[buffered=55] { --buffered: 55 }
    div-loadbar[state=56] { --progress: 56 }    div-loadbar[buffered=56] { --buffered: 56 }
    div-loadbar[state=57] { --progress: 57 }    div-loadbar[buffered=57] { --buffered: 57 }
    div-loadbar[state=58] { --progress: 58 }    div-loadbar[buffered=58] { --buffered: 58 }
    div-loadbar[state=59] { --progress: 59 }    div-loadbar[buffered=59] { --buffered: 59 }
    div-loadbar[state=60] { --progress: 60 }    div-loadbar[buffered=60] { --buffered: 60 }
    div-loadbar[state=61] { --progress: 61 }    div-loadbar[buffered=61] { --buffered: 61 }
    div-loadbar[state=62] { --progress: 62 }    div-loadbar[buffered=62] { --buffered: 62 }
    div-loadbar[state=63] { --progress: 63 }    div-loadbar[buffered=63] { --buffered: 63 }
    div-loadbar[state=64] { --progress: 64 }    div-loadbar[buffered=64] { --buffered: 64 }
    div-loadbar[state=65] { --progress: 65 }    div-loadbar[buffered=65] { --buffered: 65 }
    div-loadbar[state=66] { --progress: 66 }    div-loadbar[buffered=66] { --buffered: 66 }
    div-loadbar[state=67] { --progress: 67 }    div-loadbar[buffered=67] { --buffered: 67 }
    div-loadbar[state=68] { --progress: 68 }    div-loadbar[buffered=68] { --buffered: 68 }
    div-loadbar[state=69] { --progress: 69 }    div-loadbar[buffered=69] { --buffered: 69 }
    div-loadbar[state=70] { --progress: 70 }    div-loadbar[buffered=70] { --buffered: 70 }
    div-loadbar[state=71] { --progress: 71 }    div-loadbar[buffered=71] { --buffered: 71 }
    div-loadbar[state=72] { --progress: 72 }    div-loadbar[buffered=72] { --buffered: 72 }
    div-loadbar[state=73] { --progress: 73 }    div-loadbar[buffered=73] { --buffered: 73 }
    div-loadbar[state=74] { --progress: 74 }    div-loadbar[buffered=74] { --buffered: 74 }
    div-loadbar[state=75] { --progress: 75 }    div-loadbar[buffered=75] { --buffered: 75 }
    div-loadbar[state=76] { --progress: 76 }    div-loadbar[buffered=76] { --buffered: 76 }
    div-loadbar[state=77] { --progress: 77 }    div-loadbar[buffered=77] { --buffered: 77 }
    div-loadbar[state=78] { --progress: 78 }    div-loadbar[buffered=78] { --buffered: 78 }
    div-loadbar[state=79] { --progress: 79 }    div-loadbar[buffered=79] { --buffered: 79 }
    div-loadbar[state=80] { --progress: 80 }    div-loadbar[buffered=80] { --buffered: 80 }
    div-loadbar[state=81] { --progress: 81 }    div-loadbar[buffered=81] { --buffered: 81 }
    div-loadbar[state=82] { --progress: 82 }    div-loadbar[buffered=82] { --buffered: 82 }
    div-loadbar[state=83] { --progress: 83 }    div-loadbar[buffered=83] { --buffered: 83 }
    div-loadbar[state=84] { --progress: 84 }    div-loadbar[buffered=84] { --buffered: 84 }
    div-loadbar[state=85] { --progress: 85 }    div-loadbar[buffered=85] { --buffered: 85 }
    div-loadbar[state=86] { --progress: 86 }    div-loadbar[buffered=86] { --buffered: 86 }
    div-loadbar[state=87] { --progress: 87 }    div-loadbar[buffered=87] { --buffered: 87 }
    div-loadbar[state=88] { --progress: 88 }    div-loadbar[buffered=88] { --buffered: 88 }
    div-loadbar[state=89] { --progress: 89 }    div-loadbar[buffered=89] { --buffered: 89 }
    div-loadbar[state=90] { --progress: 90 }    div-loadbar[buffered=90] { --buffered: 90 }
    div-loadbar[state=91] { --progress: 91 }    div-loadbar[buffered=91] { --buffered: 91 }
    div-loadbar[state=92] { --progress: 92 }    div-loadbar[buffered=92] { --buffered: 92 }
    div-loadbar[state=93] { --progress: 93 }    div-loadbar[buffered=93] { --buffered: 93 }
    div-loadbar[state=94] { --progress: 94 }    div-loadbar[buffered=94] { --buffered: 94 }
    div-loadbar[state=95] { --progress: 95 }    div-loadbar[buffered=95] { --buffered: 95 }
    div-loadbar[state=96] { --progress: 96 }    div-loadbar[buffered=96] { --buffered: 96 }
    div-loadbar[state=97] { --progress: 97 }    div-loadbar[buffered=97] { --buffered: 97 }
    div-loadbar[state=98] { --progress: 98 }    div-loadbar[buffered=98] { --buffered: 98 }
    div-loadbar[state=99] { --progress: 99 }    div-loadbar[buffered=99] { --buffered: 99 }
    div-loadbar[state=100] { --progress: 100 }  div-loadbar[buffered=100] { --buffered: 100 }

    div-loadbar::before,
    div-loadbar::after {
        content: "";
        height: 100%;
        width: 100%;
        display: block;
        z-index: 2000;
    }

    div-loadbar::before {
        width: 100%;
        background: darkgray;
        opacity: .35;
        transform-origin: left center;
        transition: transform 0.25s linear;
    }

    :not( div-progressor ) > div-loadbar::before{
        transform: scaleX(var(--buffered));
    }


    div-loadbar::after {
        position: absolute;
        inset: 0 auto 0 0;
        width: 100%;
        background: gray;
        transform-origin: left center;
        transition: transform 0.25s linear;
    }

    :not( div-progressor )>div-loadbar::after{
        transform: scaleX(var(--progress));
    }

    div-loadbar[state="indeterminate"]::after {
        opacity: .5;
        animation: indeterminate-progression 500ms ease-in-out infinite alternate;
    }

    @keyframes indeterminate-progression {
        from { transform: translateX(0) scaleX(.25); }
        to { transform: translateX(75%) scaleX(.25); }
    }

    /*
        :: document frames
    */

    body-mainframe {
        margin: 0 auto;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    @media only screen {
        /* Large Devices & Desktop */
        @media (min-width: 1200px) {
            body-mainframe {
                max-width: 1420px;
            }
        }
        /* Medium Devices & Tablets */
        @media (max-width: 1200px) {
            body-mainframe {
                max-width: 768px;
            }
        }
        /* Small Devices & Phone */
        @media (max-width: 768px) {
            body-mainframe {
                max-width: 100%;
            }
        }
    }

    /* body-appframe {
        coming soon...
    } */

}

@layer components {

    /*
        :: audio player
    */

    div-audioplayer audio {
        visibility: hidden;
        height: 0;
        width: 0;
    }

    div-audioplayer {
        display: flex;
        overflow: hidden;
    }

    div-audioplayer > div-container {
        display: flex;
        position: relative;
        max-height: 100%;
        overflow: hidden;
    }

    div-audioplayer div-display {
        display: block;
    }

    /* div-audioplayer * {
        align-items: center;
        width: auto;
    } */

    div-audioplayer div-controller {
        display: flex;
        justify-items: center;
    }

    div-audioplayer .timeline,
    div-audioplayer .volume {
        width: 100%;
    }

    div-audioplayer .volume,
    div-audioplayer .loop,
    div-audioplayer .play {
        display: flex;
    }

    div-audioplayer .volume::before {
        content:'🕪';
    }

    div-audioplayer .loop::before {
        content:'⟳';
    }
    
    div-audioplayer .loop.--active::before {
        content:'⦻'
    }

    div-audioplayer .play::before {
        content:'▷'
    }
    
    div-audioplayer .play.--active::before {
        content:'⏸'
    }
    
    /*
        :: video player
    */

    div-videoplayer {
        display: grid;
        align-content: center;
    }

    div-videoplayer > div-container {
        position: relative;
        width: 100%;
        max-height: 100%;
    }

    div-videoplayer > div-container > video {
        width: 100%;
        max-height: 100%;
    }

    div-videoplayer div-controller {
        display: flex;
        justify-items: center;
    }

    div-videoplayer div-display {
        display: block;
        position: relative;
    }
    
    div-videoplayer .timeline,
    div-videoplayer .volume {
        width: 100%;
    }

    div-videoplayer .maximized,
    div-videoplayer .cinema,
    div-videoplayer .volume,
    div-videoplayer .loop,
    div-videoplayer .play {
        display: flex;
    }

    div-videoplayer .maximized::before {
        content:'⧆';
    }
    div-videoplayer .maximized.--active::before {
        content:'□';
    }

    div-videoplayer .cinema::before {
        content:'☼';
    }
    div-videoplayer .cinema.--active::before {
        content:'☀';
    }

    div-videoplayer .volume::before {
        content:'🕪';
    }

    div-videoplayer .loop::before {
        content:'⟳';
    }
    
    div-videoplayer .loop.--active::before {
        content:'⦻'
    }

    div-videoplayer .play::before {
        content:'▷'
    }
    
    div-videoplayer .play.--active::before {
        content:'⏸'
    }

    
    div-videoplayer[type="background"] {
        height: 100%;
        width: 100%;
        position: absolute;
        overflow: hidden;
        z-index: 0;
    }

    div-videoplayer[type="background"] > video {
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: -0;
        object-fit: cover;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    div-videoplayer[type="backscreen"],
    div-videoplayer[type="backscreen"] > video {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 0;
        height: 100%;
        min-width: 100%;
        width: auto;
        margin: 0;
        padding: unset;
        pointer-events: none;
        object-fit: cover;
    }

    div-videoplayer[mode="fullscreen"] video {
        height: 100%;
        width: 100%;
    }

    div-videoplayer[mode="fullscreen"] div-display {
        position: fixed;
        z-index: 999999;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    div-videoplayer[mode="cinema"] {
        z-index: 9999;
        position: fixed;
        top: 5vh;
        right: 5vw;
        bottom: 5vh;
        left: 5vw;
        width: auto;
        height: auto;
        max-width: none;
        max-height: none;
        transform: none;
    }

    div-videoplayer[mode="cinema"][opening],
    div-videoplayer[mode="cinema"][closing] {
        top: var(--cinema-top);
        right: var(--cinema-right);
        bottom: var(--cinema-bottom);
        left: var(--cinema-left);
    }

    div-videoplayer[mode="cinema"][transition] {
        transition:
                    top .5s ease-in-out,
                    right .5s ease-in-out,
                    bottom .5s ease-in-out,
                    left .5s ease-in-out;
    }

    div-videoplayer[mode="cinema"][closing][transition] {
    }


    /*
        :: btn images
    */

    button-item img,
    button-item img-icon{
        position: absolute;
        height: inherit;
    }

    /*
        :: checkbox and radio components
    */

    button-item input[type="checkbox"],
    button-item input[type="radio"] {
        opacity: 0;
        cursor: pointer;
        z-index: 100;
    }

    button-item input[type="checkbox"]+label,
    button-item input[type="radio"]+label {
        text-overflow: unset;
        overflow-wrap: break-word;
        z-index: 0;
    }

    button-item input[type="checkbox"]+label:not(:empty)::after,
    button-item input[type="radio"]+label:not(:empty)::after{
        left: 0;
    }

    button-item input[type="checkbox"]+label::after,
    button-item input[type="radio"]+label::after {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        background: lightgray;
        content: "\00a0";
        position: absolute;
        transition: all 0.125s;
        opacity: .8;
        z-index: -1;
    }

    button-item:has(
        input[type="checkbox"],
        input[type="radio"]
    ) label[data-switch]::after {
        content: "\00a0"attr(data-switch)"\00a0";
        width: 100%;
        height: 100%;
        text-align: center;
        align-content: center;
        aspect-ratio: unset;
    }

    button-item input:checked+label::after  {
        background: gray;
        opacity: 1;
    }

    /*
        :: typed button components
    */

    button-item[type="file"] {
        display: grid; 
        grid-template-columns: 1fr 1fr 1fr 1fr; 
        grid-template-rows: 1fr; 
    }

    button-item[type="file"] input[type="file"] {
        grid-area: 1 / 1 / 2 / 2;
        position: absolute;
        opacity: 0;
        left: 0;
        top: 0;
    }
    
    button-item[type="file"] label {
        grid-area: 1 / 1 / 2 / 2;
        display: flex;
        position: absolute;
        border-right: 1px solid gray;
    }

    button-item[type="file"] file-list {
        position: absolute;
        grid-area: 1 / 2 / 2 / 5;
        display: flex;
        overflow-x: scroll;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        height: 100%;
        max-width: 100%;
    }

    button-item[type="file"] > input[type="file"] {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    button-item[type="file"]:has(input[type="file"]) file-list::-webkit-scrollbar,
    button-item[type="file"]:has(input[type="file"]) file-list::-webkit-scrollbar-track,
    button-item[type="file"]:has(input[type="file"]) file-list::-webkit-scrollbar-thumb {
        width: 0 !important;        /* Rimuove lo spazio verticale */
        height: 0 !important;       /* Rimuove lo spazio orizzontale (la tua linea grigia) */
        background: transparent;     /* Rende invisibile qualsiasi residuo */
        display: none;              /* Fallback per vecchie versioni */
    }

    button-item[type="file"] file-list > span {
        display: inline-flex;
        border: 1px dashed grey;
        float: right;
        flex-flow: nowrap;
        text-wrap: nowrap;
    }


    /* ——— */

    button-item[type="password"] > input {
        width: 90%;
        justify-self: self-start;
    }

    button-item[type="password"] > button {
        justify-self: self-end;
        z-index: 101;
        aspect-ratio: 1 / 1;
        height: 100%;
        width: auto;
    }

    button-item[type="password"] > button > img-icon::after {
        content: "\00a0";
        position: absolute;
        width: 50%;
        height: 5%;
        left: 50%;
        top: 50%;
        background: currentColor;
        opacity: 1;
        transform: translate(-50%, -50%) rotate(-45deg);
        transition: opacity 0.25s ease;
        z-index: 100;
    }

    button-item[type="password"][open] > button > img-icon::after {
        opacity: 0;
    }

    /* ——— */

    button-item[type="rating"] .values {
        position: absolute;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    button-item[type="rating"] .all-labels * {
        line-height: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    button-item[type="rating"] .all-stars {
        display: flex;
    }

    .all-stars svg {
        cursor: pointer;
        width: 25px;
        height: 25px;
    }

    .all-stars .--active ~ svg {
        opacity: .65;
    }
    .all-stars:has(svg:hover) svg {
        opacity: .35;
    }
    .all-stars svg:is( :hover, :has(~ svg:hover) ) {
        opacity: 1;
    }

    .all-labels p {
        text-align: center;
        min-width: 100px;
    }

    /* ——— */

    button-item[type="number"] {
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    button-item[type="number"] input {
        visibility: hidden;
    }

    button-item[type="number"] .number-slider {
        display: flex;
        flex-flow: row nowrap;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        padding-left: 50%;
        z-index: 1;
        cursor: ew-resize;
        align-items: center;
        overflow: hidden;
        will-change: transform;
        transition-delay: 0ms;
        text-rendering: optimizeSpeed;
        shape-rendering:optimizeSpeed;
        image-rendering: optimizeSpeed;
        backface-visibility: hidden;
        perspective: none;
    }

    button-item[type="number"] .number-slider span {
        opacity: .5;
    }
    button-item[type="number"] .number-slider span.--active {
        opacity: 1;
    }

    button-item[type="number"] img {
        position: absolute;
        height: 100%;
        aspect-ratio: 1/1;
        z-index: 100;
        line-height: 0;
        text-align: center;
    }

    button-item[type="number"] img:first-of-type {
        left: 0%;
    }

    button-item[type="number"] img:last-of-type {
        right: 0%;
    }

    /* ——— */

    button-item[type="tel"] > intl-display {
        position: absolute;
        display: flex;
        align-items: center;
        gap: 5px;
        height: 100%;
        left: 0;
        padding: 0 5px;
        cursor: pointer;
        z-index: 101;
    }

    button-item[type="tel"] > input {
        padding-left: 65px;
    }

    button-item[type="tel"] > intl-list {
        position: absolute;
        width: 100%;
        top: 100%;
        left: 0;
        height: 0;
        overflow: hidden;
        opacity: 0;
        background: white;
        border: 1px solid lightgray;
        z-index: 1;
        transition:
            height .35s ease,
            opacity .35s ease,
            z-index 0s .35s;
    }

    button-item[type="tel"] > intl-list[open] {
        opacity: 1;
        z-index: 5000;
        transition:
            height .35s ease,
            opacity .35s ease,
            z-index 0s;
    }

    button-item[type="tel"] intl-list > input[type="search"] {
        width: 100%;
    }

    button-item[type="tel"] intl-list div-scroll {
        max-height: 250px;
    }

    button-item[type="tel"] intl-list .options {
        display: flex;
        flex-direction: column;
    }

    button-item[type="tel"] intl-list .options > a {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 10px;
        width: 100%;
        cursor: pointer;
    }

    /* ——— */

    button-item[type="range"] label {
        justify-content: space-between;
    }

    button-item[type="range"] .sliders {
        position: relative;
        min-height: 2px;
        width: 85%;
        background: lightgray;
        justify-self: center;
        z-index: 1000;
        margin: 0 auto;
    }

    button-item[type="range"] input {
        pointer-events: none;
        position: absolute;
        width: 100%;
        height: 0;
        visibility: hidden;
        z-index: -1;
    }

    button-item[type="range"] input+span,
    button-item[type="range"] b {
        position: absolute;
        cursor: ew-resize;
    }

    button-item[type="range"] input+span {
        pointer-events: none;
        min-height: 2px;
        width: auto;
    }

    button-item[type="range"] b {
        pointer-events:painted;
        transform: translateY(-50%);
        z-index: 10;
        background: gray;
        min-height: 6px;
        min-width: 6px;
    }

    button-item[type="range"] b:hover,
    button-item[type="range"] b:active,
    button-item[type="range"] b:focus {
        z-index: 100;
    }

    button-item[type="range"] .monitor {
        position: absolute;
        top: -100%;
        transform: translate(-50%, -130%);
        transition: opacity .25s ease-in-out;
        display: grid;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1 / 1;
        background: lightgray;
    }

    button-item[type="range"] .monitor {
        opacity: 0;
        transition: opacity .15s ease-in-out;
        pointer-events: none;
    }

    button-item[type="range"] .monitor.--active {
        opacity: 1;
    }

    button-item[type="range"] .monitor,
    button-item[type="range"] input+span,
    button-item[type="range"] b {
        transition-delay: 0ms;
        text-rendering: optimizeSpeed;
        shape-rendering:optimizeSpeed;
        image-rendering: optimizeSpeed;
        backface-visibility: hidden;
        perspective: none;
    }


    /* ——— */

    button-item[type="select"] {
        text-align: left;
        cursor: pointer;
    }

    button-item[type="select"] select {
        cursor: pointer;
        opacity: 0;
        z-index: -1;
    }

    .selectorbox {
        overflow: hidden;
    }

    .selectorbox .optiongroup .options a {
        width: 100%;
    }


    /* ——— */

    button-item[type="dropdown"] label {
        cursor: pointer;
        z-index: 1;
    }

    button-item[type="dropdown"] .selectorbox {
        position: absolute;
        width: 100%;
        top: 100%;
        height: 0;
        overflow: hidden;
        backface-visibility: hidden;
        transform-style: flat;
        shape-rendering:optimizeSpeed;
        image-rendering: optimizeSpeed;
        perspective: none;
    }

    button-item[type="dropdown"] .selectorbox {
        width: inherit;
        z-index: 1;
        opacity: 0;
        transition:
            height .35s ease,
            opacity .35s ease,
            z-index 0s .35s;
    }

    button-item[type="dropdown"] .selectorbox.--active {
        z-index: 5000;
        opacity: 1;
        transition:
            height .35s ease,
            opacity .35s ease,
            z-index 0s;
    }

    button-item[type="dropdown"] .selectorbox div-scroll[axis~="y"] {
        max-height: 300px;
    }

    [type*='search']{
        border-bottom-width: inherit;
        border-bottom-style: inherit;
        border-bottom-color: inherit;
    }

    button-item[type="dropdown"] .selectorbox {
        background: white;
        border: 1px solid gray;
    }


    /* ——— */

    .clockbox,
    .chronobox {
        position: relative;
        max-height: 95vh;
    }

    .clockbox .clock,
    .chronobox .chrono {
        position: relative;
        aspect-ratio: 1 / 1;
    }

    .clockbox [class*="line-"],
    .chronobox [class*="dash-"] {
        height: 0;
        width: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center left;
        z-index: 5000;
        pointer-events: all;
    }

    .clockbox [class*="line-"]::after,
    .chronobox [class*="dash-"]::after {
        content: "";
        cursor: grab;
        padding: 20px;
        background: #0000000a;
        height: 100%;
        transform: translate(0, -50%);
        display: block;
    }

    .clockbox [class*="line-"]::after:active,
    .chronobox [class*="dash-"]::after:active {
        cursor: grabbing;
    }

    .clockbox [class*="line-"]::before,
    .chronobox [class*="dash-"]::before {
        content: "";
        height: 100%;
        outline: 1px solid black;
        transform: translate(0, -50%);
        display: block;
    }

    .clockbox .display>div {
        display: flex;
        align-content: center;
        align-items: center;
    }

    .chronobox .display>div:first-child{
        display: flex;
        align-items: center;
        justify-items: center;
        min-width: 300px;
        flex-direction: row;
        gap: 5px;
    }

    /* ——— */

    button-item[type="date"] label {
        cursor: pointer;
    }

    .datepicker {
        cursor: pointer;
        overflow: hidden;
        position: relative;
        min-width: 300px;
        max-width: 90vw;
        max-height: 90vh;
    }

    .datepicker > div:nth-child(2),
    .datepicker > div:nth-child(3),
    .datepicker > div:nth-child(4),
    .datepicker > div:nth-child(5),
    .datepicker > div:nth-child(6) {
        text-align: center;
    }

    .datepicker * {
        user-select: none;
    }

    .datepicker .year_list p,
    .datepicker .month_list p {
        cursor: ew-resize;
    }

    .datepicker .weekday_list > div,
    .datepicker .day_list > div {
        width: 100%;
        height: 100%;
        position: relative;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
    }

    .datepicker .prev::before {
        content: '←';
    }
    .datepicker .next::before {
        content: '→';
    }

    /*
        :: modals
    */

    /* Reset popover positioning before anchoring each modal to its edge. */
    div-modal[popover] {
        z-index: 1100;
        position: fixed;
        margin: 0;
        border: 0;
        padding: 0;
        max-width: 100vw;
        max-height: 100vh;
        overflow: auto;
        transition: transform 150ms easeInOutCubic .1s,
                    opacity 150ms easeInOutCubic,
                    overlay 150ms allow-discrete .5s,
                    display 150ms allow-discrete 2s,
                    z-index 150ms allow-discrete 2s;
    }

    div-modal {

        pointer-events: none;

    }

    div-modal[side="center"][popover] {
        top: 50%;
        left: 50%;
        max-width: 95vh;
        max-height: 95vh;
        opacity: 0;
        transform: translate(-50%, -50%) scale(75%);
    }

    div-modal:is([side="left"], [side="right"])[popover] {
        top: 0;
        width: min(16rem, 100vw);
        max-width: 95vh;
    }
    div-modal:is([side="left"], [side="right"]):not([extend="narrow"])[popover] {
        height: 100%;
    }

    div-modal:is([side="top"], [side="bottom"])[popover] {
        left: 0;
        max-height: 95vh;
        /* height: min(16rem, 100vh); */
    }
    div-modal:is([side="top"], [side="bottom"])[popover]:not([extend="narrow"]) {
        width: 100%;
    }

    div-modal[side="left"][popover] {
        left: 0;
        transform: translateX(-100%);
    }

    div-modal[side="top"][popover] {
        top: 0;
        transform: translateY(-100%);
    }

    div-modal[side="right"][popover] {
        left: 100%;
        transform: translateX(100%);
    }

    div-modal[side="bottom"][popover] {
        top: 100%;
        transform: translateY(100%);
    }

    div-modal[side="center"][popover]:popover-open {
        opacity: 1;
        pointer-events: all;
        transform: translate(-50%, -50%) scale(100%);
    }

    div-modal[side="left"][popover]:popover-open {
        pointer-events: all;
        transform: translateX(0%);
    }

    div-modal[side="top"][popover]:popover-open {
        pointer-events: all;
        transform: translateY(0%);
    }

    div-modal[side="right"][popover]:popover-open {
        pointer-events: all;
        transform: translateX(-100%);
    }

    div-modal[side="bottom"][popover]:popover-open {
        pointer-events: all;
        transform: translateY(-100%);
    }

    @starting-style {
        
        div-modal[side="center"][popover]:popover-open {
            opacity: 0;
            transform: translate(-50%, -50%) scale(75%);
        }
        div-modal[side="left"][popover]:popover-open {
            transform: translateX(-100%);
        }
        div-modal[side="top"][popover]:popover-open {
            transform: translateY(-100%);
        }
        div-modal[side="right"][popover]:popover-open {
            transform: translateX(100%);
        }
        div-modal[side="bottom"][popover]:popover-open {
            transform: translateY(100%);
        }

    }

    @media (prefers-reduced-motion: reduce) {
        div-modal[popover] {
            transition: none;
        }
    }

    div-modal[side="top"][extend="narrow"],
    div-modal[side="bottom"][extend="narrow"]{
        width: auto;
    }
    div-modal[side="left"][extend="narrow"],
    div-modal[side="right"][extend="narrow"]{
        height: auto;
    }

    div-modal[side="top"][align="start"],
    div-modal[side="bottom"][align="start"] {
        right: auto;
    }
    div-modal[side="top"][align="end"],
    div-modal[side="bottom"][align="end"] {
        left: auto;
    }
    div-modal[side="left"][align="start"],
    div-modal[side="right"][align="start"] {
        align-self: flex-start;
    }
    div-modal[side="left"][align="center"],
    div-modal[side="right"][align="center"] {
        align-self: center;
    }
    div-modal[side="left"][align="end"],
    div-modal[side="right"][align="end"] {
        align-self: flex-end;
    }
    div-modal[side="top"][align="start"],
    div-modal[side="bottom"][align="start"] {
        justify-self: start;
    }
    div-modal[side="top"][align="center"],
    div-modal[side="bottom"][align="center"] {
        justify-self: center;
    }

    div-modal[side="top"][align="end"],
    div-modal[side="bottom"][align="end"] {
        justify-self: end;
    }

    /*
        :: tooltips
    */

    span-tooltip {
        position: relative;
        cursor: help;
    }

    span-tooltip[data-label]::before {
        content: attr(data-label);
    }

    span-tooltip > :first-child  {
        z-index: -1;
        position: absolute;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        max-width: 90vw;
        max-height: 25vh;
        overflow: revert;
        transition:
            opacity 0.2s ease,
            margin 0.2s ease,
            visibility 0s linear 0.2s,
            z-index 0s linear 0.2s;
    }

     span-tooltip> :first-child{
        display: flex;
        width: max-content;
        max-width: 300px;
     }
    span-tooltip[open] > :first-child{
        z-index: 50000;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    span-tooltip[side] > :first-child::after {
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        position: absolute;
    }

    /* ——— */

    span-tooltip[side="up"] > :first-child {
        display: inline-flex;
        transform: translateX(-50%);
        bottom: 100%;
        left: 50%;
        margin-bottom: -10px;
    }

    span-tooltip[side="up"] > :first-child::after {
        border-width: 9px 5px 0 5px;
        border-color: gray transparent transparent transparent;
        bottom: -9px;
        left: 50%;
        transform: translateX(-50%);
    }

    span-tooltip[side="up"] > :first-child::before {
        content: " ";
        position: absolute;
        width: 100%;
        bottom: -30px;
        height: 30px;
        left: 0;
    }

    span-tooltip[side="up"][open] > :first-child {
        margin-bottom: 10px;
    }

    /* ——— */

    span-tooltip[side="down"] > :first-child {
        display: inline-flex;
        transform: translateX(-50%);
        left: 50%;
        top: 100%;
        margin-top: -10px;
    }

    span-tooltip[side="down"] > :first-child::after {
        border-width: 0 5px 9px 5px;
        border-color: transparent transparent gray transparent;
        top: -9px;
        right: 50%;
    }

    span-tooltip[side="down"] > :first-child::before {
        content: " ";
        position: absolute;
        width: 100%;
        top: -30px;
        height: 30px;
        left: 0;
    }

    span-tooltip[side="down"][open] > :first-child {
        margin-top: 10px;
    }

    /* ——— */

    span-tooltip[side="left"] > :first-child {
        display: inline-flex;
        transform: translateX(-100%) translateY(-50%);
        left: 0%;
        top: 50%;
        margin-left: 10px;
    }

    span-tooltip[side="left"] > :first-child::after {
        border-width: 5px 0 5px 9px;
        border-color: transparent transparent transparent gray;
        right: -9px;
        top: 50%;
        transform: translateY(-50%);
    }

    span-tooltip[side="left"] > :first-child::before {
        content: " ";
        position: absolute;
        height: 100%;
        top: 0;
        width: 30px;
        right: -30px;
    }

    span-tooltip[side="left"][open] > :first-child {
        margin-left: -10px;
    }

    /* ——— */

    span-tooltip[side="right"] > :first-child {
        display: inline-flex;
        transform: translateX(0%) translateY(-50%);
        left: 100%;
        top: 50%;
        margin-left: -10px;
    }

    span-tooltip[side="right"] > :first-child::after {
        border-width: 5px 9px 5px 0;
        border-color: transparent gray transparent transparent;
        left: -9px;
        top: 50%;
        transform: translateY(-50%);
    }

    span-tooltip[side="right"] > :first-child::before {
        content: " ";
        position: absolute;
        height: 100%;
        top: 0;
        width: 30px;
        left: -30px;
    }

    span-tooltip[side="right"][open] > :first-child {
        margin-left: 10px;
    }



    @media (prefers-reduced-motion: reduce) {
        span-tooltip > :first-child {
            transition: none;
        }
    }

    /*
        :: tabs
        :: spoilers
        :: details
    */

    div-spoiler,
    details > div-container,
    details div-contents,
    div-spoiler > div-container,
    div-spoiler div-contents,
    div-tabs,
    div-tabs > div-container,
    div-tabs div-contents {
        display: block;
    }

    div-tabs nav>.close{
        cursor: pointer;
    }

    summary,
    summary *,
    div-spoiler > div-headbar,
    div-tabs[axis="y"] > div-headbar,
    div-tabs[axis="x"] > div-headbar > nav > .title {
        cursor: pointer;
        list-style: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: flex;
        align-items: center;
        flex-direction: row;
    }

    div-spoiler[type="tree"] > div-container {
        padding-left: 25px;
        width: auto;
        min-width: 100%;
    }

    div-spoiler[type="tree"] > div-container > div-contents,
    div-spoiler[type="tree"] > div-container > div-spoiler {
        position: relative;
    }

    div-spoiler[type="tree"] > div-container:has(> div-spoiler) > div-contents::before,
    div-spoiler[type="tree"] > div-container > div-spoiler::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: -21px;
        border-left: 2px dashed gray;
    }

    div-spoiler[type="tree"] > div-container > div-spoiler:last-of-type::before {
        bottom: auto;
        height: 14px;
    }

    div-spoiler[type="tree"] > div-container > div-spoiler > div-headbar {
        position: relative;
    }

    div-spoiler[type="tree"] > div-container > div-spoiler > div-headbar::after {
        content: "";
        position: absolute;
        width: 21px;
        top: 14px;
        left: -21px;
        border-top: 2px dotted rgb(var(--tone-black) / 33%);
    }

    summary::-webkit-details-marker {
        display: none;
    }

    details > summary img-icon:first-child,
    div-spoiler > div-headbar img-icon:first-child {
        transform: rotateZ(0deg);
        transition: transform 0.12s;
    }

    details[open] > summary img-icon:first-child,
    div-spoiler[open] > div-headbar img-icon:first-child {
        transform: rotateZ(90deg);
        transition: transform 0.12s;
    }

    div-tabs[axis="x"] > div-container {
        transition: height 0.12s;
    }

    details > div-container,
    div-spoiler > div-container,
    div-tabs[axis="y"] > div-container,
    div-tabs[axis="x"] > div-container > div-contents {
        overflow: hidden;
        padding: unset;
        height: 0;
        opacity: 0;
        transition: opacity 0.25s 0.12s, height 0.12s ease-in-out;
    }

    details[open] > div-container,
    div-spoiler[open] > div-container,
    div-tabs[axis="y"] > div-container.--active,
    div-tabs[axis="x"] > div-container > div-contents.--active {
        height: initial;
        opacity: 1;
    }

    /*
        :: main navs
    */

    nav[axis="x"] {
        position: relative;
    }

    nav[axis="x"] > ul {
        display: grid;
        grid-auto-flow: column;
        list-style: none;
        width: 100%;
        position: static;
    }

    nav[axis] > ul > li {
        position: relative;
        align-content: center;
        justify-items: center;
    }

    nav[axis="x"] > ul > li:has( div-flap[extend="wide"] ) {
        position: static;
    }
    

    nav[axis="x"] > ul > li > a,
    nav[axis="y"] > ul > li > a {
        z-index: 2000;
        cursor: pointer;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }

    nav[axis="y"]{
        position: relative;
        display: inline-grid;
    }

    nav[axis="y"] > ul {
        display: grid;
        grid-auto-flow: row;
        padding: 0;
        margin: 0;
        list-style: none;
        height: 100%;
        width: 100%;
    }


    nav[axis="y"] > ul > li {
        position: relative;
    }
    nav[axis="y"] > ul > li:has( div-flap[extend="wide"] ) {
        position: static;
    }


    div-flap {
        position: absolute;
        visibility: hidden;
        opacity: 0;
        z-index: -1;
        align-content: center;
        transition: opacity 0.15s;
    }

    div-flap[open] {
        visibility: visible;
        z-index: 25000;
        opacity: 1;
    }

    div-flap[side="top"][extend="wide"] {
        top: 0;
        left: 0;
        width: 100%;
        transform: translateY(-100%);
    }

    div-flap[side="bottom"][extend="wide"] {
        width: 100%;
        bottom: 0;
        left: 0;
        transform: translateY(100%);
    }

    div-flap[side="left"][extend="wide"] {
        height: 100%;
        left: 0;
        top: 0;
        transform: translateX(-100%);
    }

    div-flap[side="right"][extend="wide"] {
        height: 100%;
        left: 100%;
        top: 0;
    }

    div-flap[side="top"][extend="narrow"] {
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
    }

    div-flap[side="bottom"][extend="narrow"] {
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
    }

    div-flap[side="left"][extend="narrow"] {
        right: 100%;
        top: 50%;
        transform: translateY(-50%);
        width: fit-content;
    }

    div-flap[side="right"][extend="narrow"] {
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        width: fit-content;
    }

    nav:has( div-flap div-flap )>* {
        outline: 3px dashed red;
    }
    nav:has( div-flap div-flap ):after {
        content: 'NEASTED LAYOUT IS NOT CURRENTLY SUPPORTED';
        background: red;
        color: white;
    }

    /*
        :: progress bars
    */

    div-progressor {
        width: 100%;
        display: flex;
        align-items: center;
        gap: attr(gap type(<length> | <percentage>), 0);
    }

    div-progressor > progress,
    div-progressor > meter {
        position: absolute;
        opacity: 0;
        width: inherit;
        z-index: 1;
    }

    div-progressor div-loadbar::before{
        transform: scaleX(calc(var(--buffered) / 100));
    }

    div-progressor div-loadbar::after{
        transform: scaleX(calc(var(--progress) / 100));
    }

    /*
        :: stepper slides
    */

    div-stepper {
        display: flex;
        flex-flow: column nowrap;
        overflow: hidden;
        position: relative;
        align-items: stretch;
        width: 100%;
    }

    div-stepper > div-container,
    div-stepper > div-container > div-slide {
        position: relative;
        flex: 1 0 100%;
        display: flex;
        align-items: stretch;
        width: 100%;
    }

    div-stepper > div-container {
        flex: 1 0 100%;
        transition: transform .35s ease-in-out;
    }

    div-stepper[axis="x"] > div-container {
        flex-flow: row nowrap;
    }

    div-stepper[axis="y"] > div-container {
        flex-flow: column nowrap;
    }

    div-stepper[axis="y"] > div-container > div-slide {
        min-height: 100%;
    }

    div-stepper ol:first-child {
        display: grid;
        grid-auto-flow: column;
        align-items: center;
        justify-items: center;
        align-content: stretch;
        justify-content: stretch;
    }

    div-stepper ol:first-child li.--active {
        font-weight: bold;
    }

    /*
        :: sliders
    */

    div-slider {
        --autosnap-delay: attr(autosnap ms, 0ms);
        display: flex;
        overflow: hidden;
        position: relative;
        align-items: stretch;
        width: 100%;
    }

    div-slider a.prev,
    div-slider a.next {
        position: absolute;
        text-decoration: none;
        z-index: 5000;
    }

    div-slider[axis="x"] > div-container,
    div-slider[axis="y"] > div-container {
        position: relative;
        display: flex;
        align-items: center;
        flex: 1 0 100%;
        width: 100%;
    }

    div-slider[axis="x"] > div-container {
        flex-flow: nowrap;
    }

    div-slider[axis="y"] > div-container {
        flex-flow: column nowrap;
        max-height: 100vh;
    }

    div-slider > div-container > div-contents {
        max-width: 100%;
        position: relative;
        border-radius: 10px;
        flex-shrink: 0;
    }

    div-slider > div-container,
    div-slider > div-container > .--active {
        transition: left .35s ease-in-out, top .35s ease-in-out;
    }

    div-slider[autosnap][speed="slow"] > div-container {
        transition: left calc(var(--autosnap-delay)/2) cubic-bezier(.41,0,0,1), top calc(var(--autosnap-delay)/2) cubic-bezier(.41,0,0,1);
    }
    div-slider[autosnap][speed="standard"] > div-container {
        transition: left calc(var(--autosnap-delay)/4) cubic-bezier(.41,0,0,1), top calc(var(--autosnap-delay)/4) cubic-bezier(.41,0,0,1);
    }
    div-slider[autosnap][speed="rapid"] > div-container {
        transition: left calc(var(--autosnap-delay)/6) cubic-bezier(.41,0,0,1), top calc(var(--autosnap-delay)/6) cubic-bezier(.41,0,0,1);
    }

    div-slider slider-dots,
    /* div-slider slider-steps, */
    div-slider slider-labels {
        display: flex;
        align-content: center;
        position: absolute;
        z-index: 20000;
        text-align: center;
        bottom: 10px;
        left: 0;
        right: 0;
        margin: 0 auto 0 auto;
    }

    div-slider[axis="x"] slider-labels {
        flex-flow: row nowrap;
        transition: transform 0.25s ease-in-out;
    }

    div-slider[axis="y"] slider-labels {
        flex-flow: column;
        transition: transform 0.25s ease-in-out;
    }

    div-slider slider-labels > * {
        min-width: fit-content;
    }

    slider-timer {
        width: 100%;
        background: lightgray;
        display: block;
        position: absolute;
        bottom: 0;
        height: 5px;
    }

    slider-timer::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        transform: scaleX(1);
        transform-origin: left;
        background: gray;
    }

    slider-timer[running]::after {
        animation: snap-countdown var(--autosnap-delay) linear forwards;
    }

    div-slider[autosnap-paused] slider-timer::after {
        animation-play-state: paused;
    }

    @keyframes snap-countdown {
        to {
            transform: scaleX(0);
        }
    }

    /*
        :: cards
    */

    div-card {
        overflow: hidden;
        position: relative;
        /* overflow: visible; */
        display: block;
        cursor: pointer;
    }

    div-card[opening],
    div-card[open],
    div-card[closing] {
        min-width: var(--card-width);
        min-height: var(--card-height);
    }

    div-card div-expander {
        overflow: hidden;
        display: flex;
    }


    div-card[speed="rapid"] div-expander {
        transition: left .25s ease-in-out,
                    top .25s ease-in-out,
                    width .25s ease-in-out,
                    height .25s ease-in-out;
    }

    div-card[speed="standard"] div-expander, div-expander {
        transition: left .5s ease-in-out,
                    top .5s ease-in-out,
                    width .5s ease-in-out,
                    height .5s ease-in-out;
    }

    div-card[speed="slow"] div-expander {
        transition: left .75s ease-in-out,
                    top .75s ease-in-out,
                    width .75s ease-in-out,
                    height .75s ease-in-out;
    }

    div-card div-excerpt,
    div-card div-contents {
        display: flex;
    }

    div-card[opening] > div-expander,
    div-card[open] > div-expander,
    div-card[closing] > div-expander {
        position: fixed;
        z-index: 25000;
    }

    div-card[opening] > div-expander,
    div-card[closing] > div-expander {
        left: var(--card-left);
        top: var(--card-top);
        width: var(--card-width);
        height: var(--card-height);
    }

    div-card[opening] > div-expander {
        transition: none;
    }

    div-card[open] > div-expander {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        cursor: auto;
    }

    div-card > div-expander div-loader {

        position: absolute;
        top: 0%;
        left: 0%;
        color: white;
        font: 50px;
        background: rgba(0, 0, 0, .5);
        font-weight: bold;
        width: 100%;
        height: 100%;
        display: grid;
        align-items: center;
        justify-content: center;

        opacity: 0;
        z-index: -1;

        transition: opacity .25s cubic-bezier(.43,0,.02,1);

    }

    div-card[transition] div-expander div-loader{

        z-index: 5000;
        opacity: 1;

    }

    div-card:not([open]) > div-expander div-contents,
    div-card[open] > div-expander div-excerpt {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        z-index: 0;
        transition: opacity .2s ease-in-out, max-height .2s ease-in-out;
    }

    div-card[speed="rapid"]:not([open]) > div-expander div-contents,
    div-card[speed="rapid"][open] > div-expander div-excerpt{
        transition: opacity .15s ease-in-out, max-height .15s ease-in-out;
    }
    div-card[speed="slow"]:not([open]) > div-expander div-contents,
    div-card[speed="slow"][open] > div-expander div-excerpt{
        transition: opacity .35s ease-in-out, max-height .25s ease-in-out;
    }

    div-card[open] > div-expander div-contents,
    div-card:not([open]) > div-expander div-excerpt {
        max-height: 100%;
        opacity: 1;
        overflow: hidden;
        transition: opacity .2s ease-in-out, max-height .2s ease-in-out .25s;
    }

    div-card[speed="rapid"][open] > div-expander div-contents,
    div-card[speed="rapid"]:not([open]) > div-expander div-excerpt{
        transition: opacity .15s ease-in-out, max-height .15s ease-in-out .15s;
    }
    div-card[speed="slow"][open] > div-expander div-contents,
    div-card[speed="slow"]:not([open]) > div-expander div-excerpt{
        transition: opacity .55s cubic-bezier(.43,0,.02,1), max-height .25s ease-in-out .25s;
    }

    div-card > div-expander .close {
        display: block;
        position: absolute;
        transition-delay: .25s;
    }

    div-card:not([open]) > div-expander .close {
        opacity: 0;
        z-index: -1;
    }
    div-card[open] > div-expander .close {
        opacity: 1;
        z-index: 5000;
    }

    /* ——— pagination */

    div-paginator,
    div-paginator > button-group {
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;
        gap: attr(gap type(<length> | <percentage>), 0);
        width: auto;
    }

    div-paginator button-item:has(button) {
        width: auto;
        min-width: 35px;
    }

    div-paginator > button-item:last-child {
        min-width: 70px;
    }

    div-paginator button-item[hidden] {
        display: none;
    }


    /*
        :: snackbar, toast
    */

    div-snackbar {
        position: fixed;
        display: flex;
        flex-direction: column;
    }

    div-snackbar[align=left] {
        left: 0;
    }
    div-snackbar:not([align]),
    div-snackbar[align=center] {
        justify-self: center;
    }
    div-snackbar[align=right] {
        right: 0;
    }

    div-snackbar:not([align]),
    div-snackbar[from="top"] {
        top: 0;
        align-self: start;
        /* justify-content: start; */
    }

    div-snackbar[from="bottom"] {
        bottom: 0;
        align-self: end;
        /* justify-content: end; */
    }

    div-snackbar div-toast {
        display: grid;
        width: 100%;
        pointer-events: none;
        transition: opacity .25s ease-in-out, transform .25s ease-in-out;
    }

    div-snackbar[from="top"] div-toast {
        transform: translateY(-100%);
    }

    div-snackbar:not([from]) div-toast,
    div-snackbar[from="bottom"] div-toast {
        transform: translateY(100%);
    }

    div-snackbar div-toast[open] {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    div-snackbar[from="top"] div-toast[open] {
        animation: toast-enter-top .25s ease-out;
    }

    div-snackbar:not([from]) div-toast[open],
    div-snackbar[from="bottom"] div-toast[open] {
        animation: toast-enter-bottom .25s ease-out;
    }

    div-snackbar div-toast:not([open]) {
        pointer-events: none;
        opacity: 0;
    }

    @keyframes toast-enter-top {
        from {
            opacity: 0;
            transform: translateY(-100%);
        }
    }

    @keyframes toast-enter-bottom {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
    }

    div-snackbar > div-container {
        display: block;
        position: relative;
        flex: 0 0 auto;
        width: 100%;
        height: 0;
        min-height: 0;
        overflow: hidden;
        transition: height .25s ease-in-out;
    }

    div-snackbar > div-container[open] {
        height: var(--toast-height);
        animation: toast-container-open .25s ease-out;
    }

    @keyframes toast-container-open {
        from { height: 0; }
        to { height: var(--toast-height); }
    }

    div-snackbar div-toast[closein] {
        --closein: attr(closein ms, 0ms);
    }

    div-snackbar div-toast[open][closein] > div-loadbar::after {
        animation: toast-countdown var(--closein) linear forwards;
    }

    @keyframes toast-countdown {
        from { transform: scaleX(1); }
        to { transform: scaleX(0); }
    }

    div-snackbar div-toast a.close::before {
        content: '✖';
        display: inline-block;
    }
        

    /*
        :: drag n drop
    */

    *[draggable],
    [draggable] *:not(input),
    div-slot,
    div-slot *:not(input),
    div-movable {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    div-slot,
    div-movable {
        display: block;
    }

    div-movable.--active {
        position: relative;
        z-index: 50000;
        will-change: transform;
    }

}

@layer states {

    /*
        :: inert, disabled, hidden
    */

    :disabled,
    [disabled],
    [inert] {
        opacity: 0.35;
        pointer-events: none;
    }

    [hidden] {
        display: none;
    }

    /*
        :: ux standard logics
    */

    .--error {
        border-color: crimson
    }

    .--warning {
        border-color: goldenrod
    }

    .--success {
        border-color: green
    }

    .--info {
        border-color: mediumturquoise
    }

}


@layer forced {

    button-group{
        flex-flow: nowrap;
    }

    button-group:not([type=mobile])>button-item:not(:last-child){
        border-right: transparent;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    button-group:not([type=mobile])>button-item:not(:first-child){
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    @media only screen and (min-width: 1000px) {

        button-group[type=mobile]>button-item:not(:last-child){
            border-right: transparent;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        button-group[type=mobile]>button-item:not(:first-child){
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

    }

    @media only screen and (max-width: 1000px) {

        button-group[type="mobile"] {
            flex-flow: column;
        }

        button-group[type="mobile"]>button-item:first-child {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom: transparent;
        }

        button-group[type="mobile"]>button-item:not(:first-child):not(:last-child) {
            border-radius: 0px;
            border-bottom: transparent;
        }

        button-group[type="mobile"]>button-item:last-child {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        button-group[type="mobile"]>button-item{
            width: 100%;
        }

    }

    div-tag>*,
    div-tag>*:hover,
    div-tag>*:focus {
        padding: 0;
        margin: 0;
        line-height: 100%;
    }

}