:root {{
    /* Special */
    --background: {background};
    --foreground: {foreground};
    --cursor: {cursor};

    /* Colors */
    --color0: {color0};
    --color1: {color1};
    --color2: {color2};
    --color3: {color3};
    --color4: {color4};
    --color5: {color5};
    --color6: {color6};
    --color7: {color7};
    --color8: {color8};
    --color9: {color9};
    --color10: {color10};
    --color11: {color11};
    --color12: {color12};
    --color13: {color13};
    --color14: {color14};
    --color15: {color15};

    /* Transparency values (TODO: make it work with color0)
    100% — FF 95% — F2 90% — E6 85% — D9 80% — CC 75% — BF 70% — B3 65% — A6 60% — 99 55% — 8C 50% — 80 45% — 73 40% — 66 35% — 59 30% — 4D 25% — 40 20% — 33 15% — 26 10% — 1A 5% — 0D 0% — 00
    --background-lighter: {color0}d9;
    */
}}

element {{
    font-size: 100%;
}} /* end element */

.theme-dark {{
    --header-primary: var(--color15);
    --header-secondary: var(--color7);
    --text-normal: var(--color7);
    --text-muted: var(--color7);
    --text-link: var(--color12);
    --channels-default: var(--color15);
    --interactive-normal: var(--color15);
    --interactive-hover: var(--color15);
    --interactive-active: var(--color15);
    --interactive-muted: var(--color7);
    --background-primary: var(--color0);
    --background-secondary: linear-gradient(
        rgba(255, 255, 255, 0.02),
        rgba(255, 255, 255, 0.02)
    ), var(--color0);
    --background-secondary-alt: var(--color0);
    --background-tertiary: var(--color0);
    --background-accent: var(--color0);
    --background-floating: var(--color0);
    --background-mobile-primary: var(--color0);
    --background-mobile-secondary: var(--color0);
    --background-modifier-hover: rgba(79,84,92,0.16);
    --background-modifier-active: rgba(79,84,92,0.24);
    --background-modifier-selected: rgba(79,84,92,0.32);
    --background-modifier-accent: hsla(0,0%,100%,0.06);
    --background-mentioned: rgba(250,166,26,0.05);
    --background-mentioned-hover: rgba(250,166,26,0.08);
    --background-message-hover: rgba(4,4,5,0.07);
    --elevation-stroke: 0 0 0 1px rgba(4,4,5,0.15);
    --elevation-low: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05);
    --elevation-medium: 0 4px 4px rgba(0,0,0,0.16);
    --elevation-high: 0 8px 16px rgba(0,0,0,0.24);
    --logo-primary: #fff;
    --guild-header-text-shadow: 0 1px 1px rgba(0,0,0,0.4);
    --channeltextarea-background: var(--color1);
    --activity-card-background: #ff0000;
    --textbox-markdown-syntax: var(--color15);
    --deprecated-card-bg: rgba(32,34,37,0.6);
    --deprecated-card-editable-bg: rgba(32,34,37,0.3);
    --deprecated-store-bg: #36393f;
    --deprecated-quickswitcher-input-background: var(--color8);
    --deprecated-quickswitcher-input-placeholder: var(--color7);
    --deprecated-text-input-bg: rgba(0,0,0,0.1);
    --deprecated-text-input-border: rgba(0,0,0,0.3);
    --deprecated-text-input-border-hover: #040405;
    --deprecated-text-input-border-disabled: #202225;
    --deprecated-text-input-prefix: #dcddde;

    --background-primary-lighter: var(--background-lighter);
}} /* end .theme-dark */

.theme-light {{
    --header-primary: var(--color8);
    --header-secondary: var(--color0);
    --text-normal: var(--color0);
    --text-muted: var(--color8);
    --text-link: var(--color12);
    --channels-default: var(--color0);
    --interactive-hover: var(--color8);
    --interactive-active: var(--color8);
    --interactive-muted: var(--color8);
    --background-primary: var(--color7);
    --background-secondary: var(--color15);
    --background-secondary-alt: var(--color15);
    --background-tertiary: var(--color7);
    --background-accent: var(--color7);
    --background-floating: var(--color7);
    --background-mobile-primary: var(--color7);
    --background-mobile-secondary: var(--color15);
    --background-modifier-hover: rgba(79,84,92,0.16);
    --background-modifier-active: rgba(79,84,92,0.24);
    --background-modifier-selected: rgba(79,84,92,0.32);
    --background-modifier-accent: hsla(0,0%,100%,0.06);
    --background-mentioned: rgba(250,166,26,0.05);
    --background-mentioned-hover: rgba(250,166,26,0.08);
    --background-message-hover: rgba(4,4,5,0.07);
    --elevation-stroke: 0 0 0 1px rgba(4,4,5,0.15);
    --elevation-low: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05);
    --elevation-medium: 0 4px 4px rgba(0,0,0,0.16);
    --elevation-high: 0 8px 16px rgba(0,0,0,0.24);
    --logo-primary: #fff;
    --guild-header-text-shadow: 0 1px 1px rgba(0,0,0,0.4);
    --channeltextarea-background: var(--color15);
    --activity-card-background: #ff0000;
    --textbox-markdown-syntax: var(--color8);
    --deprecated-card-bg: rgba(32,34,37,0.6);
    --deprecated-card-editable-bg: rgba(32,34,37,0.3);
    --deprecated-store-bg: #36393f;
    --deprecated-quickswitcher-input-background: var(--color15);
    --deprecated-quickswitcher-input-placeholder: var(--color8);
    --deprecated-text-input-bg: rgba(0,0,0,0.1);
    --deprecated-text-input-border: rgba(0,0,0,0.3);
    --deprecated-text-input-border-hover: #040405;
    --deprecated-text-input-border-disabled: #202225;
    --deprecated-text-input-prefix: #dcddde;
}} /* end .theme-light */

