@import 'dark.css';
@import 'light.css';

@import 'icons.css';

* {
    box-sizing: border-box;
}

body, body .drop {
    --font: 'Trebuchet MS', Helvetica, sans-serif;
    --font-size: 14px;
    --small-font-size: 8.4px;
    --offset: 6px;
    --negative-offset: -6px;
    --small-offset: 4px;
    --negative-small-offset: -4px;
    --normal-size: 22px;
    --content-size: 20px;
    --small-size: 14px;
    --small-content-size: 12px;
    --label-width: 100px;
    --input-width: 120px;
    --shorter-width: 90px;
    --short-width: 60px;
    --label-padding: 0 var(--small-offset);
    --button-padding: var(--label-padding);
    --pressed-button-padding: 0 3px 0 5px;
    --pressed-label-padding: 0 var(--small-offset);
    --icon-opacity: 1;
    --transition-duration: 0.2s;

    --background: rgb(var(--bg-colors));
    --opaco-background: rgba(var(--bg-colors), 0.65);
    --button-background: var(--background);
    --disabled-button-background: var(--background);

    --border: var(--border-style) var(--border-color);
    --border-width: 1px;
    --border-style: var(--border-width) solid;
    --border-radius: 1.5px;

    --shadow: 1px 1px 4px -1px var(--shadow-color);
    --input-shadow: var(--input-shadow-size) transparent;
}

body {
    line-height: 24px;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    background: var(--background);

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    /*noinspection CssInvalidPropertyValue*/
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
}

.no-shadows {
    --input-shadow-size: none;
    --shadow: none;
    --button-shadow: none;
    --flat-button-shadow: none;
    --disabled-button-shadow: none;
    --hover-button-shadow: none;
    --pressed-button-shadow: none;
}

.no-transition {
    --transition-duration: 0s !important;
}

.shorter {
    --label-width: var(--shorter-width);
    --input-width: var(--shorter-width);
}

.short {
    --label-width: var(--short-width);
    --input-width: var(--short-width);
}

body, .edit {
    font-size: var(--font-size);
    font-family: var(--font);
}

body, .label, .edit, .textarea, .select, .button {
    color: var(--font-color);
}

::placeholder {
    color: var(--highlight-font-color);
}

.edit, .textarea, .select, .list, .table-body, .progress {
    background: var(--input-background);
    box-shadow: var(--input-shadow);
}

.edit, .textarea, .select, .button, .progress, .slider, .slider-rail, .anchor, .border, .list {
    border: var(--border);
}

.edit, .textarea, .select, .button, .progress, .slider, .anchor {
    transition: var(--transition-duration);
    --border: var(--border-style) var(--border-color);
    border-radius: var(--border-radius);
}

.edit:focus, .textarea:focus, .list:focus, .select:focus, .button:focus, .label:focus, .slider:focus, .anchor:focus {
    outline: none;
}

.green {
    color: var(--green-font-color);
}

.disabled {
    --font-color: var(--highlight-font-color) !important;
    --border-color: var(--disabled-border-color) !important;
    --button-background: var(--disabled-button-background) !important;
    --button-shadow: var(--disabled-button-shadow) !important;
    --input-shadow: none !important;
    --icon-opacity: 0.5 !important;
    color: var(--font-color);
}

.invalid {
    --button-background: var(--invalid-background);
    --hover-background: var(--invalid-hover-background);
    --selected-background: var(--invalid-hover-background);
    --selected-hover-background: var(--invalid-selected-background);
    --border-color: var(--invalid-border-color);
    --highlight-border-color: var(--invalid-border-color);
}

.warning {
    --button-background: var(--warning-background);
    --hover-background: var(--warning-hover-background);
    --selected-background: var(--warning-hover-background);
    --selected-hover-background: var(--warning-selected-background);
    --border-color: var(--warning-border-color);
    --highlight-border-color: var(--warning-border-color);
}

.label.warning {
    background: var(--warning-background);
}

.valid {
    --border-color: var(--valid-border-color);
    --highlight-border-color: var(--valid-border-color);
}

.nowrap {
    white-space: nowrap;
}

.wrap {
    white-space: break-spaces;
}

.label.wrap {
    height: unset;
}

