.doenet-button {
    box-sizing: border-box;
    --button-color: var(--mainBlue);
    --button-hover-color: oklch(
        from var(--button-color) calc(max(l * 1.6, 0.7)) calc(c * 0.75) h
    );
    --button-active-color: oklch(
        from var(--button-color) calc(max(l * 1.7, 0.8)) calc(c * 0.75) h
    );
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;

    padding: 0.25rem 0.75rem;
    min-height: 1.4rem;
    margin: 0 2px;

    font-size: 12px;
    background-color: var(--button-color);
    color: white;
    border-radius: 10rem;
    cursor: pointer;
    user-select: none;

    &:hover {
        background-color: var(--button-hover-color);
        color: black;
    }
    &:active {
        background-color: var(--button-active-color);
        color: black;
    }
    &:disabled {
        background-color: var(--mainGray);
        cursor: not-allowed;
    }
    &:focus {
        outline: 2px solid white;
        outline-offset: -4px;
    }
}
.doenet-button.alert {
    --button-color: var(--mainRed);
}
.doenet-button.action-button {
    border-radius: var(--mainBorderRadius);
}
.doenet-button .button-icon {
    padding: 0.25rem 0;
    transform: translateY(0.12rem);
}
.doenet-labelled-button {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}
.doenet-labelled-button.vertical {
    flex-direction: column;
    vertical-align: bottom;
}

.doenet-button-group {
    display: inline-flex;
    align-items: stretch;
    .doenet-button {
        --separator-color: oklch(
            from var(--button-color) calc(l * 1.8) calc(c * 0.5) h
        );
        border: 1px solid var(--separator-color);
    }
    &:not(.vertical) {
        flex-direction: row;
        .doenet-button {
            margin-left: 0;
            margin-right: 0;
            /* Remove border radius on all but the first and last buttons */
            &:not(:first-child):not(:last-child) {
                border-radius: 0;
            }
            &:first-child {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
            &:last-child {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }
    }
}
.doenet-button-group.vertical {
    flex-direction: column;
    .doenet-button {
        margin-top: 0;
        margin-bottom: 0;
        /* Remove border radius on all but the first and last buttons */
        &:not(:first-child):not(:last-child) {
            border-radius: 0;
        }
        &:first-child {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
        &:last-child {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    }
}
.doenet-button {
    /* Hide the underlying checkbox */
    input[type="checkbox"],
    input[type="radio"] {
        appearance: none;
        width: 0;
        margin: 0;
        padding: 0;
        position: absolute;
        outline: none;
    }
    &:has(input) {
        border: 2px solid var(--button-color);
    }
    &:has(input:not(:checked, :focus)):hover {
        background-color: var(--button-active-color);
    }
    &:has(input:not(:checked)):hover {
        color: black;
    }
    &:has(input:checked):hover {
        color: black;
    }
    &:has(input:checked) {
        background-color: var(--button-color);
    }
    &:has(input:not(:checked)) {
        background-color: var(--canvas);
        color: var(--button-color);
    }
    &:has(input:focus) {
        outline: 2px solid white;
        outline-offset: -4px;
    }
    &:has(input:not(:checked):focus) {
        outline: 2px solid var(--button-color);
        outline-offset: -4px;
    }
}

/* Resizable Panel */
.doenet-resizable-panel-handle {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    background-color: var(--mainGray);
    border: 1px solid oklch(from var(--mainGray) calc(l * 0.8) calc(c * 0.5) h);

    svg {
        flex-shrink: 0;
        margin-left: 1px;
    }

    &.vertical {
        width: 100%;
        height: 10px;
        svg {
            margin-left: 0;
            margin-top: 0.5px;
        }
    }
    &.collapsible:not(.isOpen) {
        height: 5px;
    }
}

/* UI Components */

.doenet-ui-button {
    --outline-offset: -1px;
    --background: white;
    --border: rgb(0 0 0 / 13%);
    --light: rgb(255 255 255 / 20%);
    --shadow: rgb(0 0 0 / 10%);
    --text: black;

    &:where(.dark, .dark *) {
        --background: rgb(255 255 255 / 5%);
        --border: rgb(255 255 255 / 10%);
        --light: rgb(255 255 255 / 5%);
        --shadow: rgb(0 0 0 / 25%);
        --text: white;
        box-shadow:
            inset 0 0 0 1px var(--border),
            inset 0 -1px 0 1px var(--shadow),
            inset 0 1px 0 var(--light);
    }

    &:not(:active):hover {
        --border: rgb(0 0 0 / 33%);
    }
    &:where(.dark, .dark *):not(:active):hover {
        --border: rgb(255 255 255 / 25%);
    }
    @layer theme {
        &[aria-disabled="true"] {
            opacity: 0.5;
        }
    }
    &:active,
    &[data-active] {
        box-shadow:
            inset 0 0 0 1px var(--border),
            inset 0 2px 0 var(--border);
    }
    &:active:where(.dark, .dark *),
    &[data-active]:where(.dark, .dark *) {
        box-shadow:
            inset 0 0 0 1px var(--border),
            inset 0 1px 1px 1px var(--shadow);
    }

    cursor: pointer;
    --size: 2rem;
    display: flex;
    max-width: 100%;
    height: var(--size);
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-inline: 1rem;
    text-decoration-line: none;
    background-color: var(--background);
    color: var(--text, currentColor);
    border-style: none;
    scroll-margin: var(--padding, 0px);
    border-radius: calc(var(--rounded, 0.5rem) - var(--padding, 0px));
    font-size: 1rem;
    line-height: 1.5rem;
    box-shadow:
        inset 0 0 0 1px var(--border),
        inset 0 2px 0 var(--light),
        inset 0 -1px 0 var(--shadow),
        0 1px 1px var(--shadow);
    --outline-offset: 0;
    --outline: var(--color-primary);
    --depth: 1px;
    --padding-block: var(--depth);
    outline-width: 2px;
    outline-color: var(--outline);
    outline-offset: var(--outline-offset);
    user-select: none;
    white-space: nowrap;
    padding-block: var(--padding-block-start, var(--padding-block))
        var(--padding-block-end, var(--padding-block));
}
* {
    box-sizing: border-box;
}

body {
    background-color: gainsboro;
}
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    & > div {
        overflow: hidden;
    }
}
.banner {
    padding: 3px;
    background-color: #f0f0f0;
}

.banner-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fragment-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid #d0d7de;
    border-radius: 999px;
    background: #f6f8fa;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}

.reset-button {
    margin-left: auto;
}

.pretext-output-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1em;
    min-width: 100%;
    min-height: 100%;
    overflow: auto;

    h1 {
        margin-top: 0;
        font-size: 1.3em;
    }

    .pretext-output {
        width: 100%;
        height: 100%;
        padding: 1em;
        font-family: monospace;
        font-size: 0.9em;
        flex-grow: 1;
        resize: none;
    }

    .loading-state {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        color: #444;
    }

    .spinner {
        width: 18px;
        height: 18px;
        border: 2px solid #c9c9c9;
        border-top-color: #2f80ed;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}