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 {
    color: var(--secondary-text-color);
    background-color: var(--secondary-background-color);
    border: 1px solid var(--line-color-light);
    border-radius: 4px;
    padding: 5px;

    font-family: $serif-font;
    font-size: $font-size-main;
}

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-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);
        }
    }
}

// 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;
}