.shrink-0 {
    flex-shrink: 0;
}

.left {
    text-align: left;
}

.children > * {
    background: var(--tree-ext) left top repeat-y, var(--tree-bot) left top no-repeat;
}

.children > .bottom-child {
    background: var(--tree-ext) left top repeat-y, var(--tree-bot) left bottom no-repeat;
}

.children > :last-child {
    background: var(--tree-bot) left top no-repeat;
}

.children > :not(.children) {
    padding-left: var(--normal-size);
}

.flat {
    --input-background: transparent;
    --border-color: transparent;
    --button-background: transparent;
    --button-shadow: var(--flat-button-shadow);
}

.edit:hover, .textarea:hover, .select:hover, .button:hover, .slider:hover, .anchor:hover,
.edit:focus, .textarea:focus, .select:focus, .button:focus, .slider:focus, .anchor:focus,
.select.pressed {
    --icon-opacity: 1;
    --border-color: var(--highlight-border-color);
    --button-background: var(--selected-background);
    --button-shadow: var(--hover-button-shadow);
    --input-shadow: var(--input-shadow-size) var(--border-color);
    --input-background: inherit;
}

.button {
    text-align: center;
    text-decoration: none;
    min-width: var(--normal-size);
    background: var(--button-background);
    box-shadow: var(--button-shadow);
    padding: var(--button-padding);
    flex-shrink: 0;
}

.button.pressed:not(.disabled), .select.pressed:not(.disabled) {
    --button-padding: var(--pressed-button-padding);
    --button-shadow: var(--pressed-button-shadow);
    --hover-button-shadow: var(--pressed-button-shadow);
    --transition-duration: 100ms;
}

.button.flat:not(.pressed) {
    --button-padding: inherit;
}

.button.flat.pressed:not(:hover):not(:focus), .select:hover > .button.flat, .select:focus > .button.flat {
    --icon-opacity: 1; /* TODO: remove this hack */
}

a.label, a.button {
    cursor: default;
    text-decoration: none;
}

.selected {
    --button-background: var(--selected-background);
}

.inline {
    display: inline-block;
    vertical-align: top;
    line-height: var(--normal-size);
}

.bold {
    font-weight: bold;
}

.small {
    font-size: var(--small-font-size);
    --normal-size: var(--small-size);
    --content-size: var(--small-content-size);
}

.small.inline {
    margin: var(--small-offset);
}

.hidden {
    display: none !important;
}

.absolute {
    position: absolute;
    top: 0;
    left: 0;
}

.relative {
    position: relative;
}

.pad {
    padding: var(--offset);
}

.pad-top, .pad-y {
    padding-top: var(--offset);
}

.pad-bottom, .pad-y {
    padding-bottom: var(--offset);
}

.pad-left, .pad-x {
    padding-left: var(--offset);
}

.pad-right, .pad-x {
    padding-right: var(--offset);
}

.m-top {
    margin-top: 2px;
}

.m-bottom {
    margin-bottom: 2px;
}

.m-left {
    margin-left: 2px;
}

.m-right {
    margin-right: 2px;
}

.border-top {
    border-top: var(--border);
}

.border-bottom {
    border-bottom: var(--border);
}

.border-left {
    border-left: var(--border);
}

.border-right {
    border-right: var(--border);
}

.outline {
    outline: var(--border);
}

.gap {
    gap: var(--offset);
}

.flex {
    display: flex;
}

.flex.inline {
    display: inline-flex;
}

.row {
    flex-direction: row;
}

.column {
    flex-direction: column;
}

.overflow {
    overflow: auto;
}

.overflow-visible {
    overflow: visible !important;
}

