@import "vars.css";

body {
    font-family: Segoe WPC,Segoe UI,sans-serif;
    width: 100%;
    height:100%;
    font-size: 1.2em;
    margin: 0px;
    background: var(--bg-color);
    color: var(--font-color);
}

h1 {
    font-size: 1.5em;
}

.ui-app {

}

form{
    margin: 8px;
}


/*==================================
           FOCUS
==================================*/

form:focus{
    background: var(--bg-color);
    outline: none!important;
}

input[type='checkbox']:focus,
button:focus{
    outline: none;
}
select:focus{/* При фокусировке IProperty с input==select фокусируется и HTMLElement <select> */
    outline: solid 1px rgb(119, 145, 181);
}
:focus{
    outline: solid grey;
}

:not(form, .ui-button, .ui-property).focused, 
.ui-button.focused > button,
.ui-property.focused input,
.ui-property.focused textarea,
.ui-property.focused select {
    outline: solid 1px rgb(119, 145, 181);
    z-index: 100;
}

.ui-property input:not([type=checkbox]):focus,
.ui-property textarea:focus{
    background: white;
    outline: solid grey;    
}

/* .ui-property.focused{ 
    background: var(--bg-color);
} */

/*==================================
           ALL
==================================*/

.ui-element.bordered,
.ui-data-element.bordered,
/* .ui-context-element.bordered, */
.ui-group.bordered,
.ui-property.bordered,
.ui-menu.bordered,
.ui-image.bordered
/* .ui-str.bordered  */
{
    border: solid 1px var(--work_border-color);
}

.ui-form.bordered,
.ui-group.bordered
{
    padding: 2px 2px 2px 2px;
    margin: 2px 2px 2px 2px;
}

.ui-element.bordered,
.ui-data-element.bordered,
/* .ui-context-element.bordered, */
.ui-property.bordered,
.ui-menu.bordered,
.ui-image.bordered
/* .ui-str.bordered */
 {
    padding: 0px 2px 0px 2px;
}

.ui-context-element.bordered > .content,
.ui-str.bordered > .content 
{
    padding: 0px 2px 0px 2px;
}

.ui-element,
.ui-data-element,
.ui-context-element,
.ui-property,
.ui-list,
.ui-table,
.ui-menu,
.ui-str
{    
    line-height: var(--property-height);
    margin: 2px 2px 2px 2px;
}

.ui-image {
    margin: 2px 2px 2px 2px;
}

.ui-element.selected,
.ui-data-element.selected,
.ui-context-element.selected,
.ui-property.selected,
.ui-list.selected,
.ui-table.selected,
.ui-menu.selected,
.ui-str.selected,
.ui-button.selected,
.ui-image.selected {
    background-color: var(--bg-selection-color);
    color: var(--font-selection-color);
}

.ui-list,
.ui-table{
    .ui-element,
    .ui-data-element,
    .ui-context-element,
    .ui-property,
    .ui-list,
    .ui-table,
    /* .ui-menu, */
    .ui-str
    {    
        /* margin: 0px 2px 0px 2px; */
        margin:0px;
        padding:0px 2px 0px 2px;
    }
}


/* .ui-element[contenteditable='true'],
.ui-data-element[contenteditable='true'], */
:focus
{    
    background-color: white;
}

.left{
    justify-content: left;
}
.right{
    justify-content: right;
}
.center{
    justify-content: center;
}
.end{
    justify-content: end;
}
.start{
    justify-content: start;
}
.space-between{
    justify-content: space-between;
}
.space-around{
    justify-content: space-around;
}
.space-evenly{
    justify-content: space-evenly;
}

td .ui-element.left,
td .ui-data-element.left{
    text-align: left;
}
td .ui-element.right,
td .ui-data-element.right{
    text-align: right;
}
td .ui-element.center,
td .ui-data-element.center{
    text-align: center;
}
td .ui-element.end,
td .ui-data-element.end{
    text-align: end;
}
td .ui-element.start,
td .ui-data-element.start{
    text-align: start;
}

/*==================================
            UIStr
==================================*/

.ui-str > .content > a:only-child {
    display: block;
}

/*==================================
            UIMenu
==================================*/

.ui-menu, .ui-menu-item
{    
    line-height: var(--property-height);
    background-color: var(--bg-toolbar-color);
}

.ui-menu-item > .icon,
.ui-menu-item > .caption,
.ui-menu-item > .dropdownCaret {
    padding: 0px 2px 0px 2px;
}

/*=============================================
            UIContextElement, UIStr, UIList, UITable
===============================================*/

