:root {
    --size-xsm: 8px;
    --size-sm: 16px;
    --size-md: 24px;
    --size-lg: 32px;

    --spacing-sm: 2px;
    --spacing-md: 4px;
    --spacing-lg: 8px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 100px;;
}

body {
    background-color: var(--color-surface-background);
    color: var(--color-surface-text);
    font: var(--typography-body);
}

.layout-row {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.layout-row__gap-sm {
    gap: var(--spacing-sm);
}

.list {
    list-style-type: none;
    padding: 0px;
}

.list__item {
    border: var(--border-transparent);
    padding: var(--spacing-sm);
    transition: border 300ms ease;
}

.list__item_selected {
    border: var(--border-active);
}

.list__item:hover {
    border: var(--border-hover);
}

.tabs {
    list-style-type: none;
    padding: var(--spacing-sm);
}

.tabs_horizontal {
    list-style-type: none;
    padding: var(--spacing-sm);
    display: flex;
}

.tabs__item {
    padding: var(--spacing-lg);
}

.button {
    font: var(--typography-default);
    padding: var(--spacing-md);
    border: var(--border-invisible);
}

.notebook {
    display: grid;
    grid-template-columns: 200px 1fr;
}

.notebook_reverse {
    display: grid;
    grid-template-columns: 1fr 200px;

    > .notebook__navbar {
        grid-row-start: 1;
        grid-row-end: 1;
        grid-column-start: 2;
        grid-column-end: 2;
    }

    > .notebook__page {
        grid-row-start: 1;
        grid-row-end: 1;
        grid-column-start: 1;
        grid-column-end: 1;
    }
}

.notebook_vertical {
}

.notebook__page {
    height: 100%;
}

.notebook__navbar {
    width: 200px;
}

.sidebar-left {
    display: flex;
    height: 100%;
}

.sidebar-right {
    display: flex;
    height: 100%;
    flex-direction: row-reverse;
}

/*
.sidebar_expanded {
    display: grid;
    grid-template-columns: 1fr;
    transition: grid-template-columns 300ms ease;
}

.sidebar_collapsed {
    display: grid;
    grid-template-columns: 0fr;
    transition: grid-template-columns 300ms ease;
}

.sidebar__inner {
    overflow: hidden;
    min-width: 0;
}
*/

.image {
    max-width: 100%;
    transition: opacity 300ms ease-in-out;
}

.image_fade-in {
    opacity: 1;
}

.image_fade-out {
    opacity: 0;
}

.panel {
    background-color: var(--color-surface-raised1-background);
    color: var(--color-surface-raised1-text);

    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    padding-bottom: var(--spacing-md);

    border: var(--border-default);
    border-radius: var(--radius-md);
}

.panel__title {
    margin: 0px;
}

.panel:hover {
    border: var(--border-hover);
}

.expansion-animation-vertical__wrapper_open {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 300ms ease;
}

.expansion-animation-vertical__wrapper_closed {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms ease;
}

.expansion-animation__inner {
    overflow: hidden;
    min-height: 0;
}

.expansion-animation-horizontal__wrapper_open {
    display: grid;
    grid-template-columns: 1fr;
    transition: grid-template-columns 300ms ease;
}

.expansion-animation-horizontal__wrapper_closed {
    display: grid;
    grid-template-columns: 0fr;
    transition: grid-template-columns 300ms ease;
}

.toggle {
    position: relative;
    display: inline-block;
    width: calc(var(--size-md) * 2);
    height: var(--size-md);

    input {
        opacity: 0;
        width: 0;
        height: 0;
    }
}

.toggle__slider {
    position: absolute;
    background-color: var(--color-component-secondary-background);
    border-radius: var(--radius-full);
    width: 100%;
    height: 100%;
    transition: transform 300ms ease-in-out;
}

.toggle__slider_enabled {
    background-color: var(--color-component-accent-background);
}

.toggle__slider::before {
    content: "";
    position: absolute;
    height: calc(var(--size-md) - var(--spacing-sm) * 2);
    width: calc(var(--size-md) - var(--spacing-sm) * 2);
    background-color: var(--color-component-secondary-text);
    border-radius: 25px;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    transition: transform 300ms ease-in-out;
}

.toggle__slider_enabled::before {
    transform: translateX(var(--size-md));
}

.range {
    display: flex;
    background-color: var(--color-surface-raised1-background);
    padding: var(--spacing-md);
    align-items: center;
    gap: var(--spacing-lg);
}

.range__body {
    display: flex;
    gap: var(--spacing-sm);
}

.range__meter {
    display: flex;
}

.range__step-bar {
    height: var(--size-md);
    width: var(--size-xsm);
    border: var(--border-default);
}

.range__step-dot {
    height: var(--size-md);
    width: var(--size-md);
    border: var(--border-default);
    border-radius: var(--radius-full);
}