:root {
    --text-color: #eee;
    --default-bg-color: rgb(7, 7, 14);
    --bs-tertiary-bg-rgb: 18, 22, 28;
    --bs-bg-opacity: 100%;
    --btn-primary-background: green;
    --btn-primary-border: green;
    --pico-font-family:
        "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
        "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

body {
    background: repeating-conic-gradient(
        from 45deg,
        rgb(20, 20, 50) 0% 25%,
        rgb(50, 50, 80) 0% 50%
    );
    background-size: 4px 4px;
    color: var(--text-color);
    font-size: 0.9rem;

    & > header,
    & > footer {
        background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity));
        color: var(--bs-body-color);
    }

    & > header {
        @media (min-width: 1024px) {
            position: sticky;
            top: 0;
        }

        .logo {
            height: 1rem;
            width: 1rem;
            background-image: url("/assets/favicon.jpg");
            background-size: contain;
        }

        li {
            margin: 0 0.5rem;
            padding: 0;
        }
    }
}

a {
    color: var(--text-color);
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

button {
    a:hover {
        text-decoration: none;
    }

    &.primary {
        --pico-background-color: var(--btn-primary-background);
        --pico-border-color: var(--btn-primary-border);
        --pico-color: var(--pico-primary-inverse);
        cursor: pointer;
    }
}

img.htmx-indicator {
    height: 2em;
}

.htmx-indicator {
    display: none;
}

.htmx-request {
    .htmx-indicator {
        display: inline;
    }

    &.htmx-indicator {
        display: inline;
    }
}

.pointer {
    cursor: pointer;
}

#messages {
    margin: 0;
    padding: 0;
    font-size: 0.9em;
    list-style: none;

    li {
        list-style: none;
        margin: 0;
        padding: 1em;
        outline: 1px solid #555;

        &.disabled {
            opacity: 0.5;
        }
    }

    .meta {
        border-bottom: 1px solid #333;
    }
}