.overflow-hidden {
    overflow: hidden;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flexible.overflow, .flexible.truncate {
    flex-basis: 0;
}

.flexible {
    flex: 1;
}

.h-cursor {
    cursor: ew-resize;
}

.v-cursor {
    cursor: ns-resize;
}

.h-cursor.v-cursor {
    cursor: move;
}

.add-cursor {
    cursor: copy;
}

body.opaco {
    overscroll-behavior-y: contain;
}

.opaco::after {
    content: '';
    position: fixed;
    z-index: 5;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.v-aligner {
    width: 1px;
    margin-right: -1px;
    display: inline-block;
    visibility: hidden;
    height: 100%;
    vertical-align: middle;
}

.textarea {
    vertical-align: top;
    overflow-y: auto;
    resize: none;
    min-width: 100%;
    width: 100%;
    height: 100%;
    min-height: var(--normal-size);
    padding: var(--small-offset);
}

.textarea.inline {
    min-width: 0;
}

.textarea.resizable {
    resize: both;
}

.resizable-parent {
    position: relative;
    overflow: hidden;
}

.resizable {
    flex-basis: 0;
}

.expandable.resizable.expanded {
    min-height: var(--normal-size);
}

.expandable.resizable:not(.expanded) {
    flex-grow: 0 !important;
    flex-shrink: 0;
}

.pad.expandable:not(.expanded) {
    line-height: var(--normal-size);
}

.expandable.expanded > .flex:first-child:not(.list *) {
    padding-bottom: 2px;
}

.layout-row > .resizable + .resizable > :first-child {
    border-left: var(--border);
}

.layout-column > .resizable + .resizable > :first-child {
    border-top: var(--border);
}

.h-resizer, .v-resizer {
    position: absolute;
    z-index: 2;
    border: none !important;
}

.h-resizer {
    width: 7px;
    margin-left: -3px;
    height: 100%;
    cursor: col-resize;
}

.v-resizer {
    height: 7px;
    margin-top: -3px;
    width: 100%;
    cursor: row-resize;
}

.control, .label, .edit, .select, .button, .progress {
    height: var(--normal-size);
}

.control.inline, .edit.inline, .select.inline, .textarea.inline, .progress.inline {
    width: var(--input-width);
}

input.small {
    border: none;
    box-shadow: none !important;
}

.edit, .label {
    padding: var(--label-padding);
}

.select {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    text-align: left;
    padding: 0;
    --button-padding: 0 1px;
    --pressed-button-padding: 0 0 0 2px;
}

.select.inline {
    display: inline-flex;
}

.select.pressed {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.select > *, .progress > * {
    --normal-size: var(--content-size);
}

.select > .button {
    min-width: unset;
    border-width: 0 0 0 1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.select > .button.flat {
    width: 0;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: row-reverse;
}

.select.disabled > .button.flat {
    opacity: 0;
}

.select > .button.flat > * {
    flex-shrink: 0;
}

.select:not(.pressed) > .button.flat > :last-child {
    margin-right: -1px;
}

.multi-select-plate {
    display: flex;
    align-items: center;
    border-right: var(--border);
    padding-right: 0;
}

.label {
    line-height: var(--normal-size);
    transition: background var(--transition-duration);
}

.label.inline {
    width: var(--label-width);
    overflow: hidden;
}

.label.inline.shrink-0 {
    overflow: visible; /* TODO: remove */
    width: unset; /* TODO: remove */
}

.label.clickable:hover, .label[draggable]:hover {
    background-color: var(--hover-background);
}

.label.selected, .label:focus, .label.dragover, .v-drag-border.dragover, .h-drag-border.dragover {
    background-color: var(--selected-background);
}

.label.selected:hover, .label:focus:hover {
    background-color: var(--selected-hover-background);
}

.label.in-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--content-size);
    height: var(--content-size);
    line-height: var(--content-size);
    padding: 0;
    color: var(--highlight-font-color);
}

.label.in-edit:hover, .label.in-edit:focus {
    color: var(--font-color);
}

.label.overlay {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    background-clip: content-box;
    transition: var(--transition-duration);
}

.label.overlay:empty::after {
    content: '';
    display: block;
    padding: var(--small-offset);
    width: var(--small-content-size);
    height: var(--small-content-size);
    opacity: 0.5;
    background-image: var(--icons-small);
    background-position: -24px 0;
    background-origin: content-box;
    background-clip: content-box;
    transition: opacity var(--transition-duration);
}

.label.overlay:empty:hover::after, .label.overlay:empty:focus::after {
    opacity: 1;
}

.label.edited {
    position: relative;
    z-index: 5;
    overflow: visible;
    padding: 0;
}

.label.edited > .edit {
    width: 100%;
    margin: 0 -1px;
}

.label.edited, .label.edited:hover, .label.clickable > .label, .label.clickable > .label:hover {
    background: transparent;
}

.comma + .label {
    display: inline-block;
    margin: 0 var(--negative-small-offset);
    width: auto;
}

.comma {
    display: inline;
}

.comma:first-child {
    display: none;
}

.comma::after {
    content: ', ';
}

.link {
    color: var(--highlight-font-color);
    text-decoration: underline;
    cursor: pointer;
}

.select .edit {
    height: var(--content-size);
    border: none;
    box-shadow: none;
    background: transparent;
}

.select .label.edited > .edit {
    margin: 0;
}

.no-padding {
    padding: 0;
}

.drop {
    position: fixed;
    background: var(--input-background);
    z-index: 5;
    min-width: var(--input-width);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    box-shadow: var(--shadow);
    transition: max-height var(--transition-duration), opacity var(--transition-duration), border var(--transition-duration) step-end;
}

.drop.expanded {
    max-height: 250px;
    overflow: auto;
    opacity: 1;
    border: var(--border);
    transition: max-height var(--transition-duration), opacity var(--transition-duration);
}

.edit, .select, .button, .list, .progress {
    line-height: var(--content-size);
}

.table-row {
    border-top: var(--border);
}

.table-header {
    position: relative;
    z-index: 1;
    background: var(--background);
}

.table-header, .table-body {
    outline: var(--border);
}

.table-cell {
    display: flex;
    overflow: hidden;
}

.table-header .table-cell {
    align-items: center;
}

.table-cell + .table-cell > :first-child {
    border-left: var(--border);
}

.dragged > * {
    opacity: 0.6;
}

.inline + .inline, .flexible + .inline, .inline + .drop + .inline {
    margin-left: var(--offset);
}

.inline + .small.inline {
    margin-left: 10px;
}

.small.inline + .inline, .flat + .flat , .flat + .drop + .flat {
    margin-left: 0;
}

.separator {
    border-bottom: var(--border);
}

.image-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    border: var(--border);
    max-width: 100%;
    height: 150px;
}

.image-picker > img {
    padding: var(--offset);
    max-width: 100%;
    max-height: 100%;
    white-space: normal;
}

.image-picker > img[src] {
    padding: 0;
}

input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
}