.theme-dark .scrollerThemed-2oenus.themedWithTrack-q8E3vB> .scroller-2FKFPG {{
    background-color: var(--background-color);
}}

.theme-dark .scrollerThemed-2oenus.themedWithTrack-q8E3vB>.scroller-2FKFPG::-webkit-scrollbar-track-piece {{
    border-radius: 0px;
}}

/* Get rid of gift button */
button[aria-label="Send a gift"] {{
    display: none;
}}

/* Change scrollbar to cleaner look */
::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {{
    background: transparent !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
    width:5px !important;
}}
::-webkit-scrollbar-thumb{{
    background: white !important;
    width:5px !important;
    border:none !important;
    border-radius: 5px !important;
}}

/* Change friend list */
.peopleColumn-29fq28 {{
    background-color: var(--background-primary) !important;
}}

/* User popout */
.headerNormal-T_seeN,
.header-2BwW8b,
.size16-14cGz5 {{
    background-color: var(--background-primary) !important;
}}

.bodyInner-245q0L {{
    background-color: var(--background-primary) !important;
}}

.footer-1fjuF6 {{
    background-color: var(--background-primary) !important;
}}

.quickMessage-2XpSaN, .quickMessage-1yeL4E {{
    background-color: var(--color1) !important;
}}
::placeholder {{
    color: var(--color15) !important;
}}

/* voice chat box next to friend list */
.body-1ld4H7 {{
    background-color: var(--color3) !important;
}}

/* invite friends */
.modal-yWgWj-,
.modal-1k91nT,
.sizeSmall-1jtLQy,
.fullscreenOnMobile-1aglG_ {{
    background-color: var(--background-primary) !important;
}}

/* pop up windows */
.flex-1xMQg5,
.flex-1O1GKY,
.horizontalReverse-2eTKWD,
.horizontalReverse-3tRjY7,
.flex-1O1GKY,
.directionRowReverse-m8IjIq,
.justifyStart-2NDFzi,
.alignStretch-DpGPf3,
.noWrap-3jynv6,
.footer-3rDWdC,
.footer-1FPmkC,
.message-2qRu38 {{
    background-color: var(--background-primary) !important;
}}

/* user settings */
.userInfoViewing-16kqK3,
.cardPrimary-1Hv-to,
.card-3Qj_Yx {{
    background-color: var(--background-primary) !important;
}}

.inner-ZyuQk0,
.container-2zArDx,
.content-8biNdB {{
    background-color: var(--background-primary) !important;
}}

/* searchbar */
.searchBar-3dMhjb {{
    background-color: var(--color1) !important;
}}

/* green shadow while talking */
.avatarSpeaking-3MqCHL {{
    -webkit-box-shadow: inset 0 0 0 2px #43b581,inset 0 0 0 3px var(--background-secondary) !important;
    box-shadow: inset 0 0 0 0px #43b581,inset 0 0 0 2px #43b581 !important;
}}

.body-3iLsc4, .thin-1ybCId, .autocompleteInner-zh20B_ {{
    background-color: var(--background-primary) !important;
}}

.selectorSelected-1_M1WV {{
    background-color: var(--color4) !important;
}}

/* Member column
.members-1998pB {{
    background-color: var(--background-primary-lighter) !important;
}}
*/

/*
@function lightness($color, $lightnessMultiplier){{
  $color: str-replace($color, 'var(');
  $color: str-replace($color, ')');
  $color-h: var(#{{$color+'-h'}});
  $color-s: var(#{{$color+'-s'}});
  $color-l: var(#{{$color+'-l'}});
  @return hsl($color-h, $color-s, calc(#{{$color-l}} * #{{$lightnessMultiplier}}));
}}

.childWrapper-anI2G9, .acronym-2mOFsV {{
    background-color: linear-gradient(var(--color0), var(--color1));
}} */

/* Stream button
.button-1YfofB,
.buttonColor-7qQbGO,
.buttonActive-3FrkXp,
.button-38aScr,
.lookFilled-1Gx00P,
.colorBrand-3pXr91,
.sizeSmall-2cSMqn {{
    background-color: var(--color0) !important;
}}