:root {
	--gruv-font-family: "Fira Code";
	--gruv-font-size: 16px;

	--gruv-bg-dark: #1d2021;
	--gruv-bg-dark1: #222222;
	--gruv-bg-dark2: #202020;
	--gruv-bg-normal: #282828;
	--gruv-bg-light: #504945;

	--gruv-border: #353331;

	--gruv-fg-light: #fbf1c7;
	--gruv-fg-normal: #ebdbb2;
	--gruv-fg-light-dark: #d5c4a1;
	--gruv-fg-dark: #a89984;
	--gruv-fg-inactive: #696969;

	--gruv-red: #fb4934;
	--gruv-purple: #b16286;
	--gruv-blue: #458588;
	--gruv-green: #b8bb26;
	--gruv-aqua: #83c07c;
	--gruv-yellow: #fabd2f;
	--gruv-orange: #fe8019;

	--gruv-accent: var(--gruv-aqua);

	--button: #daddee1a;
}

.theme-dark {
	--header-primary: var(--gruv-fg-light);
	--header-secondary: var(--gruv-fg-light-dark);
	--text-normal: var(--gruv-fg-light);
	--text-muted: var(--gruv-fg-light-dark);
	--text-link: var(--gruv-accent);
	--channels-default: var(--gruv-fg-light-dark);
	--interactive-normal: var(--gruv-fg-light-dark);
	--interactive-hover: var(--gruv-fg-light);
	--interactive-active: var(--gruv-fg-light);
	--interactive-muted: var(--gruv-fg-light-dark);
	--background-primary: var(--gruv-bg-normal);
	--background-secondary: var(--gruv-bg-dark1);
	--background-secondary-alt: var(--gruv-bg-normal);
	--background-tertiary: var(--gruv-bg-normal);
	--background-accent: var(--gruv-accent);
	--background-floating: var(--gruv-bg-normal);
	--background-modifier-hover: rgba(79, 84, 92, 0.16);
	--background-modifier-active: rgba(79, 84, 92, 0.24);
	/*--background-modifier-accent: hsla(0, 0%, 100%, 0.06);*/
	--background-modifier-accent: rgba(0, 0, 0, 0);
	--elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24);
	--guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
	--channeltextarea-background: var(--gruv-bg-normal);
	--activity-card-background: var(--gruv-bg-dark1);
	--deprecated-panel-background: var(--gruv-bg-dark);
	--background-modifier-selected: var(--gruv-bg-normal);
	--elevation-low: none !important;
	--background-message-hover: var(--gruv-bg-dark1) !important;
}

* {
	font-family: var(--gruv-font-family) !important;
	font-size: var(--gruv-font-size) !important;
}

/* Make channel list more compact */
/* [class*="sidebar"] [class*="containerDefault"] [class*="mainContent"] { */
/* 	height: 20px !important; */
/* } */

/* Chat content */
[class*="chatContent"] [class*="form"] {
	/* padding-top: 0.5rem; */
	background-color: var(--gruv-bg-normal);
	box-shadow: 0 -20px 40px -20px #0000006e;
}

/* Chat profiles */
img[class*="avatar"] {
	border-radius: 20%;
	overflow: hidden;
	transition: filter 0.1s, transform 0.1s ease-in-out;
}
img[class*="avatar"]:hover {
	transform: scale(1.1);
}

/* Live tag when streaming */
[class*="live"][class*="textBadge"] {
	background-color: var(--gruv-red) !important;
	color: var(--gruv-fg-normal);
}

code.hljs:not(.inline)::before {
	content: attr(class) !important;
	float: right;
	display: block;
	width: auto;
	max-width:  100px;
	text-align: right;
	min-width:  auto;
	margin-top: -127px;
	line-height: 20px;
	overflow-x: hidden;
	scrollbar-width: none;
	color: var(--gruv-fg-light-dark);
	opacity: 0.6;
}


/* Icons color */
[class*="sidebar"] [class*="containerDefault"] [class*="mainContent"] div[class*="iconContainer-"] svg {
    color: var(--gruv-fg-light-dark) !important;
}

/* Scrollbar */
::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-handle,
::-webkit-scrollbar-track-piece {
	border-color: rgba(0, 0, 0, 0) !important;
	background-color: rgba(0, 0, 0, 0) !important;
}

/*Chat stuff*/
div[class*="chat"] div[class*="root"] {
	background-color: var(--gruv-bg-normal);
}

div[class*="autocomplete-"] div[class*="rail"] > div {
    background-color: var(--gruv-bg-normal) !important;
}

div[class*="autocomplete-"], div[class*="autocomplete-"] div[class*="categoryHeader"] {
    background-color: var(--gruv-bg-dark) !important;
}

div[class*="noAutocompleteResults-"] * {
    color: var(--gruv-fg-darker);
}
