// ---------------------------------------------------------------------------
//  CSS OUTPUT - The rendered CSS when compiled.
// ---------------------------------------------------------------------------

/* -- Backgrounds -- */

.wj-content:not(.wj-viewer-outer), div[wj-part='cells'] {
    color: @text;
    background: @background;
    .mixin-grad-background(@background);
}

.wj-content .wj-input-group .wj-form-control {
    color: @input-text;
    background: @input-background;
    .mixin-grad-input(@input-background);
}

.wj-listbox-item:not(.wj-state-selected):hover {
    .mixin-contrast-overlay(@background);
}

/* -- Headers -- */

.wj-header {
    background: @header;
    color: @header-text;
    .mixin-grad-header(@header);
}

.wj-flexgrid .wj-group:not(.wj-state-selected):not(.wj-state-multi-selected) {
    /* Group row background */
    background: @grid-group-background;
    color: @grid-group-text;
}

.wj-flexgrid .wj-marker {
    background: @selected;
}

/* -- Grid -- */

.wj-flexgrid div[wj-part='root'] {
    background: @background-dark;
}

.wj-state-selected {
    background: @selected;
    color: @selected-text;
}

.wj-state-multi-selected {
    background: @multi-selected;
    color: @multi-selected-text;
}

.wj-input-group .wj-form-control, .wj-grid-editor {
    background: #fff;
    color: @text-dark;
}

div[wj-part='rhcells'] .wj-header {
    .mixin-grid-left-bg();
}

.wj-cell {
    border-right: @grid-cell-border solid rgba(0, 0, 0, 0.2);
    border-bottom: @grid-cell-border solid rgba(0, 0, 0, 0.2);
}

[dir="rtl"] .wj-cell {
    border-left: @grid-cell-border solid rgba(0, 0, 0, 0.2);
}

.wj-cell:not(.wj-header):not(.wj-group):not(.wj-alt):not(.wj-state-selected):not(.wj-state-multi-selected) {
    /* Default grid cell color */
    background: @background;
}

.wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {
    /* Alternate grid cell color */
    .mixin-contrast-cell(@background);
}

.wj-frozen.wj-cell:not(.wj-header):not(.wj-group):not(.wj-alt):not(.wj-state-selected):not(.wj-state-multi-selected) {
    /* Default frozen cell color */
    background: @grid-frozen-cell;
    color: @grid-frozen-cell-text;
}

.wj-frozen.wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {
    /* Alternate frozen cell color */
    .mixin-contrast-frozen(@grid-frozen-cell);
    color: @grid-frozen-cell-text;
}

.wj-cell.wj-frozen-row {
    border-bottom-color: @text;
    border-width: @grid-cell-border;
}

.wj-cell.wj-frozen-col {
    border-right-color: @text;
    border-width: @grid-cell-border;
}

.wj-flexgrid .wj-header.wj-state-multi-selected {
    /* Selected headers */
    .mixin-contrast-selected-headers(@header);
    color: @header-text;
    font-weight: bold;
}

.wj-flexgrid .wj-colheaders .wj-header.wj-state-multi-selected {
    /* Selected column headers */
    border-bottom: 2px solid @selected !important;
}

.wj-flexgrid .wj-rowheaders .wj-header.wj-state-multi-selected {
    /* Selected row headers */
    border-right: 2px solid @selected !important;
}

.wj-flexgrid .wj-marquee {
    /* Selection Marquee */
    position: absolute;
    box-sizing: border-box;
    border: 2px solid @selected !important;
}

.wj-flexsheet .wj-marquee {
    /* FlexSheet Marquee Border */
    border: 2px solid @selected !important;
}

/* -- Buttons -- */

.wj-content .wj-input-group-btn > .wj-btn, .wj-content .wj-btn-group > .wj-btn {
    background: @button;
    color: @button-text;
    .mixin-grad-button(@button);
}

.wj-content .wj-input-group-btn > .wj-btn:hover, .wj-content .wj-btn-group > .wj-btn:hover {
    background: @button-hover;
    color: @button-text;
}

.wj-content .wj-input-group-btn > .wj-btn:focus, .wj-content .wj-btn-group > .wj-btn:focus {
    background: @button-hover;
    color: @button-text;
}

.wj-content:not(.wj-dropdown-panel):not(.wj-listbox):not(.wj-flexgrid):not(.wj-calendar-outer):not(.wj-multi-autocomplete) {
    border: @button-group-border solid rgba(0, 0, 0, 0.2);
}

.wj-btn-default {
    border: @button-group-border solid rgba(0, 0, 0, 0.2);
}

.wj-input-group-btn > .wj-btn {
    border: @button-group-border;
}

/* -- Border Radii -- */

.wj-content, .wj-input-group, .wj-btn-group, .wj-btn-group-vertical, .wj-tooltip, .customEdit {
    border-radius: @border-radius;
}

/* -- Tooltip -- */

