@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;
    }

    .bergamot-selector {
        button {
            @include var(background-color, background-color);
            @include var(color, text-color);
            @include bordered-block;
            padding: 0.5rem;
            font-family: $font-body;

            &.active {
                border-color: $primary-color;
                font-weight: bold;
                text-decoration: underline;
                text-underline-offset: 0.15rem;
            }

            &:not(:first-child) {
                border-bottom-left-radius: 0;
                border-top-left-radius: 0;
            }

            &:not(:last-child) {
                border-bottom-right-radius: 0;
                border-top-right-radius: 0;
                border-right-width: 0;
            }
        }

        button.active + button {
            border-left-color: $primary-color;
        }

        margin-bottom: 1rem;
    }
}