:root {
    --tk-font-dialog: "Roboto", sans-serif;
    --tk-font-mono  : "Inconsolata SemiExpanded Medium", monospace;
    --tk-font-size  : 12px;
}

.tk {
    font-family: var(--tk-font-dialog);
    font-size  : var(--tk-font-size);
    line-height: 1em;
    margin     : 0;
    outline    : none;
    padding    : 0;
}

table.tk {
    border        : none;
    border-spacing: 0;
}

.tk-body {
    overflow: hidden;
}

.tk-app {
    /* Height managed through resize listener */
    width: 100%;
}

.tk-mono {
    font-family: var(--tk-font-mono);
}



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

.tk-button > * {
    background: var(--tk-control);
    border    : 1px solid   var(--tk-control-shadow);
    box-shadow: 1px 1px 0 0 var(--tk-control-shadow);
    color     : var(--tk-control-text);
    margin    : 0 1px 1px 0;
    padding   : 3px;
    text-align: center;
}

.tk-button:focus > * {
    background: var(--tk-control-active);
}

.tk-button.active > * {
    box-shadow: none;
    margin    : 1px 0 0 1px;
}

.tk-button[aria-disabled="true"] > * {
    color: var(--tk-control-shadow);
}



/********************************* Check Box *********************************/

.tk-checkbox {
    align-items: center;
    column-gap : 2px;
}

.tk-checkbox .tk-icon {
    align-items: center;
    background : var(--tk-window);
    border     : 1px solid var(--tk-control-shadow);
    box-sizing : border-box;
    display    : flex;
    height     : 12px;
    width      : 12px;
}

.tk-checkbox .tk-icon:before {
    background   : transparent;
    content      : "";
    height       : 100%;
    display      : block;
    mask-image   : var(--tk-check);
    mask-position: center;
    mask-repeat  : no-repeat;
    mask-size    : contain;
    width        : 100%;
    -webkit-mask-image   : var(--tk-check);
    -webkit-mask-position: center;
    -webkit-mask-repeat  : no-repeat;
    -webkit-mask-size    : contain;
}

.tk-checkbox[aria-checked="true"] .tk-icon:before {
    background: var(--tk-window-text);
}

.tk-checkbox:focus .tk-icon {
    background: var(--tk-control-active);
}

.tk-checkbox[aria-checked="true"]:focus .tk-icon:before {
    background: var(--tk-control-text);
}

.tk-checkbox.active:focus .tk-icon:before {
    background: var(--tk-control-shadow);
}



/****************************** Drop-Down List *******************************/

.tk-dropdown {
    background   : var(--tk-window);
    border       : 1px solid var(--tk-control-shadow);
    border-radius: 0;
    color        : var(--tk-window-text);
    margin       : 0;
    padding      : 1px;
}



/********************************* Menu Bar **********************************/

.tk-menu-bar {
    background   : var(--tk-control);
    border-bottom: 1px solid var(--tk-control-border);
    color        : var(--tk-control-text);
    column-gap   : 1px;
    display      : flex;
    flex-wrap    : wrap;
    padding      : 2px;
    user-select  : none;
    white-space  : nowrap;
}

.tk-menu {
    background    : var(--tk-control);
    border        : 1px solid   var(--tk-control-border);
    box-shadow    : 1px 1px 0 0 var(--tk-control-border);
    display       : flex;
    flex-direction: column;
    padding       : 3px;
    row-gap       : 1px;
}

.tk-menu-item > * {
    background: var(--tk-control);
    border    : 1px solid transparent;
    column-gap: 4px;
    display   : flex;
    margin    : 0 1px 1px 0;
    padding   : 3px;
}

.tk-menu-item > * > .tk-icon {
    box-sizing: border-box;
    display   : none;
    height    : 1em;
    width     : 1em;
}

.tk-menu-item > * > .tk-text {
    flex-grow: 1;
}

.tk-menu-item[aria-disabled="true"] > * > .tk-text {
    color: var(--tk-control-shadow);
}

.tk-menu-item:not(.active, [aria-disabled="true"]):hover > *,
.tk-menu-item:not(.active):focus > * {
    border-color: var(--tk-control-shadow);
    box-shadow  : 1px 1px 0 0 var(--tk-control-shadow);
}

