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

@font-face {
    font-family: "Roboto";
    src        : /**/url("./roboto.woff2") format("woff2");
}

@font-face {
    font-family: "Inconsolata SemiExpanded Medium";
    src        : /**/url("./inconsolata.woff2") format("woff2");
}

body {
    background: var(--tk-control);
}

.tk {
    box-sizing : border-box;
    font-family: var(--tk-font-dialog);
    font-size  : var(--tk-font-size);
    line-height: 1em;
    margin     : 0;
    outline    : none; /* User agent focus indicator */
    padding    : 0;
}

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

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

.tk::selection,
.tk *::selection {
    background: var(--tk-selected);
    color     : var(--tk-selected-text);
}

.tk:not(:focus-within)::selection,
.tk *:not(:focus-within)::selection {
    background: var(--tk-selected-blur);
    color     : var(--tk-selected-blur-text);
}

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

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



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

.tk.button {
    align-items          : stretch;
    display              : inline-grid;
    grid-template-columns: auto;
    justify-content      : stretch;
    padding              : 0 1px 1px 0;
}

.tk.button .label {
    align-items          : center;
    background           : var(--tk-control);
    border               : 1px solid var(--tk-control-border);
    box-shadow           : 1px 1px 0 var(--tk-control-border);
    color                : var(--tk-control-text);
    display              : grid;
    grid-template-columns: auto;
    justify-content      : center;
    padding              : 2px;
}

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

.tk.button.pushed {
    padding: 1px 0 0 1px;
}

.tk.button.pushed .label {
    box-shadow: none;
}

.tk.button[aria-disabled="true"] .label {
    color     : var(--tk-control-shadow);
    border    : 1px solid var(--tk-control-shadow);
    box-shadow: 1px 1px 0 var(--tk-control-shadow);
}



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

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

.tk.checkbox .box {
    border: 1px solid var(--tk-control-shadow);
    color : var(--tk-control-text);
}

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

.tk.checkbox .box:before {
    background  : transparent;
    content     : "";
    display     : block;
    height      : 10px;
    mask        : /**/url("./check.svg") center no-repeat;
    -webkit-mask: /**/url("./check.svg") center no-repeat;
    width       : 10px;
}

.tk.checkbox[aria-checked="true"] .box:before {
    background: currentcolor;
}

.tk.checkbox[aria-checked="mixed"] .box:before {
    background  : currentcolor;
    mask        : /**/url("./check2.svg") center no-repeat;
    -webkit-mask: /**/url("./check2.svg") center no-repeat;
}

.tk.checkbox.pushed .box:before {
    background: var(--tk-control-shadow);
}

.tk.checkbox[aria-disabled="true"] .box {
    background: var(--tk-control);
    color     : var(--tk-control-shadow);
}
.tk.checkbox[aria-disabled="true"] .label {
    color: var(--tk-control-shadow);
}



/********************************* DropDown **********************************/

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

.tk.drop-down:focus {
    background: var(--tk-control-active);
}

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



/*********************************** Menus ***********************************/

.tk.menu-bar {
    background   : var(--tk-control);
    border-bottom: 1px solid var(--tk-control-border);
    color        : var(--tk-control-text);
    cursor       : default;
    padding      : 2px;
    position     : relative;
}

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

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

.tk.menu-item > * {
    align-items: center;
    border     : 1px solid transparent;
    column-gap : 4px;
    display    : flex;
    margin     : 0 1px 1px 0;
    padding    : 2px;
    user-select: none;
}

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

.tk.menu-item .icon:before {
    content: "";
    display: block;
    height : 100%;
    width  : 100%;
}

.tk.menu-bar > .menu-item .icon,
.tk.menu:not(.icons) > .menu-item .icon {
    display: none;
}

.tk.menu-item.checkbox .icon {
    border: 1px solid currentcolor;
}

.tk.menu-item.checkbox[aria-checked="true"] .icon:before {
    background  : currentcolor;
    mask        : /**/url("./check.svg") center no-repeat;
    -webkit-mask: /**/url("./check.svg") center no-repeat;
}

.tk.menu-item .label {
    flex-grow: 1;
}

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

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

