:root,
:root[data-theme='light'] {
    --color__brand: #0871de;
    --color__brand-dark1: #03264a;
    --color__brand-dark2: #043f7b;
    --color__brand-hover: #0658ad;
    --color__brand-disabled: #52a5f9;
    --color__brand-light1: #e6f2fe;
    --color__brand-light2: #b5d8fc;
    --color__brand-light3: #b5d8fc;
    --color__accent: #e66e00;
    --color__accent-dark1: #4d2500;
    --color__accent-dark2: #803d00;
    --color__accent-hover: #b35500;
    --color__accent-disabled: #ffa24d;
    --color__accent-light1: #fff2e5;
    --color__accent-light2: #ffd7b3;
    --color__accent-light3: #ffbc80;
    --color__neutral: #648bb4;
    --color__neutral-light: #ffffff;
    --color__neutral-light1: #eef2f7;
    --color__neutral-light2: #cbd8e6;
    --color__neutral-dark1: #080d11;
    --color__neutral-dark2: #192634;
    --color__border: #8c8c8c;
    --color__state-error: red;
    --color__state-success: green;
    --color__font: #000000ee;
    --color__font-light1: #000000cc;
    --color__font-light2: #00000099;
    --spacing__2xs: 4px;
    --spacing__xs: 8px;
    --spacing__s: 12px;
    --spacing__m: 16px;
    --spacing__l: 20px;
    --spacing__xl: 24px;
    --spacing__2xl: 28px;
    --spacing__3xl: 32px;
    --spacing__4xl: 40px;
    --spacing__5xl: 48px;
    --spacing__6xl: 64px;
    --spacing__huge: 96px;
    --font-size__2xs: 9px;
    --font-size__xs: 11px;
    --font-size__s: 13px;
    --font-size__m: 16px;
    --font-size__l: 18px;
    --font-size__xl: 24px;
    --font-size__2xl: 32px;
    --font-size__3xl: 48px;
    --font-size__4xl: 64px;
    --font-size__huge: 96px;
    --font-weight__normal: normal;
    --font-weight__thin: 200;
    --font-weight__bold: bold;
    --font-weight__semibold: 600;
}

* {
    box-sizing: border-box;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

svg {
    fill: var(--color__border);
}

.clickable {
    cursor: pointer;
}

.row-stack {
    display: flex;
    flex-direction: row;

    &.horizontal-left {
        justify-content: start;
    }

    &.horizontal-center {
        justify-content: center;
    }

    &.horizontal-right {
        justify-content: end;
    }

    &.horizontal-space-between {
        justify-content: space-between;
    }

    &.horizontal-space-around {
        justify-content: space-around;
    }

    &.horizontal-space-evenly {
        justify-content: space-evenly;
    }

    &.vertical-top {
        align-items: start;
    }

    &.vertical-center {
        align-items: center;
    }

    &.vertical-bottom {
        align-items: end;
    }
}

.column-stack {
    display: flex;
    flex-direction: column;

    &.vertical-top {
        justify-content: start;
    }

    &.vertical-center {
        justify-content: center;
    }

    &.vertical-bottom {
        justify-content: end;
    }

    &.vertical-space-between {
        justify-content: space-between;
    }

    &.vertical-space-around {
        justify-content: space-around;
    }

    &.vertical-space-evenly {
        justify-content: space-evenly;
    }

    &.horizontal-left {
        align-items: start;
    }

    &.horizontal-center {
        align-items: center;
    }

    &.horizontal-right {
        align-items: end;
    }
}

body {
    margin: 0;
    font-family: 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--color__neutral-light);
    font-size: var(--font-size__m);
    color: var(--color__font);
}

input:not([type]):not(.ignore-app-input),
input[type="email"],
input[type="text"],
input[type="password"],
input[type="datetime-local"],
select,
textarea {
    width: 100%;
    padding: var(--spacing__xs) var(--spacing__xs);
    margin: var(--spacing__xs) 0;
    display: block;
    border: 2px solid var(--color__border);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: var(--font-size__m);

    &:focus {
        outline-color: var(--color__brand);
    }
}

input[type="checkbox"] {
    height: var(--spacing__m);
    width: var(--spacing__m);
}

textarea {
    font-size: inherit;
    font-family: inherit;
}

a {
    color: var(--color__brand);
    cursor: pointer;
    font-weight: var(--font-weight__bold);
    text-decoration: none;

    &:hover {
        color: var(--color__brand-hover);
    }
}

.block {
    display: block;
}

input[type=button],
a[type=button],
button {
    background-color: var(--color__brand);
    color: white;
    padding: var(--spacing__xs) var(--spacing__s);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: var(--font-weight__semibold);
    font-size: inherit;
    width: fit-content;
    height: fit-content;

    &:hover {
        background-color: var(--color__brand-hover);
    }

    &:disabled {
        background-color: var(--color__brand-disabled);
    }

    &.loading {
        background-color: var(--color__brand-disabled);
    }

    &.outline-button {
        border: 3px solid var(--color__brand);
        background-color: var(--color__neutral-light);

        padding: calc(var(--spacing__xs) - 3px) calc(var(--spacing__s) - 3px);

        color: var(--color__brand);

        &:hover {
            border-color: var(--color__brand-hover);
            color: var(--color__brand-hover);
        }
    }

    &.plain-button {
        border: none;
        background-color: transparent;

        color: var(--color__brand);
        padding: 0;

        &:hover {
            color: var(--color__brand-hover);
        }

        &:disabled {
            color: var(--color__brand-disabled);
        }
    }

    &.accent-button {
        background-color: var(--color__accent);
        padding: var(--spacing__xs) var(--spacing__s);

        &:hover {
            background-color: var(--color__accent-hover);
        }

        &:disabled {
            background-color: var(--color__accent-disabled);
        }

        svg {
            fill: var(--color__neutral-light);
        }
    }

    
}

.gap-m {
    gap: var(--spacing__m)
}

.gap-s {
    gap: var(--spacing__s)
}

.gap-xs {
    gap: var(--spacing__xs)
}

.gap-l {
    gap: var(--spacing__l)
}

.padded {
    padding: var(--spacing__m);
}

.padded-horizontal {
    padding: 0 var(--spacing__m);
}

.padded-vertical {
    padding: var(--spacing__m) 0;
}

.padded-s {
    padding: var(--spacing__s);
}

.card {
    box-shadow: 0 0 4px 0 #aaa;

    &.fit-width {
        width: fit-content;
    }

    &.card-lift-on-hover:hover {
        box-shadow: 0 0 6px 0 #888;
    }
}

.rounded {
    border-radius: 4px;
}

h1,
h2 {
    font-weight: var(--font-weight__normal);
    margin: 0;
}

h3,
h4,
h5 {
    font-weight: var(--font-weight__semibold);
    margin: 0;
}

p {
    margin: 0;
}

.left-sidebar-app-header-body {
    margin-left: 200px;
    height: calc(100vh - 56px);
    margin-top: 56px;
}

.app-header-body {
    height: calc(100vh - 56px);
    margin-top: 56px;
}

.page-header {
    h1 {
        margin: 0;
    }
}

.flex-expand {
    flex-grow: 1;
}

.flex-wrap {
    flex-wrap: wrap;
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.subdued-text {
    color: var(--color__font-light1);
}

.checkbox-label {
    line-height: 1;
    margin-bottom: 3px;
}