.ui-context-element > .menu,
.ui-list > .menu,
.ui-table > .menu,
.ui-str > .menu
{    
    background-color: var(--bg-toolbar-color);
}

.ui-context-element > .content,
.ui-str > .content,
.ui-list > .content,
.ui-table > .content {
    cursor:default;
}

.ui-context-element.bordered > div:first-child,
.ui-str.bordered > div:first-child,
.ui-list.bordered > div:first-child,
.ui-table.bordered:not(.grided) > div:first-child {
    border: 1px solid var(--nav_border-color);
}
.ui-context-element.bordered.vertical > div:nth-child(2),
.ui-str.bordered.vertical > div:nth-child(2),
.ui-list.bordered.vertical > div:nth-child(2),
.ui-table.bordered:not(.grided).vertical > div:nth-child(2) {
    border-bottom: 1px solid var(--nav_border-color);
    border-right: 1px solid var(--nav_border-color);
    border-left: 1px solid var(--nav_border-color);
}
.ui-context-element.bordered.horizontal > div:nth-child(2),
.ui-str.bordered.horizontal > div:nth-child(2),
.ui-list.bordered.horizontal > div:nth-child(2),
.ui-table.bordered:not(.grided).horizontal > div:nth-child(2) {
    border-top: 1px solid var(--nav_border-color);
    border-right: 1px solid var(--nav_border-color);
    border-bottom: 1px solid var(--nav_border-color);
}

.ui-context-element .ui-menu,
.ui-str .ui-menu,
.ui-list .ui-menu,
.ui-table .ui-menu {
    margin: 0px;
}

/*==================================
            UIList
==================================*/

.ui-list-item.selected {
    background-color: var(--bg-selection-color);
    color: var(--font-selection-color);
}

.ui-list-item {
    > :not(.icon[style*="display: none;"]) + .caption {
        margin: 0px 0px 0px 2px;/*padding*/
    }
    /* > .icon + .caption {
        padding: 0px 0px 0px 2px;
    } */
}


/*==================================
            UITable
==================================*/

.ui-table.grided th,
.ui-table.grided td {
    border: 1px solid var(--nav_border-color);
}

/* .ui-table.bordered.grided tr:first-child > th,
.ui-table.bordered.grided tr:first-child > td {
    border-top: none;
}

.ui-table.bordered.grided tr:last-child > td {
    border-bottom: none;
}

.ui-table.bordered.grided tr > th:first-child,
.ui-table.bordered.grided tr > td:first-child {
    border-left: none;
}

.ui-table.bordered.grided tr > th:last-child,
.ui-table.bordered.grided tr > td:last-child {
    border-right: none;
} */

.ui-table.bordered.grided > div.menu {
    border: 1px solid var(--nav_border-color);
}
.ui-table.bordered.grided.vertical:not(.empty) > div:first-child.menu {
    border-bottom: none;
}

.ui-table.bordered.grided.vertical:not(.empty) > div:nth-child(2).menu {
    border-top: none;
}
.ui-table.bordered.grided.horizontal:not(.empty) > div:first-child.menu {
    border-right: none;
}

.ui-table.bordered.grided.horizontal:not(.empty) > div:nth-child(2).menu {
    border-left: none;
}

.ui-table .row.selected,
.ui-table .row > td.selected {
    background-color: var(--bg-selection-color);
    color: var(--font-selection-color);
}

.ui-table table {
    border-collapse: collapse;
}

/*==================================
            UITree
==================================*/

.ui-tree-item-header {
    align-items: flex-end;
    text-align: left;
    height: var(--tree-item-height);
}
.ui-tree-item-header .ui-element {
        line-height: var(--tree-item-height);
        height: var(--tree-item-height);
        white-space: nowrap;
}

.ui-tree-item.selected > .ui-tree-item-header {
    background-color: var(--nav_bg-selection-color);
    color: var(--nav_font-selection-color);
}

.ui-tree-item.focused > .ui-tree-item-header {
    background-color: var(--nav_bg-focused-selection-color);
    color: var(--nav_font-focused-selection-color);
}

/*==================================
            UIPanels
==================================*/

:not(.ui-panel .ui-panel).ui-panel {
    border: 1px solid var(--work_border-color);
}

.ui-panel .ui-group {
    margin: 5px;
}

.ui-panel-tabs {
    border-bottom: 1px solid var(--work_border-color);
}

.ui-panel-tab.selected {
    background-color: var(--bg-selected-tab-color);
    color: var(--font-selected-tab-color);
}

/*==================================
            UIProperty
==================================*/

.ui-property.horizontal {
    /*При переносе элементов флекс контейнера caption и field,
    чтобы расстояние между ними соответствовало расстояниянию между двумя элементами с margin: 2px 2px 2px 2px*/
    row-gap: 4px;
}

