/*
.css file is autogenerated, edit only .scss file and commit changes with SASS processor, e.g. sassc:

    sassc --style compact common.scss common.css
*/

:root {
    font-face: "Helvetica Neue, Liberation Sans, DejaVu Sans, Verdana, Arial, Helvetica, Roboto, Droid Sans";
    font-family: sans-serif;
    font-size: 13px;
    color: var(--text-color);

    --main-color: #4e93da;
    --secondary-color: #2e93fa;
    --hovered-color: #e2edf9;

    --window-bg: #f0f1f1;
    --dialog-bg: #f0f1f1;

    --header-color: #e4e4e4;
    --top-pane-color: #f3f4f5;
    --pane-color: #fff;
    --pane-color-disabled: #f0f0f0;

    --control-color: #fff;
    --control-color-active: #f7f7f7;
    --control-gradient: linear(0deg, #eeeeee, #dddddd);
    --control-gradient-active: linear(190deg, #e3e3e3, #dfdfdf);

    --pale-border-color: rgba(0, 0, 0, 0.3);
    --paler-border-color: rgba(0, 0, 0, 0.2);
    --palest-border-color: rgba(0, 0, 0, 0.1);

    --text-color: #404040;
    --inverse-text-color: #f0f0f0;
    --hovered-label-color: #46617e;
    --disabled-text-color: rgba(64, 64, 64, 0.5);
}

Panel {
    gap: 6px;
}

/* controls */

ButtonLike {
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--pale-border-color);
    background-image: var(--control-gradient);
    focus-rect-color: #bbb;
    transition: border-color 75ms ease;

    &:hovered:not(checked) {
        border-color: var(--main-color);
    }

    &:hovered {
        color: var(--hovered-label-color);
    }

    &:pressed,
    &:checked {
        border-color: var(--main-color);
        background-image: var(--control-gradient-active);
    }

    &:not(enabled) {
        border-color: var(--palest-border-color);
        background: none;
        background-color: var(--pane-color-disabled);
        color: var(--disabled-text-color);
    }

    &:not(enabled) > .icon {
        opacity: 0.4;
    }

    > .label {
        flex: 1;
        padding: 0;
        text-align: center;
        text-hotkey: underline-on-alt;
        text-overflow: ellipsis;
        transition: color 75ms ease;
    }
}

ButtonLike.flat {
    background: none;
    focus-rect-color: none;
}

Link > ButtonLike {
    padding: 3px;
    border: none;
    background: none;

    > .label {
        color: var(--secondary-color);
        text-align: start;
        text-overflow: ellipsis-middle;
    }

    &:hovered > .label {
        text-decoration: underline;
    }

    &:not(enabled) {
        color: var(--disabled-text-color);
    }
}

Link > Label {
    color: var(--secondary-color);
    text-overflow: ellipsis-middle;
}
Link:hovered > Label {
    text-decoration: underline;
}
Link:not(enabled) > Label {
    color: var(--disabled-text-color);
}

CheckBox,
RadioButton {
    align-items: center;
    padding: 2px;

    > .label {
        flex: 1;
        padding: 0;
        text-hotkey: underline-on-alt;
        text-overflow: ellipsis;
    }

    &:hovered {
        color: var(--hovered-label-color);
    }

    &:not(enabled) {
        color: var(--disabled-text-color);
    }
}

CheckBox > .icon,
RadioButton > .icon,
MenuItem > .check,
MenuItem > .radio {
    flex: 0;
    min-width: 16px;
    min-height: 16px;
}

CheckBox:not(enabled) > .icon,
RadioButton:not(enabled) > .icon,
MenuItem:not(enabled) > .check,
MenuItem:not(enabled) > .radio {
    opacity: 0.4;
}

CheckBox:enabled:not(checked):hovered > .icon,
RadioButton:enabled:not(checked):hovered > .icon,
MenuItem:enabled:not(checked):hovered > .check,
MenuItem:enabled:not(checked):hovered > .radio {
    border-color: var(--pale-border-color);
}

CheckBox:not(checked):pressed > .icon,
RadioButton:not(checked):pressed > .icon,
MenuItem:not(checked):pressed > .check,
MenuItem:not(checked):pressed > .radio {
    background-color: var(--control-color-active);
    border-color: var(--pale-border-color);
}

CheckBox:not(checked) > .icon,
MenuItem:not(checked) > .check {
    background-color: var(--control-color);
    border-width: 1px;
    border-style: solid;
    border-color: var(--paler-border-color);
    border-radius: 3px;
}

CheckBox:checked > .icon,
MenuItem:checked > .check {
    background: url(btn_check_on);

    &:hovered {
        background: url(btn_check_on_focused);
    }

    &:pressed {
        background: url(btn_check_on_pressed);
    }
}

RadioButton > .icon,
MenuItem > .radio {
    background-color: var(--control-color);
    border-width: 1px;
    border-style: solid;
    border-color: var(--paler-border-color);
    border-radius: 50%;
}

RadioButton:checked > .icon,
MenuItem:checked > .radio {
    border-color: var(--main-color);
    border-width: 5px;
}

SwitchButton {
    background: url(switch_off);

    &:not(enabled) {
        opacity: 0.4;
    }

    &:checked {
        background: url(switch_on);
    }
}

Canvas {
    min-width: 50px;
    min-height: 50px;
}

/* text */

Label {
    padding: 2px;

    &:not(enabled) {
        color: var(--disabled-text-color);
    }
}

/* layout.linear */

Resizer {
    min-width: 6px;
    min-height: 6px;
    padding: 1px;
    background-clip: content-box;

    &:hovered {
        background-color: rgba(255, 255, 0, 0.25);
    }

    &:focused,
    &:pressed {
        background-color: var(--main-color);
        opacity: 0.75;
    }
}

/* groupbox */

GroupBox {
    padding: 20px 10px 16px;

    --frame-top-left: none;
    --frame-top-right: none;
    --frame-bottom: none;
}

GroupBox > .caption {
    padding: 1px;
    text-overflow: ellipsis;
}

/* lists */

ListView {
    min-width: 2em;
    min-height: 2em;
    width: 10em;
    height: 10em;
    border-width: 1px;
    border-style: solid;
    border-color: var(--paler-border-color);
    background-color: var(--pane-color);
    transition: border-color 100ms ease;

    &:focused {
        border-color: var(--secondary-color);
    }

    &:not(enabled) {
        background-color: var(--pane-color-disabled);
    }

    > .item {
        padding: 2px 4px;

        &:hovered {
            background-color: var(--hovered-color);
        }

        &:focused,
        &:selected {
            background-color: var(--main-color);
            color: var(--inverse-text-color);
        }
    }
}

/* combobox */

ComboBoxBase {
    align-items: center;
    padding: 3px 4px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--paler-border-color);
    background-image: var(--control-gradient);
    transition: border-color 100ms ease;

    &:hovered, &:pressed, &:focus-within, &.opened {
        border-color: var(--main-color);
        color: var(--hovered-label-color);
    }

    &:not(enabled) {
        border-color: var(--pale-border-color);
        opacity: 0.4;
    }

    > .body {
        flex: 1;
        min-width: 40px;
        padding: 2px;
        transition: color 100ms ease;
    }

    > .arrow {
        padding: 2px;
    }
}

