/* The padder can applied to any top level element like a container and doesn't do anything but add padding */
@property --padding {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
}
.padder {
    --padding-min: 0.5rem;
    --width-max: 1000px;
    --padding: max(var(--padding-min), (100vw - var(--width-max)) / 2);
    padding-inline: var(--padding);
    container-type: inline-size;
    /* The breakout applies padding margin and width, so let it place its children, and style those */
    .breakout {
        width: calc(100cqi + (2 * var(--padding)));
        margin-inline-start: calc(-1 * var(--padding));
    }
}

section > [block] {
    &[light] {
        background-color: var(--bg-light);
    }
    &[dark] {
        background-color: var(--bg-dark);
    }
    &:not([light]):not([dark]) {
        background-color: var(--bg);
    }
}

.card {
    background-color: var(--bg);
    border-radius: 0.5em;
    padding: 1em;
    margin-block: 1em;

    > :first-child {
        margin-block-start: 0;
    }
    > :last-child {
        margin-block-end: 0;
    }

    &.light {
        background-color: var(--bg-light);
    }
    &.dark {
        background-color: var(--bg-dark);
    }
}

/* Table of Contents */
:is(.gloss, .toc) {
    background-color: var(--bg-light);
    margin: 1em 0;

    ul {
        list-style-type: none;
        padding-inline-start: 1em;
    }
    li {
        font-size: 0.9em;
        text-transform: capitalize;
    }
    > ul > li {
        font-size: 1em;
        text-transform: uppercase;
    }
}
.gloss {
    font-size: 0.8em;
}

.toc {
    background-color: var(--bg);
    padding-block: calc(var(--header-height) / 2);
    h2 {
        margin: 0;
    }
    a:hover {
        text-decoration: underline;
    }
}

ul .operator {
    width: 2.5em;
    font-family: Monaco, monospace;
    display: inline-block;
}

.tutorial-author {
    margin-block: 2em;
    padding-block: 0;
    border-width: 0;
    font-size: 0.8rem;
}

/* Navbar and Header */
.navbar {
    background-color: var(--bg-light);
    line-height: var(--header-height);
    color: var(--text);

    h1 {
        font-size: 1.1em;
        font-family: arial, sans-serif;
    }
    h1,
    p {
        margin: 0;
    }
    a {
        color: inherit;
        text-decoration: none;
        &:hover {
            background-color: var(--bg);
        }
    }
}

.hero {
    background-color: var(--bg);
    padding: 2em 0;
    margin-bottom: 2em;
}

/* Buttons */
.btn {
    display: inline;
    position: initial;
    padding: 0.5rem 1rem;
    border-radius: 0.2rem;
    font: inherit;
    color: inherit;
    background-color: var(--bg-light);
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    cursor: pointer;
    line-height: 1;
    outline: 0;
}

.example {
    display: block;
    margin-inline: auto;
    width: min(100% - 2rem, 600px);
    resize: both;

    iframe& {
        border: 2px solid var(--border);
        border-radius: 0.5rem;
    }
}