.tk-menu.icons > .tk-menu-item > * > .tk-icon {
    display: block;
}

.tk-menu-item[role="menuitemcheckbox"] > * > .tk-icon {
    border: 1px solid var(--tk-control-border);
}

.tk-menu-item[role="menuitemcheckbox"] > * > .tk-icon:before {
    background   : transparent;
    content      : "";
    height       : 100%;
    display      : block;
    mask-image   : var(--tk-check);
    mask-position: center;
    mask-repeat  : no-repeat;
    mask-size    : contain;
    width        : 100%;
    -webkit-mask-image   : var(--tk-check);
    -webkit-mask-position: center;
    -webkit-mask-repeat  : no-repeat;
    -webkit-mask-size    : contain;
}

.tk-menu-item[role="menuitemcheckbox"][aria-checked="true"]
    > * > .tk-icon:before {
    background: var(--tk-control-text);
}

.tk-menu-item[role="menuitemcheckbox"][aria-disabled="true"]
    > * > .tk-icon {
    border: 1px solid var(--tk-control-shadow);
}

.tk-menu-item[role="menuitemcheckbox"][aria-disabled="true"]
    > * > .tk-icon:before {
    background: var(--tk-control-shadow);
}

.tk-menu-item:not(.active):focus > * {
    background: var(--tk-control-active);
}

.tk-menu-item.active > * {
    background  : var(--tk-control-active);
    border-color: var(--tk-control-shadow);
    margin      : 1px 0 0 1px;
}

.tk-menu-separator {
    border       : 0 solid var(--tk-control-shadow);
    border-width : 1px 0 0 0;
    height       : 0;
    margin-bottom: 1px;
}



/*********************************** Radio ***********************************/

.tk-radio {
    align-items: center;
    column-gap : 2px;
}

.tk-radio .tk-icon {
    align-items  : center;
    background   : var(--tk-window);
    border       : 1px solid var(--tk-control-shadow);
    border-radius: 50%;
    box-sizing   : border-box;
    display      : flex;
    height       : 10px;
    width        : 10px;
}

.tk-radio .tk-icon:before {
    background   : transparent;
    content      : "";
    height       : 100%;
    display      : block;
    mask-image   : var(--tk-radio);
    mask-position: center;
    mask-repeat  : no-repeat;
    mask-size    : contain;
    width        : 100%;
    -webkit-mask-image   : var(--tk-radio);
    -webkit-mask-position: center;
    -webkit-mask-repeat  : no-repeat;
    -webkit-mask-size    : contain;
}

.tk-radio[aria-checked="true"] .tk-icon:before {
    background: var(--tk-window-text);
}

.tk-radio:focus .tk-icon {
    background: var(--tk-control-active);
}

.tk-radio[aria-checked="true"]:focus .tk-icon:before {
    background: var(--tk-control-text);
}

.tk-radio.active[aria-checked="false"]:focus .tk-icon:before {
    background: var(--tk-control-shadow);
}



/******************************** Scroll Bar *********************************/

.tk-scrollbar {
    background: var(--tk-control-highlight);
    box-shadow: 0 0 0 1px var(--tk-control-shadow) inset;
    box-sizing: border-box;
}

.tk-scrollbar .tk-thumb,
.tk-scrollbar .tk-unit-down,
.tk-scrollbar .tk-unit-up {
    background: var(--tk-control);
    border    : 1px solid var(--tk-control-border);
    box-sizing: border-box;
    color     : var(--tk-control-text);
}

.tk-scrollbar:focus .tk-thumb,
.tk-scrollbar:focus .tk-unit-down,
.tk-scrollbar:focus .tk-unit-up {
    background: var(--tk-control-active);
}

.tk-scrollbar .tk-unit-down,
.tk-scrollbar .tk-unit-up {
    height: 13px;
    width : 13px;
}

.tk-scrollbar .tk-unit-down:before,
.tk-scrollbar .tk-unit-up:before {
    background   : currentColor;
    content      : "";
    display      : block;
    height       : 100%;
    mask-image   : var(--tk-scroll);
    mask-position: center;
    mask-repeat  : no-repeat;
    mask-size    : 100%;
    width        : 100%;
    -webkit-mask-image   : var(--tk-scroll);
    -webkit-mask-position: center;
    -webkit-mask-repeat  : no-repeat;
    -webkit-mask-size    : 100%;
}