Popup.combobox > ListView {
    width: auto;
    height: auto;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

    &:not(enabled) {
        background-color: var(--inverse-text-color);
    }
}

ComboBox, IconTextComboBox {
    &:pressed, &.opened {
        background-image: var(--control-gradient-active);
    }
}

ComboEdit {
    padding: 0;
    gap: 0;
    background-color: var(--pane-color);
    background-image: none;
    cursor: auto;

    > TextField.body {
        padding: 5px;
        border: none;
        background: none;
        color: var(--text-color);
    }

    > ButtonLike.arrow {
        padding: 5px;
        border: none;
        background: none;
    }
}

/* menu */

Menu {
    width: auto;
    height: auto;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    background-color: var(--top-pane-color);
}

MenuBar {
    margin: 0;
    padding-left: 3px;
    flex-shrink: 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}

MenuItem {
    padding: 6px 4px;

    &:hovered {
        background-color: var(--hovered-color);
    }

    &:focused,
    &:selected {
        background-color: var(--main-color);
        color: var(--inverse-text-color);
    }

    &:not(enabled) {
        color: var(--disabled-text-color);

        > .icon {
            opacity: 0.4;
        }
    }

    &.separator {
        padding: 4px;

        > * {
            min-width: 1px;
            min-height: 1px;
            background: var(--paler-border-color);
        }
    }

    > .icon {
        padding: 0 2px;
    }

    > .label {
        padding: 0 4px;
        text-hotkey: underline-on-alt;
    }

    > .shortcut {
        padding-top: 0 2px 0 8px;
        text-align: end;
    }
}