.progress {
    position: relative;
    --progress-background: var(--valid-background);
}

.progress.warning {
    --progress-background: var(--warning-background);
}

.progress > .label {
    position: relative;
}

.progress-bar {
    position: absolute;
    left: 0;
    height: 100%;
    background: var(--progress-background);
}

.slider-rail {
    width: var(--input-width);
    height: 10px;
    background: var(--input-background);
    margin: 5px 0;
}

.slider {
    position: absolute;
    background: var(--button-background);
    border-radius: var(--border-radius);
    transition: background var(--transition-duration), border var(--transition-duration);
}

.slider > * {
    position: relative;
}

.slider::before, .slider > ::before {
    content: "";
    position: absolute;
    transition: var(--transition-duration);
}

.slider.up {
    top: -2px;
    left: var(--negative-offset);
    margin: 0 var(--negative-offset);
    border-top: transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    width: var(--small-content-size);
    height: var(--small-size);
}

.slider.up.outer {
    top: unset;
    bottom: var(--negative-small-offset);
    height: var(--offset);
}

.slider.up::before, .slider.up > ::before {
    border-left: var(--offset) solid transparent;
    border-right: var(--offset) solid transparent;
    border-bottom: 8px solid var(--border-color);
    top: var(--negative-offset);
    left: -1px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

.slider.up > ::before {
    top: -5px;
    border-bottom-color: var(--button-background);
}

.slider.left {
    top: var(--negative-offset);
    left: -2px;
    margin: var(--negative-offset) 0;
    border-left: transparent;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    width: var(--small-size);
    height: var(--small-content-size);
}

.slider.left.outer {
    left: unset;
    right: var(--negative-small-offset);
    width: var(--offset);
}

.slider.left::before, .slider.left > ::before {
    border-top: var(--offset) solid transparent;
    border-bottom: var(--offset) solid transparent;
    border-right: 8px solid var(--border-color);
    top: -1px;
    left: var(--negative-offset);
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.slider.left > ::before {
    left: -5px;
    border-right-color: var(--button-background);
}

.anchor {
    position: absolute;
    z-index: 1;
    width: var(--small-content-size);
    height: var(--small-content-size);
    --border-color: var(--font-color);
    --highlight-border-color: var(--highlight-font-color);
    border-radius: var(--offset);
    margin: var(--negative-offset);
    transition: background var(--transition-duration), border var(--transition-duration);
}

.anchor.selected {
    --border-color: var(--highlight-border-color);
}

.anchor.small {
    z-index: 2;
    width: 0;
    height: 0;
    border-width: var(--small-offset);
    margin: var(--negative-small-offset);
}

.anchor-parent {
    position: relative;
    line-height: 0;
}

.centered {
    overflow: auto;
    text-align: center;
    white-space: nowrap;
    flex-grow: 1;
    height: 100%;
}

.centered > * {
    vertical-align: middle;
}

.stretchable.inline {
    width: unset;
    min-width: var(--input-width);
}

.canvas {
    line-height: 0;
    box-shadow: inset 0 0 15px -5px var(--border-color);
    background: var(--dark-background);
}

.canvas canvas {
    background-color: black;
}

.overlay-edit {
    position: relative;
}

.overlay-edit > .edit {
    padding-right: var(--content-size);
}

.drop-zone > * {
    transition: filter 100ms ease-in;
}

.drop-zone::after {
    z-index: -1;
    content: attr(text);
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--opaco-background);
    opacity: 0;
    text-shadow: 0 0 2x var(--background);
    transition: opacity var(--transition-duration), width var(--transition-duration) step-end, height var(--transition-duration) step-end;
}

.drop-zone.dragover > * {
    transition: filter var(--transition-duration) ease-out;
    filter: blur(8px);
}

.drop-zone.dragover::after {
    z-index: 5;
    opacity: 1;
    transition: opacity var(--transition-duration), width var(--transition-duration) step-start, height var(--transition-duration) step-start;
}

.before-target::before, .after-target::after, .drop-list:empty::after {
    content: '';
    display: block;
    position: relative;
    z-index: 1;
}

.before-target::before, .after-target::after {
    height: 0;
    outline: 4px solid var(--selected-background);
}

.drop-list:empty {
    display: flex; /* TODO: find a better way to avoid children dots */
}

.drop-list:empty::after, .dragging .v-drag-border {
    height: 8px;
    margin-top: -4px;
    margin-bottom: -4px;
    outline: none;
}

.dragging .h-drag-border {
    width: 8px;
    margin-left: -4px;
    margin-right: -4px;
}

.drop-list.after-target:empty::after {
    background: var(--selected-background);
}

.children.after-target::after, .children.drop-list::after {
    margin-left: var(--normal-size);
}

.h-drag-border, .v-drag-border {
    display: none;
    position: relative;
    z-index: 2;
}

.dragging .v-drag-border, .dragging .h-drag-border {
    display: block;
}

.virtualization-parent {
    position: relative;
}

.virtualization-parent > * {
    position: absolute;
    width: 100%;
}

.hue-parent {
    position: relative;
    width: var(--normal-size);
    border: var(--border);
}

.hue-rainbow {
    background: linear-gradient(to bottom, #f00, #f0f, #00f, #0ff, #0f0, #ff0, #f00);
}

.transparent-grid {
    position: relative;
    background: url(img/transparent.png);
}

.overlay-buttons-parent {
    min-width: 0;
    position: relative;
}

.overlay-buttons {
    opacity: 1;
    position: absolute;
    top: 0;
    right: 0;
    transition: var(--transition-duration);
}

.overlay-buttons-parent:hover .overlay-buttons {
    opacity: 1;
}

.square-fill {
    width: 100%;
    padding-bottom: 100%;
}

.fill {
    width: 100%;
    height: 100%;
    position: absolute;
}

.ace_editor {
    background: var(--input-background) !important;
    margin: 0 var(--negative-offset) var(--negative-offset); /* TODO: remove */
}

.ace_gutter {
    background: var(--background) !important;
}

.ace_comment {
    color: var(--highlight-font-color) !important;
}