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

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

button {
    background-color: var(--secondary-background-color);
    border-radius: 10px;
    border: none;
    box-shadow: 0 0 0px var(--shadow-color-light);
    cursor: pointer;

    color: var(--primary-text-color);

    transition: box-shadow 0.5s ease;
}

button:hover {
    box-shadow: 0px 0px 4px var(--shadow-color-light);
}

button[disabled] {
    &:hover {
        box-shadow: none;
    }

    opacity: 0.5;
    filter: saturate(0);
    cursor: not-allowed;
}

input, select, textarea {
    color: var(--secondary-text-color);
    background-color: var(--secondary-background-color);
    border: 1px solid var(--line-color-normal);
    border-radius: 4px;
    padding: 5px;

    font-family: var(--main-font-family);
    font-size: var(--main-font-size);
}

select {
    cursor: pointer;
}

input::placeholder {
    color: var(--secondary-text-color);
    opacity: 0.6;
    font-style: italic;
}

.main-container code, .main-container pre {
    background-color: var(--code-background-color);
    padding: 4px;
    border-radius: 4px;
}

.main-container pre {
    padding: 6px;
}

main pre {
    overflow-x: auto;
}

.main-container details {
    summary {
        cursor: pointer;
    }

    break-inside: avoid;
    transition: border 0.25s ease, padding 0.5s ease;
}

.main-container details[open] {
    border: 1px solid var(--line-color-light);
    border-radius: 10px;
    padding: 10px;

    > :not(summary) {
        animation: fade-in 0.5s ease 1;
    }
}

.main-container {
    h1, h2, h3 {
        break-before: auto;
        break-after: avoid;
    }

    aside {
        border-left: 2px solid var(--line-color-light);
        padding-left: 13px;
        padding-right: 13px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    aside.warning {
        color: var(--color-alert-foreground);
        background-color: var(--color-alert-background);
        background-image: linear-gradient(rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.0));
        box-shadow: 0px 0px 4px var(--shadow-color-light);

        border-bottom-right-radius: 10px;
        border-radius: 2px;

        a {
            background-color: var(--secondary-background-color);
            border-radius: 4px;
            padding: 4px;
        }

        code {
            box-shadow: inset -1px -1px 4px var(--shadow-color-light);
        }
    }

    table {
        border-collapse: collapse;
    }

    table td {
        border: 1px solid var(--line-color-light);
        padding: 3px;
    }

    table th {
        padding: 4px;
        font-weight: bold;
    }

    fieldset {
        border-color: var(--line-color-normal);
        margin-bottom: 30px;
    }

    blockquote {
        border-left: 1px solid var(--line-color-light);
        margin-left: 10px;
        padding-left: 20px;
        color: var(--text-color-faint);
    }

    main {
        // Some elements can grow larger than the available space.
        // Allow scrolling.
        @media screen {
            .scrollable-container {
                overflow-x: auto;
                display: block;
            }
        }
    }
}

// Markdown parsers may put `code` elements inside of `pre`
// elements. We don't want the background color of the `code` element
// to make parts of lines invisible.
.main-container pre code {
    background-color: transparent;

    // Let the `pre` handle the padding
    padding: 0;
}

a.settings-btn {
    color: var(--text-color-faint);
    border-radius: 4px;
    padding: 3px;
    transition: box-shadow 0.5s ease, border 0.5s ease;
    border: 1px solid transparent;

    &:hover {
        box-shadow: 0 0 4px var(--shadow-color-light);
        border: 1px solid var(--line-color-light);
    }
}

// Invert while trying to preserve color hue.
@mixin img-invert {
    filter: invert(1) hue-rotate(180deg);
}

@media (prefers-color-scheme: dark) {
    :root:not(.lightTheme) main img.auto-invert {
        @include img-invert;
    }
}

:root.darkTheme main img.auto-invert {
    @include img-invert;
}

// Users can `include' this to invert images automatically in dark mode.
@mixin auto-invert-images {
    @media (prefers-color-scheme: dark) {
        :root:not(.lightTheme) main img:not(.no-invert) {
            @include img-invert;
        }
    }

    :root.darkTheme main img:not(.no-invert) {
        @include img-invert;
    }
}