@import "variables";

// dimensions

@root-padding: 20px; // the left/right padding of the root housing element

@padding: .3rem;

@header-height: 1.5rem;

@left-border-width: 0.2rem;

// vscode: removes focus outline
*:focus {
    outline: none;
}

.agda-mode {
    height: 100%;
}

// we need this container to overcome the width problem of fixed elements
.agda-mode-header-container {
    position: fixed;
    width: 100%; // this 100% percentage is relative to the viewport rather than its parent
    left: 0; // stick it to the viewport
}

.agda-mode-keyboard {
    @button-height: 1rem;
    @button-margin: 0.2rem;

    margin: 0 @root-padding;

    // position
    //  default: stick to the top
    //  prompting: normal flow
    position: absolute;

    &.prompting {
        position: relative;
    }

    // dimension
    width : calc(100% - 2.5rem); // why 2.5 ???
    min-height: @header-height;

    &.deactivated {
        display: none
    }

    // color
    background: @header-background;

    .agda-mode-keyboard-sequence-and-candidates {
        display: flex;
        // dimensions
        padding: @padding 0;
        min-height: 1.5rem;
        line-height: 1.5rem;

        .agda-mode-keyboard-sequence {
            padding: 0rem @padding;
            flex-grow: 100;
            background: @body-background;
            font-weight: bold;
        }

        .agda-mode-keyboard-candidates {
            margin-left: @padding;

            width: calc(@button-height * 10 + @button-margin * 20);
            flex-grow: 0;
            font-weight: bold;
        }
    }

    .agda-mode-keyboard-suggestions {
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: @padding;
    }

    .agda-mode-key {
        align-self: center;

        font-size: 75%;


        background: @input-background;
        color: @foreground;

        top: 0;
        width: @button-height;
        height: @button-height;
        line-height: @button-height;
        margin: @button-margin;
        padding: 0;
        border: 0;
        border-radius: @button-margin;
        text-align: center;

        &:hover {
            background: @selection;
            cursor: pointer;
        }

        &.selected {
            background: @selection;
        }
    }
}

.agda-mode-header {

    height: @header-height;

    margin: 0 @root-padding;
    padding: calc(@padding/2) 0;

    // create a shadow at the bottom of the <Header>
    // box-shadow: @header-background 0px 3px 3px;

    background: @header-background;

    // flexbox layout for proper alignment
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: var(--agdaMode-buffer-font-size);
    font-weight: bold;

    &.success {
        color: @success
    }

    &.error {
        color: @error
    }

    &.warning {
        color: @warning
    }

    .agda-mode-header-connection-status {
        color: @foreground-subtle;
        font-size: 50%;
        // font-variant: small-caps;
        
        &.clickable {
            cursor: pointer;
            
            &:hover {
                color: @foreground-highlight;
            }
        }
    }
}

.agda-mode-body {

    @line-height: calc(var(--agdaMode-buffer-font-size)/1rem) rem;

    padding-top: calc(@header-height + @padding);

    white-space: pre;

    font-family: var(--vscode-editor-font-family);
    font-size: var(--agdaMode-buffer-font-size);
    line-height: @line-height;

    .codicon {
        vertical-align: middle;
    }

    li {
        // dimensions
        margin: @padding 0;
        padding: calc(@padding/2) @padding;

        &:first-of-type {
            margin-top: 0;
        }

        display: flex;

        &:hover {
            .item-raw-button {
                visibility: visible;
            }
        }

    }

    li.unlabeled-item,
    li.labeled-item {
        // background & border
        background: @body-background;
        border-left: @left-border-width solid @body-background;
    }

    li.header-item {
        margin: 0;
        padding: 0;

        h3 {
            margin: 0;
        }
    }

    li .item-content {
        white-space: pre-wrap;
        order: 1;
        flex-grow: 1;
    }

    // the button that shows "raw Emacs string" when clicked
    // only be visible when the parent <li> is hovered, or when it was clicked
    li .item-raw-button {
        visibility: hidden;

        order: 1;
        flex-grow: 0;

        padding-left: 1ch;

        font-variant: small-caps;
        text-align: right;

        color: @foreground-subtle;

        &:hover {
            cursor: pointer;
            color: @foreground-highlight
        }

        &.active {
            // make the button visible when clicked
            visibility: visible;

            cursor: pointer;
            color: @warning
        }
    }

    // the button that shows allow users to jump to some location
    li .item-location-button {
        order: 2;
        flex-grow: 0;

        padding-left: 1ch;

        font-variant: small-caps;
        text-align: right;


        &:hover {
            cursor: pointer;
            color: @foreground-highlight
        }
    }

    li .item-label {
        order: 2;

        margin-left: calc(@padding/2);

        font-variant: small-caps;
        font-weight: bolder;
        text-align: right;
    }

    li.special .item-label {
        color: @success
    }

    li.special {
        border-color: @success
    }

    li.warning .item-label {
        color: @warning
    }

    li.warning {
        border-color: @warning
    }

    li.error .item-label {
        color: @error
    }

    li.error {
        border-color: @error
    }

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

// the total height of .agda-mode-prompt should be the same as @header-height
.agda-mode-prompt {
    white-space: pre;
    margin: 0 @root-padding;

    input {
        // Issue #31 - make the input box larger
        width: calc(100% - @padding * 2);
        font-size: 100%;
        padding: @padding;
        height: 1rem;

        background-color: @input-background;
        border: none;
        color: @input;
    }

    input::-webkit-input-placeholder {
        color: @inputPlaceholder;
    }
}


// components
.component-link {
    color: @link;

    .codicon-link::after {
        content: " ";
        white-space: pre;
    }

    &.component-hole,
    &.component-location {
        color: @hole;
    }
}

.component-link:hover {
    color: @link-hover;
    cursor: pointer;
    text-decoration: underline;

    &.component-hole,
    &.component-location {
        color: @hole-hover;
    }
}


@indent: 2ch;

// the parent container of a Horizontal grouping
.component-horz {
    // so that we can set paddings
    display: inline-flex;
    flex-wrap: wrap;
    // use padding-left to indent every child
    padding-left: calc(@indent - 1ch);
}

// but don't indent the first child
.component-horz-item:first-of-type {
    margin-left: calc(1ch - @indent);
}

// separate each .component-horz-item
.component-horz-item {
    margin-left: 1ch;

    // no margin, for parentheses around other horz-items
    &.compact {
        margin-left: 0
    }
}

// for styling parentheses
.component-parentheses {
    color: @foreground-subtle;

    &.activated {
        cursor: ew-resize;
        color: @warning;
        font-weight: bolder;
    }
}

// for delimiters like "|"
.delimiter {
    color: @foreground-subtle
}
