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

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

    --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);
}

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

.button_primary {
    background-color: var(--color-component-primary-background);
    color: var(--color-component-primary-text);
}

.button_secondary {
    background-color: var(--color-component-secondary-background);
    color: var(--color-component-secondary-text);
}

.button_primary-destructive {
    background-color: var(--color-component-warning-background);
    color: var(--color-component-warning-text);
}

.button_secondary-destructive {
    background-color: var(--warning-100);
    color: var(--neutral-900);
}

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

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

.layout-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 0;
}

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

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

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

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

.tabs {
    list-style-type: none;
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    background-color: var(--color-surface-raised1-background);
}

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

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

.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;
}

.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_clickable: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-primary-background);
    transition: background-color 300ms ease-in-out;
}

.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-accent-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);
}

.text-entry {
    padding: var(--spacing-md);
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
    border-radius: var(--radius-lg);
}

.dialog {
    padding: var(--spacing-md);
    border: 2px solid var(--accent-300);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-raised1-background);
    color: var(--color-surface-raised1-text);
    max-height: 75%;
    max-width: 75%;
}

.dialog__title {
    margin: 0px;
    padding: 0px;
    padding-bottom: var(--spacing-lg);
}

.dialog__header {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-lg);

    .button {
        align-self: start;
    }
}

[data-theme="summer"] {
    --primary-100: hsl(296, 51%, 89%);
    --primary-300: hsl(288, 51%, 65%);
    --primary-500: hsl(280, 44%, 57%);
    --primary-700: hsl(284, 43%, 35%);
    --primary-900: hsl(287, 43%, 22%);
    --secondary-100: hsl(68, 50%, 67%);
    --secondary-300: hsl(66, 45%, 60%);
    --secondary-500: hsl(64, 42%, 50%);
    --secondary-700: hsl(68, 45%, 35%);
    --secondary-900: hsl(71, 37%, 25%);
    --neutral-100: hsl(0, 0%, 99%);
    --neutral-200: hsl(0, 0%, 90%);
    --neutral-300: hsl(0, 0%, 85%);
    --neutral-400: hsl(0, 0%, 80%);
    --neutral-500: hsl(0, 0%, 75%);
    --neutral-600: hsl(0, 0%, 70%);
    --neutral-700: hsl(0, 0%, 50%);
    --neutral-800: hsl(0, 0%, 30%);
    --neutral-900: hsl(0, 0%, 10%);
    --accent-100: hsl(22, 47%, 79%);
    --accent-300: hsl(17, 41%, 60%);
    --accent-500: hsl(13, 35%, 57%);
    --accent-700: hsl(16, 35%, 47%);
    --accent-900: hsl(18, 40%, 34%);
    --warning-100: hsl(0, 60%, 90%);
    --warning-300: hsl(0, 60%, 80%);
    --warning-500: hsl(0, 60%, 75%);
    --warning-700: hsl(0, 60%, 70%);
    --warning-900: hsl(0, 60%, 65%);
    
    --typography-family-default: Helvetica;
    --typography-weight-base: 500;
    --typography-weight-bold: 800;
    --typography-size-sm: 14px;
    --typography-size-base: 16px;
    --typography-size-lg: 24p;
    
    --color-component-primary-background: var(--primary-700);
    --color-component-primary-text: var(--neutral-100);
    --color-container-primary-background: var(--primary-100);
    --color-container-primary-text: var(--neutral-900);
    
    --color-component-secondary-background: var(--secondary-300);
    --color-component-secondary-text: var(--neutral-900);
    --color-container-secondary-background: var(--secondary-200);
    --color-container-secondary-text: var(--neutral-900);
    
    --color-component-neutral-background: var(--neutral-400);
    --color-component-neutral-text: var(--neutral-900);
    --color-container-neutral-background: var(--neutral-200);
    --color-container-neutral-text: var(--neutral-900);
    
    --color-component-accent-background: var(--accent-700);
    --color-component-accent-text: var(--neutral-100);
    --color-container-accent-background: var(--accent-100);
    --color-container-accent-text: var(--neutral-900);
    
    --color-component-warning-background: var(--warning-700);
    --color-component-warning-text: var(--neutral-900);
    --color-container-warning-background: var(--warning-100);
    --color-container-warning-text: var(--neutral-900);
    
    --color-surface-background: var(--neutral-100);
    --color-surface-text: var(--neutral-900);
    
    --color-surface-raised1-background: var(--neutral-200);
    --color-surface-raised1-text: var(--neutral-800);
    --color-surface-raised2-background: var(--neutral-300);
    --color-surface-raised2-text: var(--neutral-800);
    --color-surface-raised3-background: var(--neutral-400);
    --color-surface-raised3-text: var(--neutral-900);
    --color-surface-raised4-background: var(--neutral-500);
    --color-surface-raised4-text: var(--neutral-900);
    --color-surface-raised5-background: var(--neutral-600);
    --color-surface-raised5-text: var(--neutral-900);
    
    --font-family: "Fira Sans", Helvetica, sans-serif;
    --typography-body: 16px var(--font-family);
    --typography-heading: 24px var(--font-family);
    --typography-weight-bold: 800;
    
    --border-default: 2px solid var(--neutral-600);
    --border-transparent: 2px solid transparent;
    --border-active: 2px solid var(--primary-700);
    --border-hover: 2px solid var(--accent-300);
    
    .list__item {
        border-radius: var(--radius-sm);
    }

    .tabs__item {
        background-color: var(--color-component-secondary-background);
        color: var(--color-component-secondary-text);
        border-radius: var(--radius-lg);
    }
    
    .tabs__item_selected {
        background-color: var(--color-component-primary-background);
        color: var(--color-component-primary-text);
    }


    .button {
        border-radius: var(--radius-lg);
        padding: var(--spacing-md);
    }

    .sidebar {
        > .button {
            background-color: var(--accent-300);
            color: var(--accent-900);
            border-radius: var(--radius-sm);
        }
    }

    .range {
        border-radius: var(--space-md);
    }

    .range__step_filled {
        background-color: var(--primary-700);
    }

    .range__step_unfilled {
        background-color: var(--neutral-100);
    }

    .range__step_unavailable {
        background-color: var(--neutral-900);
    }

    .range__step_hover {
        background-color: var(--secondary-700);
    }
}