.tk-scrollbar[aria-orientation="horizontal"] .tk-unit-down:before {
    transform: rotate(-90deg);
}

.tk-scrollbar[aria-orientation="horizontal"] .tk-unit-up:before {
    transform: rotate(90deg);
}

.tk-scrollbar[aria-orientation="vertical"] .tk-unit-down:before {
}

.tk-scrollbar[aria-orientation="vertical"] .tk-unit-up:before {
    transform: rotate(180deg);
}

.tk-scrollbar .tk-unit-down.tk-active:before,
.tk-scrollbar .tk-unit-up.tk-active:before {
    mask-size: calc(100% - 2px);
    -webkit-mask-size: calc(100% - 2px);
}

.tk-scrollbar[aria-disabled="true"] .tk-unit-down,
.tk-scrollbar[aria-disabled="true"] .tk-unit-up,
.tk-scrollbar.tk-full .tk-unit-down,
.tk-scrollbar.tk-full .tk-unit-up  {
    background: var(--tk-control);
    border-color: var(--tk-control-shadow);
    color     : var(--tk-control-shadow);
}

.tk-scrollbar .tk-block-down,
.tk-scrollbar .tk-block-up {
    background  : var(--tk-control-highlight);
    border-color: var(--tk-control-shadow);
    border-style: solid;
    border-width: 0 1px;
}

.tk-scrollbar[aria-orientation="horizontal"] .tk-block-down,
.tk-scrollbar[aria-orientation="horizontal"] .tk-block-up {
    border-width: 1px 0;
}

.tk-scrollbar .tk-block-down.tk-active,
.tk-scrollbar .tk-block-up.tk-active {
    background: var(--tk-control-shadow);
}

.tk-scrollbar[aria-disabled="true"] .tk-thumb,
.tk-scrollbar[aria-disabled="true"] .tk-block-down,
.tk-scrollbar[aria-disabled="true"] .tk-block-up,
.tk-scrollbar.tk-full .tk-thumb,
.tk-scrollbar.tk-full .tk-block-down,
.tk-scrollbar.tk-full .tk-block-up {
    visibility: hidden;
}



/******************************** Scroll Pane ********************************/

.tk-scrollpane {
    background: var(--tk-control);
}

.tk-scrollpane > .tk-scrollbar {
    border: 0 solid var(--tk-control);
}

.tk-scrollpane > .tk-scrollbar[aria-orientation="horizontal"] {
    border-width: 1px 0 0 0;
}

.tk-scrollpane > .tk-scrollbar[aria-orientation="vertical"] {
    border-width: 0 0 0 1px;
}



/******************************** Split Pane *********************************/

.tk-splitpane > [role="separator"][aria-orientation="horizontal"] {
    cursor: ns-resize;
    height: 3px;
}

.tk-splitpane > [role="separator"][aria-orientation="vertical"] {
    cursor: ew-resize;
    width : 3px;
}

.tk-splitpane > [role="separator"]:focus {
    background: var(--tk-splitter-focus);
    z-index   : 1;
}



/********************************* Text Box **********************************/

.tk-textbox {
    background: var(--tk-window);
    border    : 1px solid var(--tk-control-shadow);
    color     : var(--tk-window-text);
    margin    : 0;
    padding   : 2px;
}



/********************************** Windows **********************************/

.tk-desktop {
    background: var(--tk-desktop);
}

.tk-window > * {
    border    : 1px solid var(--tk-control-border);
    box-shadow: 1px 1px 0 0 var(--tk-control-border);
    margin    : 0 1px 1px 0;
}

.tk-window > * > .tk-nw {left : -1px; top   : -1px; height: 8px; width : 8px; }
.tk-window > * > .tk-n  {left :  7px; top   : -1px; right : 8px; height: 3px; }
.tk-window > * > .tk-ne {right:  0px; top   : -1px; height: 8px; width : 8px; }
.tk-window > * > .tk-w  {left : -1px; top   :  7px; width : 3px; bottom: 8px; }
.tk-window > * > .tk-e  {right:  0px; top   :  7px; width : 3px; bottom: 8px; }
.tk-window > * > .tk-sw {left : -1px; bottom:  0px; height: 8px; width : 8px; }
.tk-window > * > .tk-s  {left :  7px; bottom:  0px; right : 8px; height: 3px; }
.tk-window > * > .tk-se {right:  0px; bottom:  0px; height: 8px; width : 8px; }

