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

// ".agda", a namespace for modules in atom-text-editor
atom-text-editor.agda {

    //////////////////////////////////////////////////////
    // Goals
    //////////////////////////////////////////////////////

    // the background of the hole
    .goal .region {
        background: fade(mix(@syntax-background-color, @syntax-text-color, 60%), 50%);
    }

    // the index that appears at the end of a hole
    .goal-index {
        color: @background-color-info;
        position: relative;
    }

    // Fixes the problem that the "ghost" of a goal index that remains at the
    // original unshifted position would block some events (e.g. mouse clicks)
    // from getting through.
    atom-overlay {
        pointer-events: none;
    }

    //////////////////////////////////////////////////////
    // Highlightings
    //////////////////////////////////////////////////////

    .highlight-decoration.unsolvedmeta .region {
        @color: saturate(@background-color-warning, 100%);
        background: fade(mix(@color, @syntax-background-color, 60%), 50%);
    }

    .highlight-decoration.unsolvedconstraint .region {
        @color: saturate(@background-color-warning, 100%);
        background: fade(mix(@color, @syntax-background-color, 60%), 50%);
    }

    .highlight-decoration.terminationproblem .region {
        @color: saturate(@background-color-error, 100%);
        background: fade(mix(@color, @syntax-background-color, 80%), 50%);
    }

    .highlight-decoration.coverageproblem .region {
        @color: saturate(@background-color-warning, 100%);
        background: fade(mix(@color, @syntax-background-color, 60%), 50%);
    }
    .highlight-decoration.hover .region  {
        @color: saturate(@background-color-info, 100%);
        background: fade(mix(@color, @syntax-background-color, 80%), 50%);
    }


    //////////////////////////////////////////////////////
    // Input Method
    //////////////////////////////////////////////////////

    // the visual indicator
    .input-method-decoration .region {
        border-bottom: 2px dotted @syntax-text-color;
    }

}

// remove that 1px left and bottom border coming with the panel
// TODO, be more specific, target only agda-mode
.panel-bottom {
    border: 0;
}

