/* Common styles for all themes */

:root {
    color      : var(--text);
    font-family: Arial, sans-serif;
    font-size  : 12px;
}

body {
    margin  : 0;
    overflow: hidden;
}

*:focus {
    outline: none;
}

[desktop] {
    background: var(--desktop);
}



/********************************** Button ***********************************/

[role="button"] {
    box-shadow:
        0   0   0 1px var(--control-shadow),
        1px 1px 0 1px var(--control-shadow)
    ;
    margin    : 1px;
    padding   : 3px;
}

[role="button"]:focus {
    background: var(--control-focus);
}

[role="button"][active] {
    box-shadow: 0 0 0 1px var(--control-shadow);
    margin    : 2px 0 0 2px;
}



/********************************** MenuBar **********************************/

[role="menubar"] {
    background   : var(--control);
    border-bottom: 1px solid var(--text);
    padding      : 2px 3px 3px 2px;
}

[role="menubar"] [role="menuitem"] {
    margin : 1px;
    padding: 3px;
}

[role="menubar"] [role="menuitem"]:focus {
    background: var(--control-focus);
}

[role="menubar"] [role="menuitem"]:not([active],[aria-expanded="true"]):focus,
[role="menubar"] [role="menuitem"]:not([active],[aria-expanded="true"]):hover {
    box-shadow:
        0 0 0 1px var(--control-shadow),
        1px 1px 0 1px var(--control-shadow)
    ;
}

[role="menubar"] [role="menuitem"][active],
[role="menubar"] [role="menuitem"][aria-expanded="true"] {
    box-shadow: 0 0 0 1px var(--control-shadow);
    margin    : 2px 0 0 2px;
}

[role="menubar"] [role="menu"] {
    background: var(--control);
    box-shadow:
        0   0   0 1px var(--text),
        1px 1px 0 1px var(--text)
    ;
    min-height: 16px;
    min-width : 16px;
    padding   : 2px 3px 3px 2px;
}



/********************************** Window ***********************************/

[role="dialog"] {
    /*background: #cc0000;*/
}

[role="dialog"] [name="body"] {
    background: var(--control);
    box-shadow:
        0   0   0 1px var(--control),
        0   0   0 2px var(--text),
        1px 1px 0 2px var(--text)
    ;
    row-gap   : 3px;
}

[role="dialog"] [name="title-bar"] {
}

[role="dialog"][focus="true"] [name="title-bar"] {
    box-shadow:
        0 0   0 1px var(--window-focus),
        0 1px 0 1px var(--control-shadow)
    ;
    background   : var(--window-focus);
}

[role="dialog"][focus="false"] [name="title-bar"] {
    box-shadow:
        0 0   0 1px var(--window-blur),
        0 1px 0 1px var(--control-shadow)
    ;
    background: var(--window-blur);
}

[role="dialog"] [name="title-icon"],
[role="dialog"] [name="title-close-box"] {
    align-self : stretch;
    min-width  : calc(1em + 4px);
    width      : calc(1em + 4px);
}

[role="dialog"] [name="title"] {
    color        : var(--window-focus-text);
    font-weight  : bold;
    overflow     : hidden;
    padding      : 2px;
    text-align   : center;
    text-overflow: ellipsis;
    white-space  : nowrap;
}

[role="dialog"][focus="false"] [name="title"] {
    color      : var(--window-blur-text);
}

[role="dialog"] [name="title-close-box"] {
    align-items    : center;
    display        : flex;
    justify-content: flex-start;
}

[role="dialog"] [name="title-close"] {
    align-items    : center;
    background     : var(--control);
    box-shadow     :
        0 0 0 1px var(--control),
        0 0 0 2px var(--control-shadow)
    ;
    display        : flex;
    height         : 11px;
    justify-content: center;
    overflow       : hidden;
    padding        : 0;
    width          : 11px;
}

[role="dialog"] [name="title-close"]:focus {
    background: var(--control-focus);
}

[role="dialog"] [name="title-close"][active] {
    box-shadow     :
        -1px -1px 0 1px var(--control),
        -1px -1px 0 2px var(--control-shadow)
    ;
    margin: 2px 0 0 2px;
}

[role="dialog"] [name="title-close"]:after {
    color      : var(--window-close-text);
    content    : '\00d7';
    font-size  : 12px;
    line-height: 1em;
}

[role="dialog"] [name="client"] {
    background: var(--control);
}