.ui-property > .caption {
    /* padding: 0px 2px 0px 2px; */
    box-sizing: border-box;
    line-height: var(--property-height);
}
.ui-property > .caption.inline {
    height: var(--property-height);
    white-space: nowrap;
}

.ui-property > .field {
    height: var(--property-height);
    line-height: var(--property-height);
    /* padding: 0px 2px 0px 2px; */
    box-sizing: border-box;
}

.ui-property.type-textarea > .field {
    height: var(--property-height-textarea);
    line-height: var(--property-height-textarea);
}

.ui-property input, 
.ui-property textarea, 
.ui-property select {
        padding: 0px 0px 2px 6px;
        margin: 0px 0px 0px 0px;
        display: block;
        width: 100%;
        border: 1px solid var(--tools_border-color);
        box-sizing: border-box;
        background: #ecf0f1;
        box-sizing: border-box;
        font-family: inherit;
        font-size: inherit;
}

.ui-property.bordered input, 
.ui-property.bordered textarea, 
.ui-property.bordered select {
        margin: 2px 0px 2px 0px;
}

.ui-property:not(.bordered) input, 
.ui-property:not(.bordered) textarea, 
.ui-property:not(.bordered) select {
        height: 100%;
}

.ui-property input[type='checkbox']{
    width: 1.6em;
    accent-color: white;
}


/* .ui-property.type-textarea > .content > .field,
.ui-property.horizontal.type-checkbox > .content > .field
{
    align-items: center;
} */


/* .ui-property input, 
.ui-property select, 
.ui-property textarea {
        font-size: 1em;
} */

/* .ui-property.selected {
    background: var(--tools_bg-selection-color);
    color: var(--tools_font-selection-color);
}

.ui-property.focused {
    background: var(--tools_bg-focused-selection-color);
    color: var(--tools_font-focused-selection-color);
} */

/*==================================
            UIButton
==================================*/

.vertical > .ui-button button,
.horizontal > .ui-button:first-child:last-child button,
.vertical > .ui-button a,
.horizontal > .ui-button:first-child:last-child a{
    margin: 8px 2px 8px 2px;
}

.horizontal > .ui-button:first-child button {
    margin: 8px 6px 8px 2px;
}

.horizontal > .ui-button:last-child button {
    margin: 8px 2px 8px 6px;
}

.ui-button button,
.ui-button a { 
    font-family: Segoe WPC,Segoe UI,sans-serif;
    background-color: var(--bg-button-color);
    color: var(--font-button-color);
    padding: 8px 20px;
    margin: 8px 6px;
    border: none;
    cursor: pointer;
    width: 100%;
    font-size: inherit;
    text-decoration: none;
}

.ui-button {
    a:focus,
    a:hover:focus,
    a:hover:active {
        text-decoration: none;
        background-color: var(--bg-button-color);
        color: var(--font-button-color);
        border: none;
        outline: 0;
    }
}

.ui-button:hover {
    opacity: 0.8;
}

/*==================================
            HREF
==================================*/

.ui-list-item .ui-element > a,
.ui-list-item .ui-data-element > a,
.ui-menu-item .icon > a,
.ui-menu-item .caption > a,
.ui-image .icon > a
{
    text-decoration: none;
    color: var(--font-color);
}

.ui-list-item.selected .ui-element > a,
.ui-list-item.selected .ui-data-element > a,
.ui-menu-item.selected .icon > a,
.ui-menu-item.selected .caption > a,
.ui-image.selected .icon > a
{
    text-decoration: none;
    color: var(--font-selection-color);
}


.ui-element,
.ui-data-element
{
    a:focus,
    a:hover:focus,
    a:hover:active {
        background-color: var(--bg-color);
        border: none;
        outline: 0;
    }
}

.ui-menu-item .icon,
.ui-menu-item .caption,
.ui-image {
    a:focus,
    a:hover:focus,
    a:hover:active {
        text-decoration: none;
        background-color: var(--bg-color);
        color: var(--font-color);
        border: none;
        outline: 0;
    }
}

.ui-element.selected,
.ui-data-element.selected
{
    a:focus,
    a:hover:focus,
    a:hover:active {
        background-color: var(--bg-selection-color);
        border: none;
        outline: 0;
    }
}

.ui-menu-item.selected .icon,
.ui-menu-item.selected .caption,
.ui-image.selected {
    a:focus,
    a:hover:focus,
    a:hover:active {
        text-decoration: none;
        background-color: var(--bg-selection-color);
        color: var(--font-selection-color);
        border: none;
        outline: 0;
    }
}