.agda-mode-panel-container {

    @headerHeight: 50px;


    //////////////////////////////////////////////////////
    // Background Messages
    //////////////////////////////////////////////////////

    .background-message {
        text-align: center;
        font-size: 150%;
        color: @text-color-subtle;
        line-height: 300%;
    }


    //////////////////////////////////////////////////////
    // <SizingHandle>
    //////////////////////////////////////////////////////

    .sizing-handle-anchor {
        position: relative;
        height: 0px;
        width: 100%;
        .sizing-handle {
            height: 5px;
            width: 100%;
            position: absolute;
            cursor: row-resize;
        }
    }

    //////////////////////////////////////////////////////
    // <InputMethod>
    //////////////////////////////////////////////////////

    .input-method {
        @button-height: 20px;

        height: @headerHeight;
        line-height: @headerHeight;

        display: flex;
        align-items: flex-start;
        justify-content: space-between;

        font-family: inconsolata, Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", Monaco, "Lucida Console", monospace;

        .keyboard {
            display: flex;
            align-items: flex-start;
            margin-top: 5px;

            // Buffer
            .buffer {
                height: 20px;
                line-height: 20px;
                font-size: 100%;
                background: @input-background-color;
                border-radius: @component-border-radius;
                padding: 0 @component-padding;
            }
        }

        .candidates {
            margin-top: 5px;
        }

        // key buttons
        button.btn {
            top: 0;
            width: @button-height;
            height: @button-height;
            line-height: @button-height;
            margin: 0;
            padding: 0;
            text-align: center;
            border-radius: @component-border-radius;
            background: @background-color-selected;
            &:hover {
                font-size: 200%;
                position: relative;
                width: 40px;
                height: 40px;
                margin: -10px;
                z-index: 5;
                background: @button-background-color-selected;
            }
            &.selected {
                background: @button-background-color-selected;
            }
        }
    }

    //////////////////////////////////////////////////////
    // <Header>
    //////////////////////////////////////////////////////

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

    //////////////////////////////////////////////////////
    // <MiniEditor>
    //////////////////////////////////////////////////////

    .mini-editor {
        min-height: 30px;
        line-height: 30px;
        padding: 0 @component-padding;
        margin: 10px 0;
        font-size: 100%;
    }

    //////////////////////////////////////////////////////
    // Breadcrumbs
    //////////////////////////////////////////////////////

    .breadcrumb {
        // overflow: hidden;
        width: 100%;
        display: flex;
    }

    .breadcrumb li a {
        height: @component-line-height + @component-padding * 2;
        line-height: @component-line-height;
        padding:  @component-padding;

        // remove the underline
        text-decoration: none;

        position: relative;
        display: block;
    }

    .breadcrumb li a::after {
        content: " ";
        display: block;
        width: 0;
        height: 0;
        border-top: 22.5px solid transparent; /* Go big on the size, and let overflow hide */
        border-bottom: 22.5px solid transparent;
        border-left: 10px solid transparent;
        position: absolute;
        top: 50%;
        margin-top: -22.5px;
        left: 100%;
        z-index: 2;
    }

    .breadcrumb li a::before {
        content: " ";
        display: block;
        width: 0;
        height: 0;
        border-top: 22.5px solid transparent;
        border-bottom: 22.5px solid transparent;
        border-left: 10px solid transparent;
        position: absolute;
        top: 50%;
        margin-top: -22.5px;
        // margin-left: 1px;
        left: 100%;
        z-index: 1;
    }

    .breadcrumb li:not(:first-child) a {
        padding-left: @component-padding * 2;
    }

    @tier-1-color: @base-background-color;
    @tier-2-color: @tab-background-color;
    @tier-3-color: @tab-bar-border-color;

    .breadcrumb li:nth-child(1) a       { background:        @tier-1-color; }
    .breadcrumb li:nth-child(1) a:after { border-left-color: @tier-1-color; }
    .breadcrumb li:nth-child(1) a:hover       { background:        lighten(@tier-1-color, 10%);}
    .breadcrumb li:nth-child(1) a:hover:after { border-left-color: lighten(@tier-1-color, 10%);}

    .breadcrumb li:nth-child(2) a       { background:        @tier-2-color; }
    .breadcrumb li:nth-child(2) a:after { border-left-color: @tier-2-color; }
    .breadcrumb li:nth-child(2) a:hover       { background:        lighten(@tier-2-color, 10%);}
    .breadcrumb li:nth-child(2) a:hover:after { border-left-color: lighten(@tier-2-color, 10%);}

    .breadcrumb li:nth-child(3) a       { background:        @tier-3-color; }
    .breadcrumb li:nth-child(3) a:after { border-left-color: @tier-3-color; }
    .breadcrumb li:nth-child(3) a:hover       { background:        lighten(@tier-3-color, 10%);}
    .breadcrumb li:nth-child(3) a:hover:after { border-left-color: lighten(@tier-3-color, 10%);}

    .breadcrumb li:last-child a {
        // background: transparent !important;
        pointer-events: none;
        cursor: default;
    }



    //////////////////////////////////////////////////////
    // <Exprs>
    //////////////////////////////////////////////////////

    .expr.question-mark {
        color: @text-color-info;
    }

    .expr.underscore {
        color: @text-color-success;
    }

    //////////////////////////////////////////////////////
    // <Links>
    //////////////////////////////////////////////////////

    .link {
        color: @text-color-highlight;
        // text-decoration: underline;
    }
    .link:hover {
        color: @text-color-selected;
        cursor: pointer;
    }

    //////////////////////////////////////////////////////
    // <Links>
    //////////////////////////////////////////////////////

    .syntax.qname {
        color: @text-color-highlight;
    }

    //////////////////////////////////////////////////////
    // <Range>
    //////////////////////////////////////////////////////

    .range:hover {
        color: @text-color-selected;
        cursor: pointer;
    }
}
