@layer components {

    *:has(.theme-picker) {
        position: static;
    }

    body:has(.theme-picker) {
        position: relative;
    }

    .theme-picker {
        --color-picker-bg: var(--primary-vivid);
        --color-picker-color: var(--surface-base);
        --color-picker-hover-color: var(--surface-min);

        --color-picker-shadow: var(--shadow-1);

        list-style: none;
        padding: 0;
        margin: 0;
        text-align: right;
        position: fixed;
        top: auto;
        top: 45px;
        right: 45px;
        z-index: 3;
        /* border: solid 1px; */
        display: grid;
        justify-items: end;
        align-items: center;
        gap: .5rem;
        min-width: 85px;

        /* Hide initially, show when JS loads */
        &:not(:focus-within) {
            opacity: 0;
            pointer-events: none;
        }
        /* Only show the next option */
        &>*:not(:nth-child(2)) {
            display: none;
        }

        & button {
            /* https://www.trysmudford.com/blog/a-good-reset/ */
            -webkit-appearance: none;
            box-shadow: none;
            cursor: pointer;
            /**/
            border: 0;
            /**/
            margin: 0;
            border-radius: 2em;
            min-height: 2.2rem;
            min-width: 2.2rem;
            display: grid;
            place-content: center;
            grid-template-columns: 1fr auto;
            align-items: center;
            justify-content: center;
            justify-items: center;
            gap: .5ch;
            padding: .5em 1ch;
            line-height: 1;
            background-color: var(--color-picker-bg);
            color: var(--color-picker-color);
            font-size: inherit;
            font-family: system-ui, serif;
            box-shadow: var(--color-picker-shadow);

            transition:
                padding .8s cubic-bezier(.5, .75, .75, 1.25),
                gap .4s cubic-bezier(.5, .75, .75, 1.25),
                margin .4s cubic-bezier(.5, .75, .75, 1.25),
                border-radius .2s cubic-bezier(.5, .75, .75, 1.25);

            &:hover {
                color: var(--color-picker-hover-color);
                /**border-radius: 6px;/**/
                margin-right: -3px;
            }

            &:active {
                /** filter: invert(1) hue-rotate(180deg); /**/
                color: var(--color-picker-color);
                /**border-radius: 8px;/**/
                cursor: wait;
            }

        }

        & button .icon {
            text-align: center;
            width: 1em;
            height: 1em;
            display: grid;
            place-content: center;
            padding-inline: 0;
            padding: .1em;
        }

        & button .picker-label {
            transition: all .3s ease-in-out;
            padding-inline: .25em .15em;
        }

        &:not(:is(:hover, :focus-within)) button {
            gap: 0;
        }

        &:not(:is(:hover, :focus-within)) button>*:not(.icon) {
            display: none;
        }

        transition: top .3s ease-in-out,
        right .3s ease-in-out;

        @media (width < 890px) {
            /* outline: solid 1px red; */
            top: .5rem;
            right: .5rem;
            /**/
            scale: .75;
            /**/
        }
    }
    
}