body {
    display: flex;
    flex-direction: column;
}

#loading-screen {
    background-color: var(--surface-1);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--z-index-overlay);
}

#loading-container {
    position: absolute;
    display: flex;
    gap: var(--gap-xxlarge);
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#loading-text {
    font-family: Recursive-Bold;
    font-size: var(--font-size-xxlarge);
    font-weight: bold;
    color: var(--text-primary);
}

#loading-logo {
    width: 64px;
    height: 64px;
    animation: spin-clockwise var(--transition-xslow) linear infinite;
}

#loading-logo:hover {
    animation-play-state: paused;
}

/* Header */
#header {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 50px;

    box-sizing: border-box;
    background-color: var(--surface-0);
    box-shadow: var(--shadow-bottom-hard);
    padding: var(--padding-none) var(--padding-xxlarge);
    z-index: var(--z-index-low);
}

#logo-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-xlarge);
}

#version-tag {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    background-color: var(--color-cyan-900);
    border: var(--border-small) solid var(--color-cyan-500);
    border-radius: var(--radius-medium);
}

#version-tag-text {
    font-family: Recursive-Bold;
    font-size: var(--font-size-xlarge);
    font-weight: bold;
    color: var(--text-primary);
    padding: var(--padding-medium);
}

#logo-image {
    width: 36px;
    height: 36px;
}

#logo-text {
    font-family: Noto-Sans-Bold;
    font-size: var(--font-size-xxlarge);
    line-height: 0px;
    font-weight: bold;
    color: var(--text-primary);
}

/* Container */
#documentation-container {
    display: flex;
    flex-direction: row;
    flex: 1;
}

#sidebar {
    display: flex;
    flex-direction: column;

    width: 250px;

    padding: var(--padding-xxlarge);
    background-color: var(--surface-0);
}

#sidebar > * {
    width: 100%;
    box-sizing: border-box;
}

#content {
    box-sizing: border-box;

    padding: var(--padding-none) var(--padding-xxlarge);

    background-color: var(--surface-1);

    height: 100%;
    flex: 1;
}

/* Control Page */
#button-showcaser {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xlarge);
}

#scroller-showcaser {
    width: 250px;
    height: 100px;
}

#separator-showcaser {
    width: 800px;
    height: 350px;
}

#socket-showcaser {
    display: flex;
    flex-direction: row;
    gap: var(--gap-large);
}

.socket {
    display: flex;
    justify-content: center;
    align-items: center;
}

.socket-item {
    display: flex;
    width: 50px;
    height: 50px;
    background-color: var(--surface-3);
    color: var(--text-primary);
    justify-content: center;
    align-items: center;
    font-family: 'Noto-Sans-Regular';
    font-size: var(--font-size-small);
}

.context-menu-sample {
    display: flex;
    width: 300px;
    height: 200px;
    background-color: var(--surface-2);
    border: var(--border-medium) dashed var(--color-neutral-500);
    border-radius: var(--radius-large);
}

.context-menu-sample h3 {
    margin: auto;
}

.action-history-sample {
    display: flex;
    flex-direction: column;
    gap: var(--gap-large);
}

/* Color Page */
.color-showcaser {
    display: flex;
    flex-direction: row;
}

.color-showcaser span {
    color: var(--text-primary);
    font-family: 'Noto-Sans-Regular';
}

.color-showcaser div {
    width: 24px;
    height: 24px;
    margin-left: 24px;
    outline: var(--outline-medium) solid var(--color-neutral-500);
    outline-style: dashed;
}

/* Utilities Page */
.injector-sample {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xlarge);
}

.injector-sample-container {
    display: flex;
    flex-direction: column;
    gap: var(--gap-large);
}

/* Animation Page */
#animations-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 128px);
    grid-auto-rows: 128px;
    gap: var(--gap-xxlarge);
}

#animations-container>div {
    display: flex;
    justify-content: center;
    align-items: center;

    border: 2px solid var(--control-border-normal);
    border-radius: 10px;
    padding: 10px;
}

#animation-box-grow {
    animation: grow var(--transition-slow) infinite;
}

#animation-box-grow-to-normal {
    animation: grow-to-normal var(--transition-slow) infinite;
}

#animation-box-grow-big {
    animation: grow-big var(--transition-slow) infinite;
}

#animation-box-grow-big-to-normal {
    animation: grow-big-to-normal var(--transition-slow) infinite;
}

#animation-box-shrink {
    animation: shrink var(--transition-slow) infinite;
}

#animation-box-shrink-to-normal {
    animation: shrink-to-normal var(--transition-slow) infinite;
}

#animation-box-shrink-big {
    animation: shrink-big var(--transition-slow) infinite;
}

#animation-box-shrink-big-to-normal {
    animation: shrink-big-to-normal var(--transition-slow) infinite;
}

#animation-box-grow-to-shrink {
    animation: grow-to-shrink var(--transition-slow) infinite;
}

#animation-box-grow-to-shrink-big {
    animation: grow-to-shrink-big var(--transition-slow) infinite;
}

#animation-box-fade-in-slide {
    animation: fade-in-slide var(--transition-slow) infinite;
}

#animation-box-fade-out-slide {
    animation: fade-out-slide var(--transition-slow) infinite;
}

#animation-box-spin-clockwise {
    animation: spin-clockwise var(--transition-xxslow) linear infinite;
}

#animation-box-spin-counterclockwise {
    animation: spin-counterclockwise var(--transition-xxslow) linear infinite;
}

/* Font Page */
.recursive-thin {
    font-family: Recursive-Thin;
}

.recursive-regular {
    font-family: Recursive-Regular;
}

.recursive-bold {
    font-family: Recursive-Bold;
}

.noto-sans-thin {
    font-family: Noto-Sans-Thin;
}

.noto-sans-regular {
    font-family: Noto-Sans-Regular;
}

.noto-sans-bold {
    font-family: Noto-Sans-Bold;
}

/* Pages */
.page {
    display: none;
}

.page.shown {
    display: block;
    animation: fade-in-slide var(--transition-medium) forwards;
}