/* Common styles for all themes */

:root {
    --font-dialog: "Roboto-Regular", sans-serif;
    --font-hex   : "Inconsolata_SemiExpanded-Regular", monospace;
    --font-size  : 12px;
}

:root {
    color      : var(--control-text);
    font-family: var(--font-dialog);
    font-size  : var(--font-size);
}

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(--control-text);
    padding      : 2px 3px 3px 2px;
}

[role="menubar"] [role="menuitem"] {
    line-height: 1em;
    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(--control-text),
        1px 1px 0 1px var(--control-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(--control-text),
        1px 1px 0 2px var(--control-text)
    ;
    row-gap   : 3px;
}

[role="dialog"] [name="title-bar"] {
    min-height: calc(1em + 5px);
}

[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 + 5px);
    width      : calc(1em + 5px);
}

[role="dialog"] [name="title"] {
    color        : var(--window-focus-text);
    font-weight  : bold;
    line-height  : calc(1em + 1px);
    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: center;
}

[role="dialog"] [name="title-close"] {
    align-items    : center;
    background     : var(--window-close-focus);
    box-shadow     : 0 0 0 1px var(--window-close-focus-border);
    color          : var(--window-close-focus-text);
    display        : flex;
    height         : 13px;
    justify-content: center;
    overflow       : hidden;
    padding        : 0;
    width          : 13px;
}

[role="dialog"][focus="false"] [name="title-close"] {
    background: var(--window-close-blur);
    box-shadow: 0 0 0 1px var(--window-close-blur-border);
    color     : var(--window-close-blur-text);
}

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

[role="dialog"] [name="title-close"]:after {
    content    : '\00d7';
    font-size  : 13px;
    line-height: 13px;
}

[role="dialog"] [name="title-close"][active]:after {
    margin: 1px -1px -1px 1px;
}

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



/******************************* Memory Window *******************************/

[window="memory"] [name="client"] {
    align-items: start;
    column-gap : calc(var(--font-size) / 2);
}

[window="memory"] [name="client"] > *:not(:nth-child(1n+1)) {
    text-align: center;
}

[window="memory"] [name="client"] > *:nth-child(17n+2),
[window="memory"] [name="client"] > *:nth-child(17n+10) {
    margin-left: calc(var(--font-size) / 2);
}

[window="memory"] [name="address"],
[window="memory"] [name="byte"] {
    font-family: var(--font-hex);
    line-height: 1em;
}

[window="memory"] [name="address"] {
    align-self: start;
}