@import "base";

nav#menu div.menu-container {
    max-width: initial;
}

#playground {
    padding: 1em;
}

#toolbar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    margin-bottom: 1em;

    input[type="checkbox"]
    {
        vertical-align: middle;
    }
    select, button {
        background-color: $white;
        color: $default-color;
        border: 1px solid $gray-highlight-color;
        border-radius: 3px;
        padding: 5px;
    }

    #toolbar-godbolt {
        img {
            height: 1em;
        }
    }
}

#editors {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;

    .editor-container {
        flex: 1;
        min-width: 30em;
        height: 30em;

        border: 1px solid $gray-highlight-color;
        margin: 5px;
    }
    .editor {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .ace_editor {
        background-color: $background-color;
        color: $default-color;
    }
    .ace_gutter {
        background-color: $white;
        color: $default-color;
    }
    .ace_gutter-active-line {
        background-color: $white;
        color: $gray-highlight-color;
    }
}

#output {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;

    .output-container {
        flex: 1;
        min-width: 30em;

        border: 1px solid $gray-highlight-color;
        padding: 2px 5px;
        margin: 5px;
    }
    #output-text {
        font-family: monospace;
        white-space: pre-wrap;
    }
    #output-graph {
        display: none;

        svg {
            width: 100%;
            background-color: #fdfdfd;

            text {
                stroke: initial;
            }
        }
    }
}

