:root {
    --spacing-s: 4px;
    --spacing-m: 8px;
    --spacing-l: 16px;

    --grey-1: hsl(0, 0%, 95%);
    --grey-2: hsl(0, 0%, 85%);
    --grey-3: hsl(0, 0%, 60%);
    --grey-4: hsl(0, 0%, 35%);
    --grey-5: hsl(0, 0%, 25%);

    --black: hsl(0, 0%, 10%);

    --blue-1: hsl(240, 75%, 90%);
    --blue-2: hsl(240, 75%, 75%);
    --blue-3: hsl(240, 75%, 50%);
    --blue-4: hsl(240, 75%, 35%);
    --blue-5: hsl(240, 75%, 25%);

    --purple-1: hsl(270, 100%, 90%);
    --purple-2: hsl(270, 100%, 75%);
    --purple-3: hsl(270, 100%, 50%);
    --purple-4: hsl(270, 100%, 35%);
    --purple-5: hsl(270, 100%, 25%);

    --red-1: hsl(0, 75%, 90%);
    --red-2: hsl(0, 75%, 75%);
    --red-3: hsl(0, 75%, 50%);
    --red-4: hsl(0, 75%, 35%);
    --red-5: hsl(0, 75%, 25%);

    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 16px;

    --shadow-shallow: 2px 2px 1px;
    --border-light: 1px solid var(--grey-3);
    --border-danger: 1px solid var(--red-3);
    --border-hover: 2px solid var(--blue-2);
    --border-hover-shallow: 1px solid var(--blue-2);

    --background-color: var(--grey-2);

    --text-normal: var(--grey-5);
    --text-danger: var(--red-4);
    --text-light: var(--grey-3);
    --text-inverse: var(--grey-1);

    --button-background-primary: var(--blue-4);
    --button-background-danger: var(--red-3);

    --highlight-background: hsla(0, 0%, 95%, 0.8);

    --selectable-border-light: 2px solid var(--highlight-background);
    --selectable-border-normal: 2px solid var(--background-color);
    --selectable-border-enabled: 2px solid var(--border-hover);
    --selectable-background-enabled: var(--blue-4);

    --toggleable-background-enabled: var(--blue-3);
    --toggleable-text-enabled: var(--text-inverse);
}

body[data-theme="dark"] {
    --shadow-shallow: 2px 2px 1px;
    --border-light: 1px solid var(--grey-4);
    --border-hover: 2px solid var(--blue-3);

    --background-color: var(--black);

    --text-normal: var(--grey-1);
    --text-light: var(--grey-3);
    --text-inverse: var(--grey-5);

    --button-background-primary: var(--blue-1);

    --highlight-background: var(--grey-4);
}

body[data-theme="cyber"] {
    --shadow-shallow: 2px 2px 1px;
    --border-light: 1px solid var(--grey-4);
    --border-hover: 2px solid var(--purple-3);

    --background-color: var(--black);

    --text-normal: var(--purple-1);
    --text-light: var(--grey-3);
    --text-inverse: var(--grey-5);

    --button-background-primary: var(--purple-2);

    --highlight-background: var(--grey-4);
}

.design {
    display: flex;
}

.design__sidebar {
    margin: var(--spacing-m);
    min-width: 200px;
}

.design__main {
    flex-grow: 1;
}

.swatch {
    margin: var(--spacing-m);
    border: var(--border-light);
    border-radius: var(--radius-s);
    width: 50px;
    height: 50px;
}

.swatch__grey-1 {
    background-color: var(--grey-1);
}

.swatch__grey-2 {
    background-color: var(--grey-2);
}

.swatch__grey-3 {
    background-color: var(--grey-3);
}

.swatch__grey-4 {
    background-color: var(--grey-4);
}

.swatch__grey-5 {
    background-color: var(--grey-5);
}

.swatch__blue-1 {
    background-color: var(--blue-1);
}

.swatch__blue-2 {
    background-color: var(--blue-2);
}

.swatch__blue-3 {
    background-color: var(--blue-3);
}

.swatch__blue-4 {
    background-color: var(--blue-4);
}

.swatch__blue-5 {
    background-color: var(--blue-5);
}

.swatch__purple-1 {
    background-color: var(--purple-1);
}

.swatch__purple-2 {
    background-color: var(--purple-2);
}

.swatch__purple-3 {
    background-color: var(--purple-3);
}

.swatch__purple-4 {
    background-color: var(--purple-4);
}

.swatch__purple-5 {
    background-color: var(--purple-5);
}

.swatch__red-1 {
    background-color: var(--red-1);
}

.swatch__red-2 {
    background-color: var(--red-2);
}

.swatch__red-3 {
    background-color: var(--red-3);
}

.swatch__red-4 {
    background-color: var(--red-4);
}

.swatch__red-5 {
    background-color: var(--red-5);
}

body {
    background-color: var(--background-color);
    color: var(--text-normal);
    font-family: Ariel, sans-serif;
}

.game-information__left {
    flex-grow: 1;
}

.game-information__right {
    width: 20%;
}

.button {
    padding: var(--spacing-m);
    border: var(--border-light);
    border-radius: var(--radius-l);
}

.button_destructive {
    border: var(--border-danger);
    color: var(--text-danger);
}

.button_primary-destructive {
    border: var(--border-danger);
    background-color: var(--button-background-danger);
    color: var(--text-inverse);
}

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

.edit-game {
    border: var(--border-light);
    border-radius: var(--radius-s);
    margin: var(--spacing-m);
}

.edit-game__player:nth-child(odd) {
    border: 2px solid var(--highlight-background);
    background-color: var(--highlight-background);
}

.user-overview {
    display: flex;
    margin-top: var(--spacing-s);
    padding: var(--spacing-m);
    border: 2px solid var(--background-color);
    border-radius: var(--radius-m);
}

.user-overview:hover {
    border: var(--border-hover);
}

.user-overview:nth-child(odd) {
    border: 2px solid var(--highlight-background);
    background-color: var(--highlight-background);
}

.user-overview:nth-child(odd):hover {
    border: var(--border-hover);
    background-color: var(--highlight-background);
}

.user-overview__name {
    width: 65%;
}

.button-bar {
    justify-content: space-between;
}

.toggleable {
    border: var(--border-light);
    border-radius: var(--radius-l);
    padding: var(--spacing-m);
}

.toggleable_enabled {
    border: var(--border-hover);
    border-radius: var(--radius-l);
    padding: var(--spacing-m);
    background: var(--toggleable-background-enabled);
    color: var(--toggleable-text-enabled);
}