:root {
    --background-color: hsl(0, 0%, 20%);
    --foreground-color: hsl(0, 0%, 23%);

    --hover-color: hsl(198, 61%, 87%);

    --item-hover-bg: hsl(200, 30%, 30%);

    --border-color: hsl(0, 0%, 25%);
    --border-color-split: hsl(0, 0%, 30%);
    --input-border-color: hsl(0, 0%, 40%);

    --text-color: hsl(0, 0%, 90%);
    --text-color-disabled: hsl(0, 0%, 50%);

    --scrollbar-color: hsl(0, 0%, 17%);
    --scrollbar-thumb-color: hsl(0, 0%, 23%);

    --table-scrollbar-color: hsl(0, 0%, 18%);
    --table-scrollbar-thumb-color: hsl(0, 0%, 22%);
    --table-border-color: var(--input-border-color);

    --dock-border-color: hsl(0, 0%, 17%);
    --dock-tab-color: hsl(0, 0%, 14%);
    --dock-tab-active-color: var(--background-color);
}

/* React Root Element */

#phantasmal_world_root {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

* {
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-color);

    /* Turn off antd animations by turning all animations off. */
    animation-duration: 0s !important;
    transition-duration: 0s !important;
}

::-webkit-scrollbar {
    background-color: var(--scrollbar-color);
}

::-webkit-scrollbar-track {
    background-color: var(--scrollbar-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
}

::-webkit-scrollbar-corner {
    background-color: var(--scrollbar-color);
}

body {
    overflow: hidden; /* Necessary for golden layout. */
}

/* react-virtualized */

#phantasmal_world_root :global(.ReactVirtualized__Grid) {
    outline: none;
}

#phantasmal_world_root :global(.ReactVirtualized__Table__headerRow) {
    text-transform: none;
}

#phantasmal_world_root :global(.ant-tabs-bar) {
    margin: 0;
}

/* golden-layout */

#phantasmal_world_root :global(.lm_header) {
    background: var(--dock-border-color);
}

#phantasmal_world_root :global(.lm_goldenlayout) {
    background: var(--dock-border-color);
}

#phantasmal_world_root :global(.lm_content) {
    background: var(--background-color);
}

#phantasmal_world_root :global(.lm_tab) {
    height: 26px;
    line-height: 26px;
    font-size: 12px;
    padding: 0 16px;
    margin: 2px 0 0 0;
    background: var(--dock-tab-color);
    box-shadow: none;
}

#phantasmal_world_root :global(.lm_tab.lm_active) {
    background: var(--dock-tab-active-color);
}

#phantasmal_world_root :global(.lm_controls) {
    top: 6px;
    right: 6px;
}