/* tree */

TreeItemWidget {
    min-width: 100px;
    min-height: 1em;
    gap: 0;

    > Panel {
        padding: 2px 4px;
        gap: 0;

        > ImageWidget {
            padding-right: 3px;
        }
    }

    &:hovered > Panel {
        background-color: var(--hovered-color);
    }

    &:pressed > Panel,
    &:selected > Panel {
        background-color: var(--main-color);
        color: var(--inverse-text-color);
    }

    &:default > Panel > Label {
        font-weight: bold;
    }
}

/* grid */

StringGridWidget {
    min-width: 100px;
    min-height: 60px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--paler-border-color);
    background-color: var(--pane-color);
    font-face: "Menlo,Consolas,DejaVuSansMono,Lucida Sans Typewriter,Courier New,Lucida Console";
    transition: border-color 100ms ease;

    --selection: #{fade-out(#4040ff, 0.5)};
    --selection-row: #{fade-out(#a0b0ff, 0.8)};
    --cell-bg-fixed: #{fade-out(#e0e0e0, 0.8)};
    --cell-bg-header: #{fade-out(#909090, 0.8)};
    --cell-bg-header-selected: #{fade-out(#ffc040, 0.5)};
    --cell-border: #{fade-out(#c0c0c0, 0.8)};
    --cell-border-header: #{fade-out(#202020, 0.8)};

    &:focused {
        border-color: var(--secondary-color);
    }

    &:not(enabled) {
        background-color: var(--pane-color-disabled);
    }
}

/* scroll */

ScrollArea {
    min-width: 200px;
    min-height: 150px;
}

/* scrollbar */

ScrollBar,
ElemScrollBar {
    background-color: rgba(0, 0, 0, 0.05);

    --button-up: url(scrollbar_btn_up);
    --button-down: url(scrollbar_btn_down);
    --button-left: url(scrollbar_btn_left);
    --button-right: url(scrollbar_btn_right);
    --indicator-vertical: none;
    --indicator-horizontal: none;

    &:not(enabled) {
        opacity: 0.4;
    }
}

ScrollIndicator {
    padding: 3px;
    background-color: #c2c2c2;
}

PageScrollButton {
    &:pressed {
        background-color: rgba(64, 64, 128, 0.1);
    }

    &:hovered {
        background-color: rgba(64, 64, 128, 0.05);
    }
}

AbstractSlider {
    &:not(enabled) {
        opacity: 0.4;
    }
}

SliderHandle {
    padding: 5px;
    border: 1px solid transparent;
    background-color: var(--main-color);
    background-clip: padding-box;

    &:pressed {
        opacity: 0.7;
    }
}

