@layer baseTheme, themeOverrides;

@layer baseTheme {
    :root {
        --theme-color: #921A97;
        --secondary-color: #5A4FCF;

        --black: #000000;
        --gray-950: #1A1A1A;
        --gray-700: #666666;
        --gray-500: #B3B3B3;
        --gray-200: #E6E6E6;
        --gray-100: #F2F2F2;
        --white: #FFFFFF;

        color-scheme: light dark;
        --gray-visibility-max: var(--black);
        --gray-visibility-full: var(--gray-950);
        --gray-visibility-high: var(--gray-950);
        --gray-visibility-medium: var(--gray-700);
        --gray-visibility-low: var(--gray-500);

        --background-visibility-max: var(--white);
        --background-visibility-full: var(--gray-100);
        --background-visibility-high: var(--gray-200);
        --background-visibility-medium: var(--gray-500);
        --background-visibility-low: var(--gray-700);

        --background: var(--background-visibility-max);
        --text: var(--gray-visibility-full);
        --color-link: #0000EE;
        --color-link-hover: var(--color-link);
        --color-link-visited: rebeccapurple;
        --color-link-hover-visited: var(--color-link-visited);
        --color-link-active: #F24040;
    }

    @media (prefers-color-scheme: dark) {
        :root:has(input[id$="light"]:not(:checked)), :root:not(:root:has(theme-switcher), :root[data-theme$="light"]) {
            --gray-visibility-max: var(--white);
            --gray-visibility-full: var(--gray-100);
            --gray-visibility-high: var(--gray-200);
            --gray-visibility-medium: var(--gray-500);
            --gray-visibility-low: var(--gray-700);

            --background-visibility-max: var(--black);
            --background-visibility-full: var(--gray-950);
            --background-visibility-high: var(--gray-700);
            --background-visibility-medium: var(--gray-500);
            --background-visibility-low: var(--gray-200);

            --color-link: #8C8CFF;
            --color-link-visited: #FFADFF;
            --color-link-active: #FF6666;
        }
    }

    :root:has(input[id$="dark"]:checked), [data-theme$="dark"]:not(:root:has(theme-switcher)) {
        --gray-visibility-max: var(--white);
        --gray-visibility-full: var(--gray-100);
        --gray-visibility-high: var(--gray-200);
        --gray-visibility-medium: var(--gray-500);
        --gray-visibility-low: var(--gray-700);

        --background-visibility-max: var(--black);
        --background-visibility-full: var(--gray-950);
        --background-visibility-high: var(--gray-700);
        --background-visibility-medium: var(--gray-500);
        --background-visibility-low: var(--gray-200);

        --color-link: #8C8CFF;
        --color-link-visited: #FFADFF;
        --color-link-active: #FF6666;
    }
}

@layer themeOverrides {
    :root:has(input[id="theme-twilight-dark"]:checked), [data-theme="theme-twilight-dark"]:not(:root:has(theme-switcher)) {
        --theme-color: #EF4F91;
        --background: #4D1B7B;
        --color-link: #EF4F91;
        --color-link-hover: #C79DD7;
        --color-link-visited: hsl(from var(--color-link) h s calc(l - 20));
        --color-link-hover-visited: var(--color-link-hover);
        --color-link-active: hsl(from var(--color-link) h calc(s + 20) l);
    }
}

body {
    background-color: var(--background);
    color: var(--text);

    margin-inline: 1rem;

    scrollbar-gutter: stable both-edges;
}

@media (width >= 720px) {
    body {
        margin-inline: 20%
    }
}

:link {
    color: var(--color-link);
}

:visited {
    color: var(--color-link-visited);
}

a:hover {
    color: var(--color-link-hover);
}

a:visited:hover:not(:active) {
    color: var(--color-link-hover-visited);
}

:any-link:active {
    color: var(--color-link-active);
}

nav {
    font-size: 1.5rem;
    border-block: 4px double var(--gray-visibility-medium);
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    margin-block: 0.75rem;
}

nav ul li {
    padding-right: 2em;
}

#smolblog-frame {
    height: 16rem;
    overflow-y: scroll;
    padding-inline: 1rem;
    scrollbar-gutter: stable;
    border: 2px dotted var(--secondary-color);
}

#smolblog-frame time {
    color: var(--theme-color);
}

#smolblog-frame p.unread time {
    color: var(--secondary-color);
    font-weight: bold;
}

#smolblog-frame p:nth-child(1 of .unread)::before, #smolblog-frame p:nth-last-child(1 of .unread)::after {
    --gap: 4em;
    --line-width: 2px;
    --dash-length: 16px;
    content: 'unread posts';
    display: block;
    margin-block: 1rem;
    background:
        linear-gradient(to right, transparent calc(50% - var(--gap)), var(--background) 0 calc(50% + var(--gap)), transparent 0), /* gap around text */
        linear-gradient(to bottom, var(--background) calc(50%), transparent 0 calc(50% + var(--line-width)), var(--background) 0), /* vertical cutout */
        linear-gradient(to right, transparent 50%, var(--background) 50%), /* dashing */
        var(--secondary-color); /* line color */
    background-size:
        100%, /* gap cutout should stretch entire thing */
        100%, /* vertical cutout too */
        var(--dash-length) var(--line-width), /* dash cutout gets adjusted to parameters*/
        100%; /* color would implicitly stretch entire thing, but we define it anyway */
    text-align: center;
    color: var(--secondary-color);
    font-weight: bold;
}

#own-badges, #website-badges, #random-badges {
    margin-block: 1rem;
}

#squimsh-button {
    transition: transform 0.1s ease;
    padding: 0;
    width: 8em;
    height: 8em;
    box-sizing: content-box;
    border: solid 1px var(--theme-color);
    border-radius: 100%;
    cursor: pointer;
}

#squimsh-button img {
    width: 8em;
    border-radius: 100%;
}

#squimsh-button:active {
    transform: scale(.8, .6);
}

#squimsh-count {
    border: none;
    display: block;
}

.badge a {
    display: inline-block;
    line-height: 0;
}

.badge img {
    image-rendering: pixelated;
}

.badge a:hover img {
    outline: solid 2px var(--theme-color);
}

theme-switcher {
    display: flex;
}

theme-switcher label {
    padding: 8px;
    border: 2px dashed var(--background);
    height: 2rem;
    width: 2rem;

    cursor: pointer;
}

theme-switcher input {
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

theme-switcher img {
    width: 2rem;
    height: 2rem;
}

theme-switcher label:has(input:not(:checked)) img {
    filter: grayscale() brightness(0.5);
}

theme-switcher label:has(input:checked) {
    border-color: var(--gray-visibility-medium);
}