[data-theme="neon"] {
    --neutral-100: hsl(225, 48%, 90%);
    --neutral-200: hsl(225, 48%, 85%);
    --neutral-300: hsl(225, 48%, 80%);
    --neutral-400: hsl(225, 48%, 70%);
    --neutral-500: hsl(225, 48%, 60%);
    --neutral-600: hsl(225, 48%, 40%);
    --neutral-700: hsl(225, 48%, 30%);
    --neutral-800: hsl(225, 48%, 20%);
    --neutral-900: hsl(225, 48%, 10%);
    --primary-100: hsl(260, 100%, 95%);
    --primary-300: hsl(260, 100%, 80%);
    --primary-500: hsl(260, 100%, 60%);
    --primary-700: hsl(260, 100%, 40%);
    --primary-900: hsl(260, 100%, 20%);
    --secondary-100: hsl(182, 100%, 90%);
    --secondary-300: hsl(182, 100%, 70%);
    --secondary-500: hsl(182, 100%, 40%);
    --secondary-700: hsl(182, 100%, 20%);
    --secondary-900: hsl(182, 100%, 10%);
    --accent-100: hsl(20, 99%, 90%);
    --accent-300: hsl(20, 99%, 75%);
    --accent-500: hsl(20, 99%, 60%);
    --accent-700: hsl(20, 99%, 40%);
    --accent-900: hsl(20, 99%, 20%);
    --warning-100: hsl(0, 100%, 95%);
    --warning-300: hsl(0, 100%, 80%);
    --warning-500: hsl(0, 100%, 60%);
    --warning-700: hsl(0, 100%, 40%);
    --warning-900: hsl(0, 100%, 20%);

    --typography-family-default: Helvetica;
    --typography-weight-base: 500;
    --typography-size-sm: 14px;
    --typography-size-base: 16px;
    --typography-size-lg: 24px;

    --color-component-primary-background: var(--primary-500);
    --color-component-primary-text: var(--primary-100);
    --color-container-primary-background: var(--primary-100);
    --color-container-primary-text: var(--primary-900);

    --color-component-secondary-background: var(--secondary-700);
    --color-component-secondary-text: var(--secondary-100);
    --color-container-secondary-background: var(--secondary-100);
    --color-container-secondary-text: var(--secondary-900);

    --color-component-neutral-background: var(--neutral-700);
    --color-component-neutral-text: var(--neutral-200);
    --color-container-neutral-background: var(--neutral-200);
    --color-container-neutral-text: var(--neutral-900);

    --color-component-accent-background: var(--accent-700);
    --color-component-accent-text: var(--accent-100);
    --color-container-accent-background: var(--accent-100);
    --color-container-accent-text: var(--accent-900);

    --color-component-warning-background: var(--warning-700);
    --color-component-warning-text: var(--warning-100);
    --color-container-warning-background: var(--warning-100);
    --color-container-warning-text: var(--warning-900);

    --color-surface-background: var(--neutral-900);
    --color-surface-text: var(--neutral-100);

    --color-surface-raised1-background: var(--neutral-800);
    --color-surface-raised1-text: var(--neutral-100);
    --color-surface-raised2-background: var(--neutral-700);
    --color-surface-raised2-text: var(--neutral-100);
    --color-surface-raised3-background: var(--neutral-600);
    --color-surface-raised3-text: var(--neutral-100);
    --color-surface-raised4-background: var(--neutral-500);
    --color-surface-raised4-text: var(--neutral-900);
    --color-surface-raised5-background: var(--neutral-400);
    --color-surface-raised5-text: var(--neutral-900);

    --font-family: "Michroma", Helvetica, sans-serif;
    --typography-body: 16px var(--font-family);
    --typography-heading: 24px var(--font-family);

    --border-default: 2px solid var(--neutral-600);
    --border-transparent: 2px solid transparent;
    --border-active: 2px solid var(--primary-500);
    --border-hover: 2px solid var(--accent-300);

    .panel {
        position: relative;
        border: 0px;
        border-radius: 0px;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
        padding-bottom: var(--spacing-md);
        margin: var(--spacing-md);
        background-color: rgba(0, 0, 0, 0);
    }

    .panel__inner::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        clip-path: polygon(
            0 4px,
            4px 0,

            70% 0,
            calc(70% + 8px) 8px,
            calc(100% - 4px) 8px,
            100% 12px,

            100% calc(100% - 8px),
            calc(100% - 8px) 100%,

            8px 100%,
            2px calc(100% - 6px),
            2px 75%,
            0 calc(75% - 2px)
        );
        background-color: var(--secondary-500);
        transition: background-color 300ms ease-in-out;
    }
    .panel_clickable > .panel__inner:hover::before {
        background-color: var(--accent-300);
    }
    .panel__inner::after {
        content: "";
        position: absolute;
        left: 0%;
        top: 0%;
        width: 100%;
        height: 100%;
        background: var(--color-surface-raised1-background);
        box-shadow: 0px 0px 2px 2px var(--color-surface-raised5-backround) inset;
        clip-path: polygon(
            2px 6px,
            8px 0px,
            30px 0px,
            36px 6px,

            calc(70% + 6px) 6px,
            calc(70% + 10px) 10px,
            calc(100% - 6px) 10px,
            calc(100% - 2px) 14px,

            calc(100% - 2px) calc(100% - 6px),
            calc(100% - 6px) calc(100% - 2px),

            10px calc(100% - 2px),
            4px calc(100% - 8px),
            4px calc(75% + 2px),
            2px 75%
        );
    }

    .panel__content {
        position: relative;
        z-index: 1;
    }
    
    .list__item {
        border-radius: var(--radius-sm);
    }
    
    .tabs_horizontal {
        background-color: var(--color-surface-raised1-background);
        gap: var(--space-sm);
    }
    
    .tabs__item {
        background-color: var(--color-component-secondary-background);
        color: var(--color-component-secondary-text);
    }
    
    .tabs__item_selected {
        background-color: var(--color-component-primary-background);
        color: var(--color-component-primary-text);
    }

    .sidebar {
        > .button {
            background-color: var(--accent-700);
            color: var(--accent-100);
            border-radius: var(--radius-sm);
        }
    }

    .range__step_filled {
        background-color: var(--primary-500);
    }

    .range__step_unfilled {
        background-color: var(--neutral-100);
    }

    .range__step_unavailable {
        background-color: var(--neutral-900);
    }

    .range__step_hover {
        background-color: var(--accent-300);
    }

    .dialog {
        box-shadow: 0px 0px var(--spacing-md) 0px var(--secondary-300);
        position: relative;
        border: 0px;
        border-radius: 0px;
    }

    .dialog__inner::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        clip-path: polygon(
            2px 0px,
            calc(100% - 2px) 0px,
            100% 2px,
            100% calc(100% - 2px),
            calc(100% - 2px) 100%,
            2px 100%,
            0px calc(100% - 2px),
            0px 2px
        );
        background-color: var(--secondary-500);
    }

    .dialog__inner::after {
        content: "";
        position: absolute;
        left: 0%;
        top: 0%;
        width: 100%;
        height: 100%;
        background: var(--color-surface-raised1-background);
        box-shadow: 0px 0px 2px 2px var(--color-surface-raised5-backround) inset;
        clip-path: polygon(
            2px 2px,
            2px 0px,
            30px 0px,
            34px 4px,

            calc(70% + 4px) 4px,
            calc(70% + 6px) 6px,
            calc(100% - 6px) 6px,
            calc(100% - 2px) 10px,

            calc(100% - 2px) calc(100% - 6px),
            calc(100% - 6px) calc(100% - 2px),

            10px calc(100% - 2px),
            4px calc(100% - 8px),
            4px calc(75% + 2px),
            2px 75%
        );
    }

    .dialog__content {
        position: relative;
        z-index: 1;
    }

    .dialog__title {
    }

    .dialog__header {
    }
}