@import url('./_template/styles/main.css');
:root {
    --background-lighter: #f5fff5;
    --background-light: #f0f5f0;
    --background: #e5f0e5;
    --background-dark: #d0e5d0;
    --font-dark: #305030;
    --gray-100: #ececec;
    --border-dark: var(--background-dark);
}

.limited-example-output .example-output {
    max-width: 50vw;
    word-wrap: break-word;
    word-break: break-all;
    overflow-x: hidden;
    line-break: anywhere;
    white-space: break-spaces;
}

/* @import url('../src/default.css');

td {
    border: 1px solid black;
}
table {
    border-collapse: collapse;
    font-family: monospace;
}

.grammar-expression {
    font-family: monospace;
}


.grammar-test {
    display: flex;
}

.parser-configuration-test-output-container > div {
    display: flex;
}

.grammar-test figcaption {
    font-size: 0.8em;
}
.grammar-test figcaption > * {
    padding: 0.5em;
}
.grammar-test figcaption > :nth-child(2) {
    color: #999;
}

.grammar-container.error > div {
    white-space: pre-wrap;
    font-family: monospace;
} */

.example-with-output {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--background-light);
    padding: 0 0.5rem;
    gap: 0.5rem;
}
.example-with-output > pre {
    border: 1px solid var(--border-dark);
}
.example-with-output > div > div {
    flex: 1;
    margin: 0.5rem 0;
}
.example-output,
.example-output.grammar {
    border: 1px solid var(--border-dark);
    background-color: #f9f6f4;
    font-size: 1em;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    padding: 1em;
}