:root {
    --color-ui-accent: #00b3ba;
    --color-ui-accent-hover: #00c1c9;
    --color-ui-accent-active: #008e93;
    --color-ui-neutral-light: #fdfdfe;
    --color-ui-neutral-light-hover: #fdfdfe;
    --color-ui-neutral-light-active: #fdfdfe;
    --color-ui-neutral-dark: #8b8b8b;
    --color-ui-neutral-dark-hover: #a1a1a1;
    --color-ui-neutral-dark-active: #c1c1c1;
    --color-bg-light: #464646;
    --color-bg-medium: #323232;
    --color-bg-dark: #282828;
    --color-p-light: #fafafa;
    --color-p-light-hover: #fafafa;
    --color-p-light-active: #fafafa;
    --color-p-dark: #282828;
    --color-p-dark-hover: #464646;
    --color-p-dark-active: #464646;
    --color-title-light: #fafafa;
    --color-title-dark: #282828;
}

.root {
    position: relative;
    overflow: hidden;
    color: var(--color-p-light);
    background-color: var(--color-bg-dark);
    height: 100vh;
    align-content: center;
}

.root-sidebar {
    position: absolute;
    left: -28em;
    width: 30em;
    height: 100vh;
    display: flex;
    transition: left 400ms;
}

.sidebar-visible .root-sidebar {
    left: 0;
}

.root-settings {
    z-index: 1;
    width: 28em;
    background-color: var(--color-bg-light);
    overflow: scroll;
    display: inline-block;
}

.root-settings .root-title {
    color: var(--color-title-light);
    text-align: center;
}

.root-sidebar-toggle {
    z-index: 1;
    height: 100vh;
    min-width: 2em;
    background-color: var(--color-bg-light);
    left: 0;
}

.root-quick-access-button {
    right: 0;
    width: 2em;
    height: 2em;
    cursor: pointer;
    margin-bottom: 0.5em;
}

.root-beat-stage-container {
    position: absolute;
    height: 100%;
    left: 0;
    width: 100vw;
    display: flex;
    flex-direction: column;
    transition: left 400ms, width 400ms;
}

.sidebar-visible .root-beat-stage-container {
    left: 30em;
    width: calc(100vw - 30em);
}

.root-beat-stage {
    position: relative;
    padding: 2em;
    max-height: 100vh;
    margin: auto;
    max-width: 100vw;
    transition: max-width 400ms;
}

.vertical-mode .root-beat-stage {
    margin: auto auto;
    padding-left: 3em;
    height: 100vh;
}

.sidebar-visible .root-beat-stage {
    max-width: calc(100vw - 30em);
}

.root-sidebar-left-strip {
    text-align: right;
    writing-mode: sideways-lr;
    background-color: var(--color-bg-light);
}

.root-sidebar-left-strip > * {
    display: inline-block;
}

.root-sidebar-left-tab {
    display: inline-block;
    width: 100%;
    padding: 8px 3px 8px 3px;
}

.root-sidebar-left-tab.active {
    background-color: var(--color-bg-medium);
    display: inline-block;
}

.root-sidebar-add-beat {
    width: 100%;
    padding: 8px 3px 8px 3px;
}

.root-sidebar-add-beat:hover,
.root-sidebar-left-tab:hover:not(.active) {
    cursor: pointer;
    background-color: var(--color-ui-neutral-dark);
    transition: background-color 200ms;
}

@media screen and (max-width: 900px) {
    .sidebar-visible .root-sidebar {
        left: 0;
        width: 100vw;
    }
    .root-sidebar {
        left: calc(-100vw + 2em);
        width: 100vw;
    }
    .root-settings {
        width: calc(100vw - 2em);
    }
    .sidebar-visible .root-beat-stage-container {
        left: 100vw;
    }
    .root-beat-stage-container {
        left: 0;
    }
    .sidebar-visible .root-beat-stage {
        max-width: 100vw;
    }
}

* {
    user-drag: none;
    user-select: none;
}