AbstractSlider {
    > .range-before,
    > .range-after {
        border-color: transparent;
        background-color: #888;
        background-clip: padding-box;
    }

    &.horizontal {
        > .range-before,
        > .range-after {
            border-top-width: 4px;
            border-bottom-width: 4px;
        }
    }

    &.vertical {
        > .range-before,
        > .range-after {
            border-left-width: 4px;
            border-right-width: 4px;
        }
    }
}

Slider {
    > .range-before {
        background-color: var(--main-color);
    }
}

RangeSlider {
    > .range-between {
        border-color: transparent;
        background-color: var(--main-color);
        background-clip: padding-box;
    }

    &.horizontal > .range-between {
        border-top-width: 4px;
        border-bottom-width: 4px;
    }

    &.vertical > .range-between {
        border-left-width: 4px;
        border-right-width: 4px;
    }
}

/* tabs */

Tabs {
    gap: 0;
}

TabBar {
    padding-left: 3px;
    padding-right: 3px;
}

TabBar > .more {
    opacity: 0.6;
    transition: opacity 100ms ease;

    &:hovered {
        opacity: 1;
    }
}

TabContent {
    justify-self: stretch;
    padding: 6px;
    background-color: var(--top-pane-color);
}

TabItem {
    padding: 6px 1px 0 0;
    gap: 0;
    border: 0 solid transparent;

    &:selected {
        border-color: var(--main-color);
    }

    > .label {
        align-self: end;
        padding: 0 3px 3px;
        text-hotkey: underline-on-alt;
        transition: color 100ms ease;
    }

    > ButtonLike.close {
        padding: 0;
        border: none;
        background: none;
    }

    &:hovered,
    &:selected,
    &:focused {
        color: var(--main-color);
    }
}

Tabs.top > TabBar > TabItem {
    border-bottom-width: 2px;
}

Tabs.bottom > TabBar > TabItem {
    border-top-width: 2px;
}

/* editors */

TextField {
    padding: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--paler-border-color);
    background-color: var(--pane-color);
    transition: border-color 100ms ease;

    &:focused {
        border-color: var(--secondary-color);
    }

    &:read-only {
        background-color: var(--pane-color-disabled);
    }
}

TextArea {
    min-width: 100px;
    min-height: 60px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--paler-border-color);
    background-color: var(--pane-color);
    transition: border-color 100ms ease;

    --search-highlight-current: #{fade-out(#a0c0ff, 0.2)};
    --search-highlight-other: #{fade-out(#f0d080, 0.4)};

    &:focused {
        border-color: var(--secondary-color);
    }

    &:read-only {
        background-color: var(--pane-color-disabled);
    }
}

LogWidget {
    font-family: monospace;
    font-size: 10px;
}

EditorSearchPane {
    padding: 4px;
    background-color: var(--pane-color);
    box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.25);

    &.find-only {
        row-gap: 0;
    }

    ButtonLike {
        padding: 2px 4px;
        font-size: 12px;
    }

    > Button.close {
        padding: 0;
        align-self: center;
        background: none;
    }
}

/* srcedit */

SourceEdit {
    font-face: "Menlo,Consolas,DejaVuSansMono,DejaVu Sans Mono,Liberation Mono,Lucida Sans Typewriter,Courier New,Lucida Console";
    font-family: monospace;

    --left-pane-number-text-edited: #cc2;
    --left-pane-number-text-saved: #2c2;
    --left-pane-icon-breakpoint: #f21818;
    --left-pane-icon-bookmark: #1818f2;
    --left-pane-icon-error: #{fade-out(#f21818, 0.5)};

    &:focused {
        border-width: 1px;
        border-style: solid;
        border-color: var(--secondary-color);
    }

    &:read-only {
        background-color: var(--pane-color-disabled);
    }
}

/* statusline */

StatusLine {
    padding: 1px;
    flex-shrink: 0;
    background-color: var(--top-pane-color);
}