.tk-window > * > .tk-title {
    align-items  : center;
    background   : var(--tk-window-blur-title);
    border-bottom: 1px solid var(--tk-control-shadow);
    box-sizing   : border-box;
    color        : var(--tk-window-blur-title-text);
    overflow     : hidden;
    padding      : 1px;
    position     : relative;
}

.tk-window.two > * > .tk-title {
    background: var(--tk-window-blur-title2);
}

.tk-window > * > .tk-title .tk-text {
    cursor       : default;
    flex-basis   : 0;
    font-weight  : bold;
    min-width    : 0;
    overflow     : hidden;
    padding      : 1px 1px 1px calc(1em + 3px);
    text-align   : center;
    text-overflow: ellipsis;
    user-select  : none;
    white-space  : nowrap;
}

.tk-window > * > .tk-title .tk-close {
    background: var(--tk-window-blur-close);
    border    : 1px solid var(--tk-control-shadow);
    color     : var(--tk-window-blur-close-text);
    height    : calc(1em - 1px);
    margin    : 1px 1px 1px 0;
    overflow  : none;
    width     : calc(1em - 1px);
}

.tk-window > * > .tk-title .tk-close:before {
    background   : currentColor;
    content      : "";
    display      : block;
    height       : 100%;
    width        : 100%;
    mask-image   : var(--tk-close);
    mask-position: center;
    mask-repeat  : no-repeat;
    mask-size    : 100%;
    -webkit-mask-image   : var(--tk-close);
    -webkit-mask-position: center;
    -webkit-mask-repeat  : no-repeat;
    -webkit-mask-size    : 100%;
}

.tk-window > * > .tk-title .tk-close.active:before {
    mask-size: calc(100% - 2px);
    -webkit-mask-size: calc(100% - 2px);
}

.tk-window:focus-within > * > .tk-title {
    background: var(--tk-window-title);
    color     : var(--tk-window-title-text);
}

.tk-window.two:focus-within > * > .tk-title {
    background: var(--tk-window-title2);
}

.tk-window:focus-within > * > .tk-title .tk-close {
    background: var(--tk-window-close);
    color     : var(--tk-window-close-text);
}

.tk-window > * > .tk-client {
    background: var(--tk-control);
}



/************************************ CPU ************************************/

.tk-cpu .tk-main {
    height: 100%;
    width : 100%;
}

.tk-cpu .tk-main      > .tk-a,
.tk-cpu .tk-registers > .tk-a,
.tk-cpu .tk-registers > .tk-b {
    box-shadow: 0 0 0 1px var(--tk-control),0 0 0 2px var(--tk-control-shadow);
}

.tk-cpu .tk-main      > .tk-a              { margin       :  3px;      }
.tk-cpu .tk-main      > [role="separator"] { margin       :  1px -2px; }
.tk-cpu .tk-main      > .tk-b              { margin       :  3px;      }
.tk-cpu .tk-registers > .tk-a              { margin-bottom:  3px;      }
.tk-cpu .tk-registers > [role="separator"] { margin       : -2px;      }
.tk-cpu .tk-registers > .tk-b              { margin-top   :  3px;      }



.tk-disassembler .tk-viewport {
    background: var(--tk-window);
    color     : var(--tk-window-text);
}

.tk-disassembler .tk-view {
    height: 100%;
}

.tk-disassembler .tk-metrics {
    padding-bottom: 1px;
}

.tk-disassembler .tk {
    cursor     : default;
    font-family: var(--tk-font-mono);
    user-select: none;
    white-space: nowrap;
}

.tk-disassembler .tk-bytes,
.tk-disassembler .tk-mnemonic,
.tk-disassembler .tk-operands {
    padding: 0 0 1px calc(1.2em - 1px);
}

.tk-disassembler .tk-address {
    padding-left: 1px;
}

.tk-disassembler .tk-operands {
    padding-right: 1px;
}

