@import "variables.scss";
@import "mixins.scss";

.bergamot-root {
    @include bordered-block;
    padding: 1em;

    .bergamot-section-heading {
        margin-bottom: 0.5em;
        font-family: sans-serif;
        font-weight: normal;
    }

    .bergamot-section {
        margin-bottom: 1em;
    }

    textarea {
        display: block;
        width: 100%;
        height: 10em;
        resize: none;
    }

    input[type="text"] {
        width: 100%;
        @include textual-input;
    }

    .bergamot-rule-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .bergamot-rule-list katex-expression {
        margin-left: .5em;
        margin-right: .5em;
        flex-grow: 1;
        flex-basis: 0;
    }
}