/**
 * @name Themecord
 * @description Discord theme compatible with your wallpaper!
 * @author danihek
 * @version 1.0.8
 * @website https://github.com/danihek/Themecord
 * @source https://github.com/danihek/Themecord
*/


--list-item-transition: 0.2s ease;  /* channels/members/settings hover transition */
--icon-spin-transition: 1s ease;    /* round icon button spin (settings, emoji, etc.) */

:root {

}

.theme-dark {
--background-primary: KEY(2);
--background-primary-alt: KEY(3);

--background-secondary: KEY(1);
--background-secondary-alt: KEY(2);

--background-floating: KEY(5);
--background-accent-gradient: KEY(2);
--background-tertiary: KEY(0);

--background-mentioned: KEY(12);
--background-mentioned-hover: KEY(3);

--background-modifier-hover: KEY(3);
--background-modifier-active: KEY(12);
--background-modifier-accent: KEY(3); 
--background-modifier-selected: KEY(13);

--scrollbar-auto-thumb: KEY(0);
--scrollbar-auto-thumb-hover: KEY(2);

--scrollbar-thin-track: transparent;
--scrollbar-auto-track: KEY(5);

--scrollbar-auto-scrollbar-color-thumb: KEY(5);
--scrollbar-auto-scrollbar-color-track: KEY(12);

--text-link: KEY(0);
--text-muted: KEY(15);
--text-normal: KEY(15);
--text-positive: KEY(15);

--interactive-muted: KEY(15);
--interactive-active: KEY(15);
--interactive-normal: KEY(15);
--interactive-selected: KEY(15);

--header-primary: KEY(15);
--channels-default: KEY(15);
--header-secondary: KEY(15);
--channeltextarea-background: KEY(14);
}

.theme-light {
--background-primary: KEY(13);
--background-primary-alt: KEY(12);

--background-secondary: KEY(14);
--background-secondary-alt: KEY(13);

--background-tertiary: KEY(4);
--background-floating: KEY(10);
--background-accent-gradient: KEY(6);

--background-modifier-accent: KEY(9);
--background-modifier-hover: KEY(15);
--background-modifier-active: KEY(14);
--background-modifier-selected: KEY(13);

--background-mentioned: KEY(10);
--background-mentioned-hover: KEY(10);

--scrollbar-thin-track: transparent;
--scrollbar-auto-track: KEY(13);

--scrollbar-auto-thumb: KEY(13);
--scrollbar-auto-thumb-hover: KEY(7);

--scrollbar-auto-scrollbar-color-track: KEY(8);
--scrollbar-auto-scrollbar-color-thumb: KEY(10);

--text-link: KEY(0);
--text-muted: KEY(1);
--text-normal: KEY(1);
--text-positive: KEY(0);

--interactive-muted: KEY(1);
--interactive-active: KEY(1);
--interactive-normal: KEY(1);
--interactive-selected: KEY(1);
}
/* Animations */
@keyframes popup {
    0% {
    transform: scale(1) translateY(0);
}
50% {
    transform: scale(1.05) translateZ(-1px);
}
100% {
    transform: scale(1) translateY(0);
}
}
button:hover,
button:focus,
a:hover,
a:focus,
input:hover,
input:focus,
select:hover,
select:focus,
textarea:hover,
textarea:focus,
[role="button"]:hover,
[role="button"]:focus,
[role="link"]:hover,
[role="link"]:focus,
.button-38aScr:hover,
.button-38aScr:focus,
.form_a7d72e:hover,
.form_a7d72e:focus,
[class*="clickable"]:hover,
[class*="clickable"]:focus,
[class*="wrapper"]:hover,
[class*="wrapper"]:focus {
animation: popup 0.3s ease-in-out;
border-radius: 20px;
}

/* Thanks https://github.com/refact0r for this piece of code */
:root.reduce-motion {
--list-item-transition: none;
--icon-spin-transition: none;
}
.wrapper_d8bfb3 .link_d8bfb3 /* channels */,
.container_e9f61e /* members */,
.channel_c91bad /* dms */,
.side_a0 .item_a0 /* settings */ {
transition: margin-left var(--list-item-transition);
}
.wrapper_d8bfb3:hover .link_d8bfb3,
.side_a0 .item_a0:hover {
margin-left: 10px;
}
.container_e9f61e:hover,
.channel_c91bad:hover {
margin-left: 18px;
}

/* spin hover animations */
button.button_f67531 /* make user panel buttons round */ {
border-radius: 50%;
}
.attachButton_f298d4 .attachButtonInner_f298d4 /* upload button */,
.emojiButton_d0696b .contents_dd4f85 /* emoji button */,
.closeButton_df5532 /* settings exit button */,
.contents_dd4f85 > .closeIcon_f9a4c9 /* modal close */ {
transition: transform var(--icon-spin-transition);
}
.button_f67531:last-child:hover .contents_dd4f85,
.attachButton_f298d4:hover .attachButtonInner_f298d4,
.emojiButton_d0696b:hover .contents_dd4f85,
.closeButton_df5532:hover,
.contents_dd4f85:hover > .closeIcon_f9a4c9 {
transform: rotate(360deg);
}