.tk-disassembler .tk-selected {
    background: var(--tk-selected-blur);
    color     : var(--tk-selected-blur-text);
}

.tk-disassembler:focus-within .tk-selected {
    background: var(--tk-selected);
    color     : var(--tk-selected-text);
}



.tk-reglist .tk-viewport {
    background: var(--tk-window);
    color     : var(--tk-window-text);
}

.tk-reglist .tk-list {
    align-items: center;
}

.tk-reglist .tk-expand {
    align-items    : center;
    border-radius  : 2px;
    display        : flex;
    height         : 11px;
    justify-content: center;
    width          : 11px;
}

.tk-reglist .tk-expand:before {
    content      : "";
    height       : 100%;
    display      : block;
    mask-position: center;
    mask-repeat  : no-repeat;
    mask-size    : contain;
    width        : 100%;
    -webkit-mask-position: center;
    -webkit-mask-repeat  : no-repeat;
    -webkit-mask-size    : contain;
}

.tk-reglist .tk-expand:focus {
    background: var(--tk-control-active);
}

.tk-reglist .tk-expand[aria-expanded]:before {
    background: var(--tk-window-text);
}
.tk-reglist .tk-expand[aria-expanded]:focus:before {
    background: var(--tk-control-text);
}

.tk-reglist .tk-expand[aria-expanded="false"]:before {
    mask-image: var(--tk-expand);
    -webkit-mask-image: var(--tk-expand);
}

.tk-reglist .tk-expand[aria-expanded="true"]:before {
    mask-image: var(--tk-collapse);
    -webkit-mask-image: var(--tk-collapse);
}

.tk-reglist .tk-name {
    padding: 0 0.5em 0 1px;
}

.tk-reglist .tk-textbox {
    background: transparent;
    border    : none;
    padding   : 0;
    width     : 1.5em;
}

.tk-reglist.tk-program .tk-textbox:not(.tk-mono) {
    text-align: right;
    width     : 6em;
}

.tk-reglist .tk-expansion {
    align-items  : center;
    column-gap   : 0.8em;
    margin-bottom: 2px;
    padding      : 2px 0 0 1.5em;
}

.tk-reglist .tk-expansion .tk-number .tk-label {
    align-items    : center;
    display        : flex;
    justify-content: center;
    min-width      : 12px;
}

.tk-reglist .tk-expansion .tk-checkbox[aria-disabled="true"][aria-checked="true"]
    .tk-icon:before {
    background: var(--tk-control-shadow);
}

.tk-reglist .tk-expansion .tk-checkbox[aria-disabled="true"] .tk-contents,
.tk-reglist .tk-expansion .tk-number[disabled] *,
.tk-reglist .tk-expansion .tk-label[disabled],
.tk-reglist .tk-expansion .tk-textbox[disabled] {
    color: var(--tk-control-shadow);
}



/********************************** Memory ***********************************/

.tk-window .tk-memory {
    height: 100%;
    width : 100%;
}

.tk-memory .tk-editor {
    box-shadow: 0 0 0 1px var(--tk-control),0 0 0 2px var(--tk-control-shadow);
    height    : calc(100% - 6px);
    margin    : 3px;
    width     : calc(100% - 6px);
}

.tk-memory .tk-viewport {
    background: var(--tk-window);
    color     : var(--tk-window-text);
}

.tk-memory .tk-metrics,
.tk-memory .tk-view * {
    padding-bottom: 1px;
    cursor        : default;
    font-family   : var(--tk-font-mono);
    user-select   : none;
}

.tk-memory .tk-byte {
    border    : 0 solid transparent;
    padding   : 0 1px;
    text-align: center;
}

.tk-memory .tk-byte:not(.tk-15) {
    margin-right: calc(0.6em - 1px);
}

.tk-memory .tk-address,
.tk-memory .tk-byte.tk-7 {
    margin-right: calc(1.2em - 1px);
}

.tk-memory .tk-byte.tk-selected {
    background: var(--tk-selected-blur);
    color     : var(--tk-selected-blur-text);
}

.tk-memory .tk-editor:focus-within .tk-byte.tk-selected {
    background: var(--tk-selected);
    color     : var(--tk-selected-text);
}