.tk.menu-item.pushed > *,
.tk.menu-item[aria-expanded="true"] > * {
    background: var(--tk-control-active);
    border    : 1px solid var(--tk-control-shadow);
    box-shadow: none;
    margin    : 1px 0 0 1px;
}

.tk.menu > [role="separator"] {
    border      : solid var(--tk-control-shadow);
    border-width: 1px 0 0 0;
    margin      : 4px 2px;
}



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

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

.tk.radio .box {
    border       : 1px solid var(--tk-control-shadow);
    border-radius: 50%;
    color        : var(--tk-control-text);
    margin       : 1px;
}

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

.tk.radio .box:before {
    background   : transparent;
    border-radius: 50%;
    content      : "";
    display      : block;
    height       : 4px;
    margin       : 2px;
    width        : 4px;
}

.tk.radio[aria-checked="true"] .box:before {
    background: currentcolor;
}

.tk.radio.pushed .box:before {
    background: var(--tk-control-shadow);
}

.tk.radio[aria-disabled="true"] .box {
    background: var(--tk-control);
    color     : var(--tk-control-shadow);
}
.tk.radio[aria-disabled="true"] .label {
    color: var(--tk-control-shadow);
}



/********************************* ScrollBar *********************************/

.tk.scroll-bar {
    border    : 1px solid var(--tk-control-shadow);
    box-sizing: border-box;
}

.tk.scroll-bar .unit-less,
.tk.scroll-bar .unit-more {
    background: var(--tk-control);
    border    : 0 solid var(--tk-control-shadow);
    color     : var(--tk-control-text);
    height    : 11px;
    width     : 11px;
}
.tk.scroll-bar[aria-orientation="horizontal"] .unit-less {
    border-right-width: 1px;
}
.tk.scroll-bar[aria-orientation="horizontal"] .unit-more {
    border-left-width: 1px;
}
.tk.scroll-bar[aria-orientation="vertical"] .unit-less {
    border-bottom-width: 1px;
}
.tk.scroll-bar[aria-orientation="vertical"] .unit-more {
    border-top-width: 1px;
}

.tk.scroll-bar .unit-less:before,
.tk.scroll-bar .unit-more:before {
    background  : currentColor;
    content     : "";
    display     : block;
    height      : 100%;
    mask        : /**/url("./scroll.svg") center no-repeat;
    -webkit-mask: /**/url("./scroll.svg") center no-repeat;
    width       : 100%;
}

.tk.scroll-bar .unit-less.pushed:before,
.tk.scroll-bar .unit-more.pushed:before {
    mask-size        : 9px;
    -webkit-mask-size: 9px;
}

.tk.scroll-bar[aria-orientation="horizontal"] .unit-less:before {
    transform: rotate(-90deg);
}
.tk.scroll-bar[aria-orientation="horizontal"] .unit-more:before {
    transform: rotate(90deg);
}
.tk.scroll-bar[aria-orientation="vertical"] .unit-more:before {
    transform: rotate(180deg);
}

.tk.scroll-bar .track {
    background: var(--tk-control-highlight);
}

.tk.scroll-bar .thumb {
    background: var(--tk-control);
    box-shadow: 0 0 0 1px var(--tk-control-shadow);
}

.tk.scroll-bar .block-less.pushed,
.tk.scroll-bar .block-more.pushed {
    background: var(--tk-control-shadow);
    opacity   : 0.5;
}

.tk.scroll-bar:focus .unit-less,
.tk.scroll-bar:focus .unit-more,
.tk.scroll-bar:focus .thumb {
    background: var(--tk-control-active);
}

.tk.scroll-bar[aria-disabled="true"] .unit-less,
.tk.scroll-bar[aria-disabled="true"] .unit-more,
.tk.scroll-bar.unneeded .unit-less,
.tk.scroll-bar.unneeded .unit-more,
.tk.scroll-bar[aria-disabled="true"] .thumb {
    color: var(--tk-control-shadow);
}

.tk.scroll-bar.unneeded .thumb {
    visibility: hidden;
}



/******************************** ScrollPane *********************************/

.tk.scroll-pane {
    border: 1px solid var(--tk-control-shadow);
}

