// The ui-variables file is provided by base themes provided by Atom.
@import "ui-variables";
@import "syntax-variables";



// the main component that houses everything
.agda-mode-panel-container {

    // For hiding React components
    .hidden { display: none }

    .icon::before {
        width: 1em;
        height: 1em;
        line-height: 1em;
        font-size: inherit;
    }

    h2, h3 {
        margin: 0 0 1em;
    }

    hr {
        border-color: @base-border-color;
    }

    header {
        // flexbox
        display: flex;
        justify-content: space-between;

        h2, h3 {
            margin: 0;
            line-height: inherit;
        }

        margin-bottom: 2em;
    }

    header.compact {
        margin-bottom: 0em;
    }

    // Makes buttons look like ordinary texts
    button.no-btn {
        background: inherit;
        border: none;
        border-radius: @component-border-radius;
        padding: 0;
    }
    button.no-btn:hover {
        background: @base-background-color;
    }

    ul,
    ol {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    input[type="text"] {
        margin-bottom: 1em;
    }
}

// prevents goal indices from floating above the status bar
// see #14: https://github.com/banacorn/agda-mode/issues/14
status-bar.status-bar           { z-index: 4 }
atom-pane > [is="atom-tabs"]    { z-index: 5 }
atom-text-editor[data-grammar~="agda"] {
    z-index: 0;
}
