a.scroll-to-top {
    display: grid;
    place-items: center;
    text-align: center;
    position: sticky;
    padding: var(--spacing);
    bottom: 0;
    left: 90%;
    width: 5%;
    z-index: 20;
    aspect-ratio: 1 / 1;
    background-color: red;
    behavior: smooth;
    transform: translateY(200%);
}

div.hamburguer-icon {

    width: 8vmin;
    border-radius: 100vmax;
    padding: .4vmin;
    background-color: rebeccapurple;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: .6vmin;
    align-items: center;
    justify-content: center;

    span {
        background-color: var(--background);
        display: block;
        width: 80%;
        height: .6rem;
        backface-visibility: hidden;
    }
}

// INTERACTIONS ------------------------------------------------

input:focus {
    outline: var(--accent) .2rem solid;
}

// SEPARATOR
div[role="separator"] {

    --_separator-h: 100%;
    --_separotor-w: .1rem;
    --bg: var(--secondary);

    height: var(--_separator-h);
    width: var(--_separotor-w);
    background-color: var(--bg, var(--secondary));
}

// CAROUSEL ----------------------------------------------------------

.carousel {

    position: relative;
    max-width: 100%;

    figure, .carousel__wrapper {

        display: flex;
        aspect-ratio: 16 / 9;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
        border-radius: 0.5rem;
        -ms-overflow-style: none; /* Hide scrollbar IE and Edge */
        scrollbar-width: none; /* Hide scrollbar Firefox */

        &::-webkit-scrollbar {
            display: none;
        }

        img, .carousel__img {
            flex: 1 0 100%;
            scroll-snap-align: start;
            object-fit: cover;
        }
    }

    & nav, & .carousel__nav {

        --bg: transparent;

        display: flex;
        column-gap: 1rem;
        position: absolute;
        bottom: 1.25rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;

        a, .carousel__link {

            width: 0.5rem;
            height: 0.5rem;
            border-radius: 50%;
            background-color: #fff;
            opacity: 0.75;
            transition: opacity ease 250ms;

            &:hover {

                opacity: 1;
            }
        }
    } 
}

// PROGRESS ----------------------------------------------------------

progress {

    --_width: var(--w-full);
    --_roundness: var(--round-full);
    --_border: var(--border);

    
    border: var(--_border);

    padding: .2rem;

    width: var(--_width);

    &::-webkit-progress-bar {

        --_bg: var(--accent);

        width: 25%;
        //height: 100%;

        border-radius: calc(2px + var(--round-peal));

        background-color: var(--accent);
        
        //background-color: var(--_bg);
    }

    // Circular Variant
}

// SEPARATOR ------------------------------------------------------
hr,
.separator {
    --_bg: var(--text);
    background-color: var(--_bg);
}

hr {
    --_bg: var(--text);
    margin-block: var(--lg);
    //border-radius: var(--roundness);
    height: 2px;
}

.separator {
    border-left: 1px solid var(--_bg);
    height: clamp(1ch, 10rem, 100vmin); 
    margin-inline: var(--lg);
    width: 2px;
    padding: 0;
    border-radius: 0;
}

// SCROLLBAR -----------------------------------------------------

:where(:root, html) {

    scrollbar-width: thin;
    scrollbar-color: var(--muted-accent) var(--muted-background);
}

::-webkit-scrollbar {

    width: 1.6vmin;
    height: 1.6vmin;
}

::-webkit-scrollbar-thumb {

    background-color: var(--muted-accent);
    border-radius: var(--round-peal);
    //border: .2vmax solid var(--);
    cursor: pointer;

    border: .2em var(--muted-background) solid;

    transition: background-color .2s ease;

    &:hover {

        background-color: var(--accent);
    }
}

/* ::-webkit-scrollbar-thumb:hover {

    background-color: red;
} */

::-webkit-scrollbar-track {

    background-color: var(--muted-background);
    border-radius: var(--round-peal);
    margin-block: 1vmin;
}

// CHIPS -------------------------------------------------------------

// https://m2.material.io/components/chips#types
span.chip {
    --_spacing: var(--sm);
    --_height: 4.5ch;
    --_bg: var(--primary);
    height: fit-content;
    width: max-content;
    border-radius: var(--round-peal);
    background-color: var(--_bg);
    padding-inline-end: var(--md);
    padding-inline-start: var(--md);
    padding-block: var(--xs);

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--_spacing);

    height: var(--_height);

    transition: background-color var(--transition-time-md) var(--transition-out-circle);

    &[data-excludable="true"] {

        padding-inline-end: var(--sm);

        &::after {
            content: "\2715";
            background-color: var(--muted-primary);
            border-radius: inherit;
            //width: ;
            height: 80%;
            aspect-ratio: 1;
            padding: 0;
            margin: 0;

            display: grid;
            text-align: center;
            place-content: center;
            //padding: .1rem;

            cursor: pointer;

            transition: color .2s var(--transition-out-circle);

        }
        &:active::after {
            color: var(--foreground-destructive);
        }
    }

    &:hover {
        --_bg: var(--foreground-primary);
    }

    &:has( > :is(img, i, svg)) {

        padding-inline-start: var(--xs);
    }

    &:first-child :is(img, i, svg) {

        border-radius: inherit;
        aspect-ratio: 1;
        width: 2em;
        object-fit: cover;
        object-position: center;
    }

    // Excludable Chip
}