.tk.scroll-pane > .scroll-bar[aria-orientation="horizontal"] {
    border-width: 1px 1px 0 0;
}
.tk.scroll-pane:not(.vertical) > .scroll-bar[aria-orientation="horizontal"] {
    border-width: 1px 0 0 0;
}
.tk.scroll-pane > .scroll-bar[aria-orientation="vertical"] {
    border-width: 0 0 1px 1px;
}
.tk.scroll-pane:not(.horizontal) > .scroll-bar[aria-orientation="vertical"] {
    border-width: 0 0 0 1px;
}

.tk.scroll-pane > .viewport,
.tk.scroll-pane > .corner {
    background: var(--tk-control);
}



/********************************* SplitPane *********************************/

.tk.split-pane > [role="separator"]:focus {
    background: var(--tk-splitter-focus);
}

.tk.split-pane > .horizontal[role="separator"] {
    width: 3px;
}
.tk.split-pane > .vertical[role="separator"] {
    height: 3px;
}



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

.tk.text-box {
    background : var(--tk-window);
    border     : 1px solid var(--tk-control-border);
    color      : var(--tk-window-text);
    line-height: 1em;
    height     : calc(1em + 2px);
    padding    : 0;
    margin     : 0;
    min-width  : 0;
}

.tk.text-box.[aria-disabled="true"] {
    background: var(--tk-control-shadow);
    color     : var(--tk-window-text);
}



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

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

.tk.window:focus-within {
    border    : 1px solid var(--tk-control-border);
    box-shadow: 1px 1px 0 var(--tk-control-border);
}

.tk.window > .nw1 { left : -2px; top   : -2px; width : 8px; height: 3px; }
.tk.window > .nw2 { left : -2px; top   :  1px; width : 3px; height: 5px; }
.tk.window > .n   { left :  6px; top   : -2px; right : 6px; height: 3px; }
.tk.window > .ne1 { right: -2px; top   : -2px; width : 8px; height: 3px; }
.tk.window > .ne2 { right: -2px; top   :  1px; width : 3px; height: 5px; }
.tk.window > .w   { left : -2px; top   :  6px; bottom: 6px; width : 3px; }
.tk.window > .e   { right: -2px; top   :  6px; bottom: 6px; width : 3px; }
.tk.window > .sw1 { left : -2px; bottom: -2px; width : 8px; height: 3px; }
.tk.window > .sw2 { left : -2px; bottom:  1px; width : 3px; height: 5px; }
.tk.window > .s   { left :  6px; bottom: -2px; right : 6px; height: 3px; }
.tk.window > .se1 { right: -2px; bottom: -2px; width : 8px; height: 3px; }
.tk.window > .se2 { right: -2px; bottom:  1px; width : 3px; height: 5px; }

.tk.window > .title {
    align-items  : center;
    background   : var(--tk-window-blur-title);
    border-bottom: 1px solid var(--tk-control-shadow);
    color        : var(--tk-window-blur-title-text);
    padding      : 1px;
    user-select  : none;
}

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

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

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

.tk.window > .title .text {
    cursor       : default;
    font-weight  : bold;
    overflow     : hidden;
    text-align   : center;
    text-overflow: ellipsis;
    white-space  : nowrap;
}

.tk.window > .title .close-button {
    background: var(--tk-window-blur-close);
    border    : 1px solid var(--tk-control-shadow);
    box-sizing: border-box;
    color     : var(--tk-window-close-text);
    height    : 13px;
    width     : 13px;
}

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

.tk.window > .title .close-button:focus {
    background: var(--tk-window-close-focus);
    color     : var(--tk-window-close-focus-text);
    outline   : 1px solid var(--tk-control);
}

.tk.window > .title .close-button:before {
    background  : currentcolor;
    content     : "";
    display     : block;
    height      : 11px;
    mask        : /**/url("./close.svg") center no-repeat;
    -webkit-mask: /**/url("./close.svg") center no-repeat;
    width       : 11px;
}

.tk.window > .title .close-button.pushed:before {
    mask-size        : 9px;
    -webkit-mask-size: 9px;
}

.tk.window > .client {
    overflow: hidden;
}