/* Common styles for all themes */

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

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

body {
    background: var(--window);
    overflow  : hidden;
}

* {
    background: transparent;
    border    : none;
    margin    : 0;
    padding   : 0;
}

*: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;
}


/********************************* Checkbox **********************************/

[role="checkbox"] {
    column-gap: 2px;
}

[role="checkbox"] [name="check"] {
    background : var(--window);
    border     : 1px solid var(--control-shadow);
    color      : var(--window-text);
    font-size  : calc(var(--font-size) - 1px);
    line-height: calc(var(--font-size) - 2px);
    height     : calc(var(--font-size) - 2px);
    overflow   : hidden;
    position   : relative;
    width      : calc(var(--font-size) - 2px);
}

[role="checkbox"] [name="check"]:after {
    bottom     : 0;
    left       : 0;
    line-height: 100%;
    position   : absolute;
    right      : 0;
    text-align : center;
    top        : 0;
}

[role="checkbox"][active] [name="check"]:after,
[role="checkbox"][aria-checked="true"] [name="check"]:after {
    content: "\2713";
}

[role="checkbox"][active] [name="check"]:after {
    color: var(--window);
}

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

[role="checkbox"][aria-disabled="true"] [name="check"] {
    border-color: var(--window-disabled);
    color       : var(--window-disabled);
}

[role="checkbox"] [name="label"] {
    color: var(--control-text);
}

[role="checkbox"][aria-disabled="true"] [name="label"] {
    color: var(--control-disabled);
}



/********************************* Checkbox **********************************/

[role="radio"] {
    column-gap: 2px;
}

[role="radio"] [name="check"] {
    background   : var(--window);
    border       : 1px solid var(--control-shadow);
    border-radius: 50%;
    color        : var(--window-text);
    height       : calc(var(--font-size) - 2px);
    overflow     : hidden;
    position     : relative;
    width        : calc(var(--font-size) - 2px);
}

[role="radio"] [name="check"]:after {
    background   : currentColor;
    border-radius: 50%;
    bottom       : 0;
    left         : 0;
    position     : absolute;
    margin       : 30%;
    right        : 0;
    top          : 0;
}

[role="radio"][active] [name="check"]:after,
[role="radio"][aria-checked="true"] [name="check"]:after {
    content: "";
}

[role="radio"][active] [name="check"]:after {
    color: var(--window);
}

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

[role="radio"][aria-disabled="true"] [name="check"] {
    border-color: var(--window-disabled);
    color       : var(--window-disabled);
}

[role="radio"] [name="label"] {
    color: var(--control-text);
}

[role="radio"][aria-disabled="true"] [name="label"] {
    color: var(--control-disabled);
}



/********************************** ListBox **********************************/

select {
    background : var(--window);
    border     : 1px solid var(--control-shadow);
    color      : var(--window-text);
    font-family: var(--font-dialog);
    font-size  : var(--font-size);
    line-height: var(--font-size);
    padding    : 1px;
}



/********************************** 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;
}



/********************************* Splitter **********************************/

[role="separator"][tabindex] {
    z-index: 1;
}

[role="separator"][tabindex]:focus {
    background: var(--splitter-focus);
}



/********************************** TextBox **********************************/

input[type="text"] {
    background : var(--window);
    border     : 1px solid var(--control-shadow);
    color      : var(--window-text);
    font-family: var(--font-dialog);
    font-size  : var(--font-size);
    line-height: var(--font-size);
    padding    : 1px;
}




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

[role="dialog"] {
    padding: 3px;
}

[role="dialog"] [name="body"] {
    box-shadow:
          0   0 0 2px var(--window-border),
        1px 1px 0 2px var(--window-border)
    ;
}

[role="dialog"] [name="title-bar"] {
    align-items: center;
    background : var(--title);
    column-gap : 1px;
    padding    : 0 0 1px 0;
    margin     : 0 0 2px 0;
    box-shadow :
        -0.5px -0.5px 0 0.5px var(--title         ),
         0.5px -0.5px 0 0.5px var(--title         ),
         0      0     0 1px   var(--control-shadow)
    ;
}

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

[role="dialog"] [name="title-bar"] [name="icon"] {
    height: 15px;
    width : 15px;
}

[role="dialog"] [name="title-bar"] [name="title"] {
    color      : var(--title-text);
    font-size  : var(--font-size);
    font-weight: bold;
    text-align : center;
}

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

[role="dialog"] [name="title-bar"] [name="close"] {
    background : var(--close);
    border     : 1px solid var(--close-border);
    box-sizing : border-box;
    box-shadow : none;
    color      : var(--close-text);
    font-size  : 13px;
    font-weight: bold;
    height     : 15px;
    line-height: 13px;
    margin     : 0;
    padding    : 0;
    position   : relative;
    text-align : center;
    width      : 15px;
}

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

[role="dialog"] [name="title-bar"] [name="close"]:after {
    content : "\00d7";
    position: absolute;
    inset   : 0 0 0 0;
}

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

[role="dialog"] [name="client"] {
    background: var(--control);
    box-shadow: 0 0 0 1px var(--control);
}



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

[role="dialog"][window="memory"] [name="wrap-hex"] {
    background : var(--window);
    box-shadow : 0 0 0 1px var(--control-shadow);
    font-family: var(--font-hex);
    margin     : 1px;
    padding    : 1px;
}

[role="dialog"][window="memory"] [name="hex"] [role="row"] {
    column-gap: calc(var(--font-size) / 2);
}

[role="dialog"][window="memory"] [name="hex"] [role="row"] > *:nth-child( 2),
[role="dialog"][window="memory"] [name="hex"] [role="row"] > *:nth-child(10) {
    margin-left: calc(var(--font-size) / 2);
}