StatusLine > Label {
    flex: 1;
}

/* toolbars */

ToolBarHost {
    padding: 6px;
    gap: 8px;
}

ToolBar {
    padding-left: 6px;
    gap: 4px;
    border-color: var(--paler-border-color);
    border-style: solid;
    border-left-width: 2px;
}

ToolBarSeparator {
    margin-top: 3px;
    margin-bottom: 3px;
    border-color: var(--paler-border-color);
    border-style: solid;
    border-left-width: 1px;
}

ToolBar ButtonLike,
ToolBar ComboBox {
    background: none;

    &:not(hovered):not(pressed) {
        border-color: transparent;
    }

    &:not(enabled) {
        border-color: transparent;
        opacity: 0.4;
    }
}

ToolBarButton {
    padding: 4px;
    focus-rect-color: none;
}

/* docks */

DockHost {
    padding: 2px;
    background-color: var(--top-pane-color);
}

DockHostBody {
    margin: 3px;
    padding: 0;
}

/* charts */

SimpleBarChart {
    padding: 2px;

    --background: #fff;
    --axis: #c0c0c0;
    --segment-tag: #c0c0c0;
}

/* progressbar */

ProgressBar {
    min-width: 50px;
    min-height: 16px;
    max-height: 16px;
    padding: 2px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--paler-border-color);

    --gauge: #4080ff;
    --indeterminate: #80c080;
    --gauge-animation: url(progress_bar_gauge_animation.tiled);
    --indeterminate-animation: url(progress_bar_gauge_animation.tiled);
}

/* winframe */

WindowFrame {
    background-color: var(--window-bg);

    > .caption {
        align-items: center;
        padding: 3px;
        background-color: var(--header-color);

        > Label {
            padding: 2px;
            font-size: 0.9em;
            text-overflow: ellipsis;
            text-transform: uppercase;
        }

        > Button {
            margin-left: auto;
            padding: 2px;
        }
    }

    > .body {
        justify-self: stretch;
        padding: 3px;
    }
}

/* dialog, filedialog, inputbox, messagebox, settingsdialog */

WindowFrame.dialog-frame {
    padding: 0;
    border-width: 1px;
    border-style: solid;
    border-color: var(--paler-border-color);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

FileDialog {
    min-height: 400px;
    padding: 4px;

    --dir-name: #000080;

    .content {
        gap: 1px;
    }

    .right-panel {
        justify-self: stretch;

        > .grid {
            justify-self: stretch;
        }
    }
}

FilePathPanelButtons {
    padding-left: 3px;
    padding-right: 6px;
}

FilePathPanelItem {
    align-items: center;
    gap: 0;

    > .label {
        padding: 2px 3px;

        &:hovered {
            background-color: var(--hovered-color);
        }
    }

    > .button {
        padding: 0 1px;

        &:hovered {
            background-color: var(--hovered-color);
        }
    }
}

FileNameField TextField {
    justify-self: stretch;
}

InputBox,
MessageBox {
    padding: 10px;

    > Label {
        padding: 10px;
    }
}

SettingsDialog {
    padding: 4px;

    > .content {
        padding: 6px;
        gap: 3px;

        > .tree {
            width: 150px;
            min-width: 50px;
            padding: 4px;
            border-width: 1px;
            border-style: solid;
            border-color: var(--paler-border-color);
            background-color: var(--pane-color);
            font-size: 16px;
        }
    }
}

SettingsPage {
    justify-self: stretch;
    min-width: 100px;
    padding: 6px;

    .error {
        border-color: red;
    }

    > Label {
        padding: 4px 4px 12px;
        font-size: 1.6em;
    }
}

SettingsList {
    align-content: center;
}

/* Tooltips */

Label#tooltip {
    padding: 3px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
    background-color: #222;
    color: #eee;
}

Popup#tooltip-popup {
    padding: 10px 2px 1px;
}
