@import url("./vendor/pico.2.0.6.css");
@import url("./util.css");
@import url("./picox.css");

:root {
    --pico-font-family-sans-serif: Geist, sans-serif;
    --pico-font-size: 16px;

    /* Don't make elements that huge. */
    --pico-form-element-spacing-vertical: 0.5rem;
    --pico-form-element-spacing-horizontal: 0.75rem;

    /* It's way too much blur by default. */
    --pico-modal-overlay-backdrop-filter: unset;
}

@font-face {
    font-family: "Geist";
    src:
        local("Geist"),
        url("./vendor/geistvf.woff2") format("woff2-variations");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range:
        u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329,
        u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd;
}

html {
    scrollbar-gutter: stable;
}

/* [[ Copy to clipboard ]] */

[data-copy-to-clipboard] {
    margin-left: -var(--pico-block-spacing-horizontal);
}

/* [[ Secret Reveal ]] */

details.secret {
    border: none;

    & > summary::after {
        background-image: var(--pico-icon-eye);
        width: 1.25rem;
        background-size: 1.25rem 1.25rem;
        transform: none;
    }

    &[open] {
        & > summary {
            display: none;
        }

        &[data-tooltip]::before,
        &[data-tooltip]::after {
            display: none;
        }

        cursor: default;
    }

    & > p {
        margin-bottom: 0;
    }
}

/* [[ Responsive menu ]] */

header {
    & nav {
        & li > * {
            white-space: nowrap;
        }

        & .responsive-menu__checkbox,
        .responsive-menu__label {
            display: none;
        }
    }
}

@media (max-width: 800px) {
    header nav .responsive-menu {
        display: flex;
        align-items: center;
        position: relative;

        & .responsive-menu__checkbox:checked ~ ul {
            pointer-events: all;
            opacity: 1;
        }

        & ul {
            position: absolute;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            top: 50px;
            right: 0;
            z-index: 3;
            background-color: var(--pico-dropdown-background-color);
            border: 1px solid var(--pico-dropdown-border-color);
            padding-inline: var(--pico-block-spacing-horizontal);
            box-shadow: var(--pico-box-shadow);
            transition: opacity var(--pico-transition);
            opacity: 0;
        }

        & .responsive-menu__label {
            display: block;
        }
    }
}

/* [[ Table with checkboxes and actions ]] */

.multi-select {
    &:not(:has(input:checked)) button.multi-select__action {
        opacity: var(--pico-form-element-disabled-opacity);
        pointer-events: none;
    }
}

/* [[ Error dialog ]] */

#error-dialog {
    & [data-text] {
        display: none;

        &.visible {
            display: unset;
        }
    }
}

/* [[ Avatar ]] */

img.avatar {
    border-radius: 50%;
    min-width: 1.25rem;
    max-width: 1.25rem;
}

/* [[ Icons ]] */

svg.icon {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2px;

    &.icon--theme-switch {
        --theme-toggle-duration: 0.4s;

        & :first-child path {
            transition-duration: calc(var(--theme-toggle-duration) * 0.6);
            transition-property: transform, d;
            transition-timing-function: cubic-bezier(0, 0, 0.5, 1);
        }

        & g circle,
        & g path {
            transform-origin: center;
            transition: transform calc(var(--theme-toggle-duration) * 0.65)
                cubic-bezier(0, 0, 0, 1.25) calc(var(--theme-toggle-duration) * 0.35);
        }
    }

    :where(:root[data-theme="dark"]) & {
        & g circle {
            transform: scale(1.4);
            transition-delay: 0s;
        }

        & g path {
            transform: scale(0.75);
            transition-delay: 0s;
        }

        & :first-child path {
            d: path("M-9 3h25a1 1 0 0017 13v30H0Z");
            transition-delay: calc(var(--theme-toggle-duration) * 0.4);
            transition-timing-function: cubic-bezier(0, 0, 0, 1.25);
        }

        @supports not (d: path("")) {
            & :first-child path {
                transform: translate3d(-9px, 14px, 0);
            }
        }
    }
}

small svg.icon {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--pico-muted-color);
}

/* [[ Secondary links ]] */

a.secondary {
    color: var(--pico-muted-color);
    transition: color var(--pico-transition);

    &:hover {
        color: var(--pico-color);
    }
}

/* [[ Main content min height ]] */

body > main {
    min-height: 50vh;
}

/* [[ Footer ]] */

body > footer {
    padding-top: 4rem;
    background-color: var(--pico-background-color);
    filter: opacity(0.9);

    & ul a {
        color: var(--pico-contrast);
    }

    & .footer__claim {
        padding-right: 3rem;
    }
}