[role="dialog"][window="memory"] [name="hex"] [name="byte"][selected] {
    background: var(--selected);
    box-shadow:
      -0.5px 0.5px 0 0.5px var(--selected),
       0.5px 0.5px 0 0.5px var(--selected)
    ;
    color     : var(--selectedText);
}

[role="dialog"][window="memory"][focus="false"]
[name="hex"] [name="byte"][selected] {
    background: var(--selectedBlur);
    box-shadow:
      -0.5px 0.5px 0 0.5px var(--selectedBlur),
       0.5px 0.5px 0 0.5px var(--selectedBlur)
    ;
    color     : var(--selectedTextBlur);
}




/******************************** CPU Window *********************************/

[role="dialog"][window="cpu"] [name="wrap-disassembler"],
[role="dialog"][window="cpu"] [name="wrap-system-registers"],
[role="dialog"][window="cpu"] [name="wrap-program-registers"] {
    background: var(--window);
    color     : var(--window-text);
    box-shadow: 0 0 0 1px var(--control-shadow);
}

[role="dialog"][window="cpu"] [name="wrap-main"] {
    box-shadow : 0 0 0 1px var(--control-shadow);
    margin-left: 1px;
}

[role="dialog"][window="cpu"] [name="wrap-disassembler"] {
    margin: 1px 0;
}

[role="dialog"][window="cpu"] [name="split-main"] {
    margin-right: -1px;
}

[role="dialog"][window="cpu"] [name="wrap-registers"] {
    box-shadow:
        0 -1px 0 0 var(--control-shadow),
        0  1px 0 0 var(--control-shadow)
    ;
    margin: 1px 0;
    width : 140px;
}

[role="dialog"][window="cpu"] [name="wrap-system-registers"] {
    height: 143px;
    margin: 0 1px;
}

[role="dialog"][window="cpu"] [name="wrap-program-registers"] {
    margin: 0 1px;
}

[role="dialog"][window="cpu"] [name="disassembler"],
[role="dialog"][window="cpu"] [name="system-registers"],
[role="dialog"][window="cpu"] [name="program-registers"] {
    padding: 1px;
}

[role="dialog"][window="cpu"] [name="expand"] {
    column-gap: 0;
}

[role="dialog"][window="cpu"] [name="expand"] [name="check"] {
    border: none;
}

[role="dialog"][window="cpu"] [name="expand"][aria-checked="false"]
    [name="check"]:after {
    content: "+";
}

[role="dialog"][window="cpu"] [name="expand"][aria-checked="true"]
    [name="check"]:after {
    content: "-";
}

[role="dialog"][window="cpu"] [name="wrap-registers"] input[type="text"] {
    border      : none;
    font-family : var(--font-hex);
    height      : var(--font-size);
    margin-right: 1px;
    padding     : 0;
    text-align  : right;
    width       : 58px;
}

[role="dialog"][window="cpu"] [name="wrap-registers"]
    [format="float"] [name="value"],
[role="dialog"][window="cpu"] [name="wrap-registers"]
    [format="signed"] [name="value"],
[role="dialog"][window="cpu"] [name="wrap-registers"] [format="unsigned"]
    [name="value"] {
    font-family: var(--dialog-font);
    width      : 80px;
}

[role="dialog"][window="cpu"] [name="wrap-registers"] [name="expansion"] {
    margin-left: calc(var(--font-size) * 1.5);
}

[role="dialog"][window="cpu"] [register="psw" ],
[role="dialog"][window="cpu"] [register="tkcw"] {
    column-gap: var(--font-size);
}

[role="dialog"][window="cpu"] [register="ecr" ],
[role="dialog"][window="cpu"] [register="pir" ],
[role="dialog"][window="cpu"] [register="psw" ] [name="I" ],
[role="dialog"][window="cpu"] [register="tkcw"] [name="RD"] {
    column-gap: 4px;
}

[role="dialog"][window="cpu"] [register="psw" ] [name="I" ] input[type="text"],
[role="dialog"][window="cpu"] [register="tkcw"] [name="RD"] input[type="text"]{
    font-family: var(--font-dialog);
    text-align : left;
    width      : 20px;
}

[role="dialog"][window="cpu"] [register="ecr"] input[type="text"],
[role="dialog"][window="cpu"] [register="pir"] input[type="text"] {
    width: 32px;
}

[role="dialog"][window="cpu"] [name="expand"][aria-disabled="true"]
    [name="check"]:after {
    content: "";
}

[role="dialog"][window="cpu"] [aria-disabled="true"] * {
    color: var(--window-text);
}

[role="dialog"][window="cpu"] [aria-disabled="true"] [name="check"] {
    border-color: var(--control-shadow);
    color       : var(--window-text);
}

[role="dialog"][window="cpu"] [name="expansion"]
    input[type="text"][aria-disabled="true"],
[role="dialog"][window="cpu"] [name="expansion"]
    [aria-disabled="true"] [name="check"]{
    cursor: not-allowed !important;
}

[role="dialog"][window="cpu"] [name="disassembler"] {
    font-family: var(--font-hex);
}

[role="dialog"][window="cpu"] [name="disassembler"] [name="row"] {
    column-gap: calc(var(--font-size) * 1.5);
}

[role="dialog"][window="cpu"] [name="disassembler"] [name="row"][pc] {
    background: var(--selected);
    box-shadow: 0 1px 0 var(--selected);
    color     : var(--selectedText);
}

[role="dialog"][window="cpu"][focus="false"]
[name="disassembler"] [name="row"][pc] {
    background: var(--selectedBlur);
    box-shadow: 0 1px 0 var(--selectedBlur);
    color     : var(--selectedTextBlur);
}