.wj-tooltip {
    background: @tool-tip;
    color: @tool-tip-text;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* -- Gauges -- */

.wj-gauge .wj-pointer path {
    fill: @selected;
}

/* -- MultiAutoComplete -- */

.wj-control.wj-multi-autocomplete {
    border-radius: @border-radius;
}

.wj-multi-autocomplete .wj-token {
    border-radius: @border-radius;
    border: 1px solid @button;
    background: @button;
    color: @button-text;
}

.wj-multi-autocomplete .wj-token:hover {
    border-color: @button-hover;
}

.wj-multi-autocomplete .wj-token.wj-token-active {
    border-color: @button-hover;
}

.wj-multi-autocomplete .wj-token .wj-token-close,
.wj-multi-autocomplete .wj-token .wj-token-close:hover,
.wj-multi-autocomplete .wj-token .wj-token-close:focus {
    color: @button-text;
}

/* -- TreeView -- */

.wj-treeview .wj-node.wj-state-selected {
    background: @selected;
    color: @selected-text;
}

/* -- Viewer -- */

.wj-viewer .wj-toolbar,
.wj-viewer .wj-viewer-leftpanel {
    background: @header;
    color: @header-text;
    border-color: @header-text;
}

.wj-viewer .wj-toolbar .wj-svg-btn,
.wj-viewer .wj-viewer-leftpanel .wj-svg-btn {
    fill: @header-text;
    stroke: @header-text;
}

.wj-viewer .wj-tabcontent .wj-tabpane input[type='text'] {
    color: @text;
}

.wj-content.wj-viewer-outer:not(.customEdit) .wj-btn-group .wj-btn.wj-state-active .wj-svg-btn {
    fill: @selected;
    stroke: @selected;
}

.wj-viewer .wj-outlines-tree .wj-state-selected {
    background-color: @button-hover;
}

.wj-viewer .wj-outlines-tree .wj-cell a,
.wj-viewer .wj-outlines-tree .wj-cell a:hover {
    color: @selected;
}

.wj-viewer .wj-outlines-tree .wj-cell.wj-state-selected a,
.wj-viewer .wj-outlines-tree .wj-cell.wj-state-selected a:hover {
    color: @button-text;
}

.wj-viewer .wj-toolbar .wj-btn-group > .wj-btn,
.wj-content:not(.customEdit) .wj-viewer-leftpanel .wj-btn-group .wj-btn {
    background: @header;
    color: @header-text;
}

.wj-viewer .wj-toolbar .wj-btn-group > .wj-btn:hover,
.wj-content:not(.customEdit) .wj-viewer-leftpanel .wj-btn-group .wj-btn:hover,
.wj-viewer wj-toolbar-move left:hover,
.wj-viewer wj-toolbar-move right:hover,
.wj-control.wj-viewer a[wj-part^="btn-"],
.wj-control.wj-viewer a[wj-part^="btn-"]:hover {
    background-color: @button-hover;
    color: @button-text;
}

.wj-viewer .wj-toolbar .wj-btn-group > .wj-btn:hover .wj-svg-btn,
.wj-content:not(.customEdit) .wj-viewer-leftpanel .wj-btn-group .wj-btn:hover .wj-svg-btn,
.wj-viewer wj-toolbar-move left:hover .wj-svg-btn,
.wj-viewer wj-toolbar-move right:hover .wj-svg-btn,
.wj-control.wj-viewer a[wj-part^="btn-"] .wj-svg-btn,
.wj-control.wj-viewer a[wj-part^="btn-"]:hover .wj-svg-btn {
    fill: @button-text;
    stroke: @button-text;
    opacity: 1;
}

.wj-viewer .wj-toolbar .wj-btn-group > .wj-btn:focus,
.wj-content:not(.customEdit) .wj-viewer-leftpanel .wj-btn-group .wj-btn:focus,
.wj-control.wj-viewer a[wj-part^="btn-"]:focus {
    background-color: none;
    color: @button-text;
}

.wj-viewer .wj-input-group {
    border: 1px solid @header-text;
}

.wj-viewer .wj-tabcontent .wj-tabpane .wj-tabtitle-wrapper,
.wj-viewer .wj-tabcontent .wj-tabpane .wj-tabcontent-wrapper,
.wj-viewer .wj-tabcontent .wj-tabpane .wj-outlines-tree,
.wj-viewer .wj-tabcontent .wj-tabpane .wj-flexgrid div[wj-part='root'],
.wj-viewer .wj-tabcontent .wj-tabpane .wj-searchresult,
.wj-viewer .wj-tabcontent .wj-tabpane .wj-tabcontent-inner {
    background: @header;
    color: @header-text;
}

.wj-viewer .wj-tabcontent .wj-tabpane .wj-btn-group {
    border-radius: 0;
}

.wj-viewer .wj-tabcontent .wj-tabpane .wj-tabtitle,
.wj-viewer .wj-tabcontent .wj-tabpane legend {
    color: @header-text;
    border-color: @header-text;
}

.wj-viewer .wj-tabcontent .active {
    border-color: @header-text;
}

