discord.user.styl

/* ==UserStyle==
@name           Discord
@namespace      github.com/openstyles/stylus
@version        2.1.5
@description    A new userstyle
@author         Me
@preprocessor stylus


@var checkbox guilds-horizontal    "Guilds horizontal"       1
@var text     guilds-size          "Guilds size"             24px
@var checkbox sidebar-overlay      "Sidebar overlay"         1

@var checkbox role-background      "Colorful roles"          1
@var checkbox messages-alt         "Cozy chat alt. look"     1
@var text     avatar-size          "Avatar size"             var(--font-size)
@var text     avatar-spacing       "Avatar spacing"          1ch
@var text     avatar-border-radius "Avatar border radius"    6px

@var text     search-results-width "Search results width"    345px
==/UserStyle== */

@import url("https://codeberg.org/ridge/Discord-Adblock/raw/branch/main/discord-adblock.css");

// Variables
vendors = official;
$small-screen = 768px;
$select-shadow = inset 0 1px 2px rgba(0, 0, 0, 0.1);
$select-size = 16px;
$i = !important;

// Stylus
svar(var) {
	s('var(--%s)', var);
}

cond(n, yes, no) {
	(n == 0 ? no : yes) $i;
}

sel-cond(sel, pos) {
	pos ? s('%s-%s', sel, pos) : sel;
}

color-a(n, bright = true) {
	s = bright ? -2 : null;
	n = n > 6 ? n - 8 : n;

	s('hsla(var(--color%s-h),	var(--color-s%s),	var(--color-l%s), var(--bg-opacity))', n, s, s);
}

// Appearance
bg(n =) {
	background-color: s('var(--bg%s)', n) $i;

	if (n == -tr || n == -tr2 || n == -tr3) {
		backdrop-filter: var(--popup-filter) $i;
	}
}

fg(n =) {
	color: s('var(--fg%s)', n) $i;
}

bgc(n1 =, n2 =) {
	bg(n1);
	fg(n2);
}

hl() {
	background-color: var(--hl) $i;
	color: var(--hl-fg) $i;
}

accent() {
	background-color: var(--accent) $i;
	color: var(--accent-fg) $i;
}

clr(n) {
	color: s('var(--color%s)', n) $i;
}

lnh() {
	line-height: var(--line-height) $i;
}

pad(pos =, n = 1) {
	{sel-cond(padding, pos)}: \
		(n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
}

mar(pos =, n = 1) {
	{sel-cond(margin, pos)}: \
		(n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
}

shd(n) {
	box-shadow: cond(n, s('var(--shadow-%s)', n), none);
}

rad(n = 1) {
	border-radius: cond(n, var(--border-radius), 0);
}

brd(pos =, color = border) {
	if (color) {
		color = svar(color);
	}

	{sel-cond(border, pos)}: \
		(color == 0 ? none : pos == 0 ? none : var(--border-width) solid color) $i;
	if (!pos) {
		rad(pos);
	}
}

// Position
box(w, h = w) {
	width: w $i;
	height: h $i;
}

flex(display = flex, alignment = center, justification =) {
	display: display $i;
	align-items: alignment $i;
	justify-content: justification $i;
}

// Animation
anim(name =, func = ) {
	@media (prefers-reduced-motion: no-preference) {
		{name ? animation : transition}: name var(--trans-dur) func $i;
	}
}

dropfade() {
	anim(dropfade, cubic-bezier(0.2, 0.9, 0.6, 1));
}

// Focus
focus(p = focus) {
	anim();

	&:{p} {
		border-color: var(--hl) $i;
		box-shadow: var(--shadow-ins) var(--hl) $i;
		outline: none $i;
	}
}

header-focus(class = page-focus) {
	.{class} & {
		--bg2: var(--accent);
		--fg: var(--accent-fg);
		--border: var(--accent-border);
	}

	// Stylus is unable to recognise :where()
	:root:not(:-moz-window-inactive) & {
		--bg2: var(--accent);
		--fg: var(--accent-fg);
		--border: var(--accent-border);
	}
}

// Text
replace-text(content =, text-color = fg, pos = after) {
	color: transparent $i;
	letter-spacing: -9999px $i;

	if (content) { // Replace
		&::{pos} {
			content: content $i;
			letter-spacing: 0 $i;
			color: svar(text-color) $i;
		}
	} else { // Hide
		* {
			letter-spacing: 0 $i;
			color: svar(text-color) $i;
		}
	}
}

hide-chars(amount, pos, bg =) {
	margin-{pos}: s('-%sch', amount) $i;
	position: relative $i;

	element = pos == left ? before : after;
	&::{element} {
		content: '' $i;
		position: absolute $i;
		inset: 0;
		box(s('%sch', amount), calc(1em * var(--line-height)));
		bg(bg);
	}
}

// Normalisation
disabled() {
	&:disabled {
		opacity: 0.5 $i;
		cursor: not-allowed $i;
	}
}

normalise-select() {
	appearance: none $i;
	bgc(2);
	lnh();
	background-image:
		linear-gradient(55deg, var(--bg2) 43%, transparent 45%),
		linear-gradient(125deg, transparent 53%, var(--bg2) 55%),
		linear-gradient(180deg, var(--bg2) 30%, var(--fg) 30%) $i;
	background-size: 20px 20px $i;
	background-repeat: no-repeat $i;
	background-position: right 50% $i;
	pad();
	padding-right: calc(var(--pad) + 20px) $i;
	brd();
	focus();
	disabled();
}

normalise-input() {
	bgc(2);
	lnh();
	pad();
	brd();
	focus();
	disabled();

	&::placeholder {
		fg(2);
	}
}

normalise-button() {
	bgc(2);
	lnh();
	background-image: none $i;
	padding: var(--pad) calc(var(--pad) * 2) $i;
	brd();
	cursor: pointer $i;
	focus();
	disabled();
}

normalise-color() {
	bg(2);
	pad(0);
	brd();
	box($select-size);
	focus();
	disabled();

	&::-webkit-color-swatch {
		brd(0);
		// Prevent from making it look like a radio input
		border-radius: calc(var(--border-radius) * 0.33) $i;

		&-wrapper {
			pad(0);
		}
	}
}

normalise-checkbox(label = true) {
	if (label) {
		/label {
			lnh();
			flex();
			gap: 1ch $i;
		}
	}

	appearance: none $i;
	bg(2);
	brd();
	// Prevent from making it look like a radio input
	border-radius: calc(var(--border-radius) * 0.33) $i;
	box-shadow: $select-shadow $i;
	mar(0);
	position: relative $i;
	box($select-size);
	min-width: $select-size $i;
	focus();

	&::before,
	&::after {
		content: '';
		position: absolute $i;
		inset: 0;
		background-color: var(--hl) $i;
		transform-origin: 0 0 $i;
	}
	&:disabled {
		&::before,
		&::after {
			background-color: var(--fg2) $i;
		}
	}

	&::before {
		transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0) $i;
	}
	&:indeterminate::before {
		transform: rotate(0) translateY(37.5%) translateX(10%) scaleX(0.8) scaleY(0.25) $i;
		transition-duration: 33.3ms $i;
	}
	&::after {
		transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(0) $i;
	}

	&:checked {
		&::before {
			transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0.4) $i;
			transition-duration: 33.3ms $i;
		}
		&::after {
			transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(1.2) $i;
			transition-delay: 33.3ms $i;
			anim();
		}
	}
}

normalise-radio() {
	appearance: none $i;
	bg(2);
	brd();
	border-radius: 50% $i;
	box-shadow: $select-shadow $i;
	mar(0);
	position: relative $i;
	box($select-size);
	focus();

	&::before {
		content: '';
		position: absolute $i;
		inset: $select-size / 5;
		background-color: var(--hl) $i;
		border-radius: 50% $i;
		transition: transform var(--trans-dur) linear $i;
		transform: scale(0) $i;
	}
	&:disabled::before {
		background-color: var(--fg2) $i;
	}
	&:checked::before {
		transition-timing-function: cubic-bezier(0, 0, 0.3, 1.5) $i;
		transform: scale(1) $i;
		anim();
	}
}

normalise-header(first = true) {
	fg();
	lnh();
	text-transform: uppercase $i;
	letter-spacing: 1px $i;
	pad(0);
	pad(bottom);
	brd(bottom);
	mar(0);
	mar(bottom);
	if (!first) {
		margin-top: calc(var(--pad) * 2) $i;
	}
}

@-moz-document domain("discord.com") {
	/**
 	 * Variables
	**/
	.theme-light,
	.theme-dark {
		// Settings
		settings = \
			'guilds-size',
			'emoji-size',
			'avatar-size',
			'avatar-spacing',
			'avatar-border-radius',
			'search-results-width'

		for i in settings {
			\-\-{i}: convert(i);
		}

		// Background
		--background-primary: var(--bg) $i;
		--background-secondary: var(--bg2) $i;
		--background-secondary-alt: var(--bg3) $i;
		--background-tertiary: var(--bg4) $i;
		--background-accent: var(--fg) $i;
		--background-floating: var(--bg) $i;
		--background-nested-floating: var(--bg) $i;
		--background-code: var(--bg2) $i;

		--background-base-low: var(--bg3) $i;
		--background-base-lower: var(--bg) $i;
		--background-base-lowest: var(--bg2) $i;

		--background-surface-high: var(--bg2) $i;
		--background-surface-higher: var(--bg2) $i;
		--background-surface-highest: var(--bg2) $i;

		--background-modifier-hover: var(--bg3) $i;
		--background-modifier-active: var(--bg4) $i;
		--background-modifier-selected: var(--hl) $i;
		--background-modifier-accent: var(--border) $i;

		--modal-background: var(--bg) $i;
		--modal-footer-background: var(--bg2) $i;

		--input-background: var(--bg2) $i;

		// Text
		--text-brand: var(--color4) $i;

		colors = {
			default: fg,
			link: fg-link,
			muted: fg2,
			primary: fg,
			secondary: fg2,
			tertiary: fg2,
		}
		for k, v in colors {
			clr = s('var(--%s)', v);

			--icon-{k}: clr $i;
			--text-{k}: clr $i;
		}

		--interactive-normal: var(--fg2) $i;
		--interactive-muted: var(--fg2) $i;
		--interactive-active: var(--hl-fg) $i;
		--interactive-hover: var(--fg) $i;

		--header-primary: var(--fg) $i;
		--header-secondary: var(--fg2) $i;
		--channels-default: var(--fg2) $i;

		--channel-text-area-placeholder: var(--fg2) $i;
		--chat-text-muted: var(--fg2) $i;
		--input-placeholder-text: var(--fg2) $i;
		--textbox-markdown-syntax: var(--fg2) $i;

		// Info/status
		colors = {
			danger:   9,
			positive: 10,
			warning:  11,
			help:     12
		}
		for k, v in colors {
			clr = s('var(--color%s)', v - 8) $i;

			--text-{k}: clr $i;

			--info-{k}-background: color-a(v) $i;
			--info-{k}-foreground: var(--fg) $i;
			--info-{k}-text: var(--fg) $i;

			--status-{k}-background: color-a(v) $i;
			--status-{k}-text: var(--fg) $i;
			--status-{k}: clr $i;
		}

		colors = {
			dnd:    1,
			online: 2,
			idle:   3,
		}
		for k, v in colors {
			--status-{k}: s('var(--color%s)', v) $i;
		}

		// Shadows
		--elevation-stroke: var(--shadow-ins) var(--border) $i;
		--elevation-low: var(--shadow-low) $i;
		--elevation-medium: var(--shadow-mid) $i;
		--elevation-high: var(--shadow-big) $i;
		--guild-header-text-shadow: none $i;

		--legacy-elevation-low: var(--elevation-low) $i;
		--legacy-elevation-high: var(--elevation-high) $i;
		--legacy-elevation-border: var(--elevation-stroke) $i;

		$shadows = {
			border: stroke,
			ledge: low,
			low: low,
			low-active: low,
			low-hover: low,
			medium: medium,
			high: high,
			top-low: low,
			top-high: high,
			top-ledge: stroke,
		}
		for name, type in shadows {
			--shadow-{name}: s('var(--elevation-%s)', type) $i;
			--shadow-{name}-filter: s('drop-shadow(var(--elevation-%s))', type) $i;
		}

		// Scrollbar
		for i in auto thin {
			--scrollbar-{i}-thumb: var(--fg2) $i;
			--scrollbar-{i}-track: var(--bg2) $i;
		}

		// Other
		--focus-primary: var(--hl) $i;

		--chat-avatar-size: var(--avatar-size) $i;

		--custom-app-top-bar-height: 0px $i;
		--custom-channel-header-height: var(--header-h) $i;
		--custom-channel-textarea-text-area-height: unset $i;

		--border-faint: var(--border) $i;
		--border-strong: var(--border) $i;
		--border-subtle: var(--border) $i;

		--reserve-fg: var(--fg);
		--reserve-pad: var(--pad);

		for vec in range(4, 16, 2) range(16, 32, 4) range(32, 48, 8) range(96, 192, 32) {
			for i in vec {
				--space-{i}: var(--pad) $i;
			}
		}
		for i in xxs xs sm md lg xl xxl {
			--radius-{i}: var(--border-radius) $i;
			--space-{i}: var(--pad) $i;
		}
	}

	/**
	 * Global
	**/
	// Scrollbar
	::-webkit-scrollbar {
		box(var(--scrollbar-width));

		&-thumb,
		&-track {
			brd(0);
			mar(0);
		}
	}

	// Icons
	.panels > .container > .flex > .button {
		box(var(--font-size));

		&:hover {
			background-color: transparent;
		}
	}
	.toolbar {
		margin-right: calc(var(--font-size) + var(--pad)) $i;

		[role="button"] {
			mar(0);
			box(unset);
		}
		[aria-label="More"] {
			order: 1;
		}
	}
	// Hidden at all times, as Font Awesome doesn't have a "gif" icon.
	[aria-label="Open GIF picker"] > .contents {
		display: none $i;
	}
	.innerButton > div { // send message
		fg(2);

		&:hover {
			fg();
		}
	}

	// Headings
	[data-text-variant] {
		lnh();
		flex-grow: 1 $i;
	}
	.eyebrow {
		normalise-header();
		flex-grow: 1;
	}

	// Inputs
	._0f0849b61557225e-container {
		outline: none $i;
		pad(0);
		brd(0);
	}
	._0f0849b61557225e-icon {
		display: none $i;
	}
	._0ed4fc708cdbac0d-input {
		normalise-input();

		._0f0849b61557225e-container[data-disabled="true"] &,
		._0f0849b61557225e-container[data-read-only="true"] & {
			opacity: 0.5 $i;
			cursor: not-allowed $i;
		}
	}

	// Buttons
	button[class*="lookOutlined_"],
	button[class*="lookFilled_"],
	button[class*="lookLink_"] {
		normalise-button();
		box(unset);
		min-width: unset $i;
		min-height: unset $i;

		colors = {
			Red:   9,
			Green: 10,
			Brand: 12,
		}
		for k, v in colors {
			&{s('[class*="color%s"]', unquote(k))} {
				background-color: color-a(v) $i;
				border-color: s('var(--color%s)', v) $i;
			}
		}
	}
	.a22cb0c66246f5d3-button {
		normalise-button();

		colors = {
			critical-primary:   9,
			critical-secondary: 9,
			primary:            12,
		};
		for k, v in colors {
			&{s('.%s_a22cb0', unquote(k))} {
				background-color: color-a(v) $i;
				border-color: s('var(--color%s)', v) $i;
			}
		}

		&.a22cb0c66246f5d3-fullWidth {
			flex-grow: unset $i;
			width: unset $i;
		}
		&.a22cb0c66246f5d3-icon-only {
			background-color: transparent $i;
			pad(0);
			brd(0);
		}

		.a22cb0c66246f5d3-buttonChildrenWrapper {
			pad(0);
			min-width: unset $i;
			min-height: unset $i;
		}
		.a22cb0c66246f5d3-icon {
			box(1lh);

			&:not(:hover) {
				fg(2);
			}
		}
	}
	[role="button"][aria-haspopup] {
		normalise-select();
	}
	.a16aea1526925c2c-select {
		pad(0);
		min-height: unset $i;

		.a16aea1526925c2c-icons {
			display: none $i;
		}
	}

	// Tabs
	[role="tablist"] {
		pad(0);
		height: unset;
		gap: 0;

		.separator {
			display: none;
		}
		.eyebrow {
			margin-top: calc(var(--pad) * 2) $i;
		}
	}
	[role="tab"] {
		background-color: transparent $i;
		fg(2);
		lnh();
		pad();
		brd(0);
		mar(0);
		box(unset);
		min-width: unset $i;

		&:hover {
			fg();
		}
		&[aria-selected="true"] {
			hl();
		}

		&::after {
			display: none $i;
		}
	}
	[role="tabpanel"] {
		.divider,
		.sectionTitle {
			display: none;
		}
	}

	// Options
	[role="option"] {
		pad();
		brd(0);
		mar(0);
		height: unset;
		gap: 1ch;

		&:hover {
			hl();

			* {
				color: inherit $i;
			}
		}

		span,
		.title {
			mar(0);
		}
	}

	// Text
	.markup {
		lnh();

		pre {
			mar(0);
		}
		code.inline {
			lnh();
			border-radius: var(--border-radius);
		}
	}
	.emoji {
		box(var(--font-size));
		min-height: unset $i;
	}

	// Custom avatar rounding
	.chatContent .avatar {
		border-radius: var(--avatar-border-radius) $i;
	}
	.mask > circle {
		fill: var(--bg3);
	}

	/**
	 * Hide elements
	**/
	// I. Buttons
	#message-actions-tts,
	#user-context-call,
	#user-context-note,
	#user-context-message-user,
	#user-context-invite-to-server,
	#guild-header-popout-invite-people,
	#gif-picker-tab-panel .backButton,
	[href="https://support.discord.com"],
	[aria-label="Notification Settings"],
	[aria-label="Threads"][role="button"],
	[aria-label="Show User Profile (Unavailable)"],
	#channels .children > :not(.mentionsBadge),
	#messagesNavigationDescription + [id^="chat-messages"] + .containerExpanded,
	#search-results .buttonsContainer,
	.sidebar .positionedContainer, // Unread bar
	.privateChannels > .searchBar,
	.peopleColumn > .searchBar,
	.peopleListItem .actions,
	.sidebar .actionButtons,
	.guildIconV2Container, // Sidebar boost status
	.welcomeCTA,

	// III. Made-obsolete gradients/shadows
	.children::after,
	.tabBody::before,
	.content[style="position: relative;"] > div > ::before,

	// IV. Unread indicators
	.sidebar .container:is(.top, .bottom),
	.unreadMentionsIndicatorBottom,
	.unreadMentionsIndicatorTop,

	// V. Other elements
	.guilds > .tree > .footer,
	.guilds > .tree > div > .listItem:nth-last-child(2),
	.guilds > .tree > div > .listItem:nth-last-child(3),
	.protip,
	.socialLinks,
	.typingDots .dots,
	.emptyChannelIcon,
	.threadSuggestionBar,
	[data-list-id="chat-messages"] > [class^="groupStart"], // blocked
	.userPopoutInner .lastSection,
	[class*="cozy_"] .repliedMessage > .username,	.roleIcon,

	.communityInfoContainer,
	.guildIconContainer,
	.nowPlayingColumn,
	.channelNotice
	{
			display: none $i;
	}

	// GIFs / emoji tabs
	.resizeHandle + div {
		grid-template-rows: unset;

		& > nav {
			display: none;
		}
	}

	// Username on sidebar
	.panels {
		.nameTag {
			display: none;
		}

		& > .container {
			justify-content: space-between
		}
	}
	.withTagAsButton,
	.withTagless {
		min-width: unset;
	}

	// Banner
	.sidebar {
		.animatedContainer,
		.f37cb1984c371ee5-headerEllipseForeground {
			display: none;
		}
		.headerContent {
			filter: none;
			color: var(--header-primary) $i;
		}
		[style="height: 84px;"] {
			height: 0 $i;
		}
	}

	// V. Fixes
	.role {
		fg();
	}

	/**
	 * Sidebar
	**/
	$sidebar = {
		channel:          'li'
		channel-selected: '[class*="modeSelected_"]'
		channel-unread:   '[class*="modeUnreadImportant_"]'
		channel-category: '._29444ba32c7fbeab-wrapperCommon'
		channel-private-selected: '[class*="selected_"]'
	}

	#-sidebar-separator {
		top: var(--header-h);

		if (!guilds-horizontal) {
			top: 0;
			margin-left: calc(var(--guilds-size) + var(--pad) * 2);

			// Settings opened
			#app-mount:has(> [tabindex="0"]) ~ & {
				margin-left: 0;
			}
		}
	}
	._5e434347c823b592-sidebar {
		// Almost no animation below that - lags too much
		--trans-dur: 300ms;
		brd(right);
		width: var(--sidebar-width);

		@media (max-width: $small-screen) {
			width: 0;
			min-width: 0;
			anim();

			&:hover {
				width: var(--sidebar-width) $i;
			}

			if (sidebar-overlay) {
				background-color: var(--bg-tr) $i;
				position: absolute;
				top: var(--header-h);
				bottom: 0;
				z-index: 101;

				& > * {
					background-color: transparent $i;
				}
			}
		}

		.f37cb1984c371ee5-container {
			.f37cb1984c371ee5-guildDropdown {
				normalise-header(false);
				background-color: transparent $i;
				border-radius: 0 $i;
				height: unset $i;
				flex-grow: 1 $i;
			}
			.f37cb1984c371ee5-header {
				pad(0);
				brd(0);
				mar(inline);
			}
			.f37cb1984c371ee5-headerContent {
				gap: 0 $i;
			}
			.f37cb1984c371ee5-headerChildren,
			.f37cb1984c371ee5-headerGlass,
			.f37cb1984c371ee5-inviteButton {
				display: none $i;
			}
		}
	}
	.sidebarList {
		brd(0);
		width: var(--sidebar-width) $i;
	}

	// Channels
	._2637a2609f343032-container {
		padding-bottom: calc(
			var(--header-h) + var(--custom-app-panels-height)
		);
		mar(0);
	}
	#channels {
		mar(0);

		&::-webkit-scrollbar,
		.iconContainer,
		.unread,

		// "Browse Channels"
		[style="height: 12px;"],
		& > ul > [role="button"],
		.sectionDivider {
			display: none;
		}

		// Channel
		{$sidebar[channel]} {
			pad(0);

			& > div {
				pad(0);
				height: unset;

				&:not([class]) { // voice
					& > div {
						pad(0);
						mar(0);
					}
				}

				&:not({$sidebar[channel-selected]}):hover .link {
					background-color: transparent $i;
				}
			}
		}
		// Special case for threads
		& > ul > li > div {
			mar(0);
		}
		{$sidebar[channel-selected]} {
			.link {
				cursor: default;
			}
			.name {
				color: var(--hl-fg) $i;
			}
		}
		{$sidebar[channel-unread]} {
			.name {
				color: var(--hl);
			}
		}
		.link {
			color: inherit $i;
			pad();
			brd(0);
		}

		// Voice
		.draggable {
			&,
			& > div {
				height: unset;
			}
			.content {
				brd(0);
				mar(0);
			}
			& > :not([class*="selected_"]) > .content {
				background-color: transparent;
			}
			.avatar {
				mar();
			}
		}

		// Category
		.mainContent {
			normalise-header(false);
			mar(left);
			mar(right);
			flex-direction: row-reverse;
			justify-content: start $i;

			.icon {
				position: unset;
				box(var(--font-size));
			}
		}
	}

	.privateChannels {
		& > :last-child::-webkit-scrollbar,
		[style="height: 8px;"],
		&HeaderContainer {
			display: none;
		}

		.channel {
			pad(0);
			brd(0);
			mar(0);
			max-width: unset;

			& > div {
				background-color: transparent $i;

				&:hover {
					fg();
				}

				&{$sidebar[channel-private-selected]} {
					hl();
				}
			}
		}
		._99e7cad8d4c55236-scroller {
			margin-bottom: var(--custom-app-panels-height) $i;
		}
		.link[aria-label^="unread"] {
			color: var(--hl) $i;
		}
		._20a53846fe2e8513-layout:not(._972a0d22c8afa7f0-avatarWithText) {
			pad(block);
			height: unset $i;
		}
		.avatar {
			mar(right);
		}
	}

	.panels {
		--custom-panels-spacing: 0px $i;
		brd(0);
		brd(top);
		position: fixed $i;
		width: var(--sidebar-width) $i;

		._37e49614b9f110a9-avatarWrapper {
			pad(0);
			mar(0);
		}
		& > .container {
			pad();
			mar(0);
			height: unset;
		}
	}

	// Servers sidebar
	$guilds = {
		container:      '.ef3116c2da186559-scroller'
		guild:          '.pill:not(:empty) + div > [data-dnd-name]'
		guild-selected: '[class*="selected_"]'
	}

	.guilds {
		--guildbar-avatar-size: var(--guilds-size);
		bg(2);
		mask: none $i;
		header-focus(app-focused);
		mar(0);
		width: calc(var(--guilds-size) + var(--pad) * 2) $i;
		brd(right);

		{$guilds[container]} {
			padding-top: calc(var(--pad) / 2) $i;
			scrollbar-width: none $i;

			// Scrollbar on hover
			@supports not (-moz-appearance: none) {
				&:hover > div {
					margin-right: -1px;
				}
			}

			&::-webkit-scrollbar {
				width: 1px $i;

				&-button {
					display: none;
				}
				&-thumb {
					background-color: var(--fg) $i;
				}
			}
			&:not(:hover)::-webkit-scrollbar {
				display: none $i;
			}
		}

		.listItem {
			width: 100% $i;
		}
		// DMs
		.dbd2630aec71879b-stack:nth-child(2) {
			pad(0);

			& > div {
				height: unset $i;
			}
		}
		.pill {
			display: none;
		}
		.cc5dd25190031396-lowerBadge,
		.e5445cbd3ad226f2-blobContainer {
			&::before {
				$w = calc(var(--guilds-size) + var(--pad));
				$h = calc(100% + var(--pad) * 2 + 4px);
				$left-pad-mult = guilds-horizontal ? -0.5 : -1;
				$top-pixels = guilds-horizontal ? 2px : -4px;

				content: '';
				position: absolute;
				inset: 0;
				// God knows why it's less by 4 pixels
				left: s('calc(var(--pad) * %s)', $left-pad-mult);
				top: s('calc(var(--pad) * -1 - %s)', $top-pixels);
				box(
					guilds-horizontal ? $w : $h,
					guilds-horizontal ? $h : $w
				);
				background-color: var(--guild-bg);
			}
		}
		.cc5dd25190031396-lowerBadge {
			--guild-bg: var(--color1);
			position: unset $i;

			._2b1f52e43a8f1c02-numberBadge {
				display: none $i;
			}
		}
		.e5445cbd3ad226f2-blobContainer {
			position: relative $i;

			&:hover {
				--guild-bg: var(--fg);
			}
			&.e5445cbd3ad226f2-selected {
				--guild-bg: var(--hl);
			}
		}
		.cc5dd25190031396-wrapper {
			box(var(--guilds-size));

			.cc5dd25190031396-svg {
				z-index: 3;

				& > mask {
					display: none;
				}
			}
		}

		// Server folders
		/[aria-label="Servers"] > .wrapper {
			width: unset;

			& > span {
				display: none;
			}
		}
		[id^="folder-items"] {
			margin-bottom: calc(var(--pad) / 2) $i;
			brd(bottom);
			height: unset $i;
		}
	}
	.guildSeparator {
		background-color: var(--border) $i;
		box(100%, var(--border-width));

		.listItem:has(> &) {
			margin-block: calc(var(--pad) * -0.5) $i;
		}
	}
	if (guilds-horizontal) {
		@media (min-width: $small-screen) {
			.guilds {
				--guilds-size: var(--font-size);
				position: fixed;
				top: var(--header-h);
				bottom: unset;
				z-index: 1;
				width: var(--header-h) $i;
				height: calc(var(--sidebar-width) + var(--border-width)) $i;
				transform-origin: top left;
				transform: rotate(-90deg);

				{$guilds[container]} {
					padding-top: calc(var(--pad) / 2) $i;
					brd(left);
					brd(right, 0);
					brd(bottom);
				}
				.listItem,
				.guildSeparator {
					transform: rotate(90deg);
				}
			}
			.sidebar {
				position: relative;
				top: var(--header-h);
				height: calc(100% - var(--header-h));
			}
		}
	}

	/**
	 * Header
	**/
	$chat = {
		title: 'section.container.themed'
	}

	{$chat[title]} {
		bg(2);
		header-focus(app-focused);
		lnh();
		pad();
		brd(bottom);

		.title:not(.cursorPointer),
		.children .iconWrapper,
		.iconContainer,
		.nicknames,
		.akaBadge,
		.avatar,
		.divider,
		.dot,
		.caret {
			display: none;
		}
		.title {
			lnh();

			&.defaultColor:not(:hover)::after {
				fg(2);
			}
			&.cursorPointer {
				replace-text('Direct Messages');
			}
			&.parentChannelName {
				replace-text('Thread');
			}

			&Wrapper {
				mar(0);
			}
		}
		.topic {
			lnh();
			mar(0);

			&:hover {
				fg();
			}
		}
		.icon {
			box(var(--font-size));

			&:hover {
				fg();
			}
		}
	}
	// Move inbox out of the shitty titlebar
	.c38106a3f0c3ca76-bar {
		z-index: 101 $i;

		.c38106a3f0c3ca76-title {
			display: none $i;
		}
		// TODO: unify with toolbar impl
		.c99c29809d200a61-clickable {
			pad(0);
			mar(0);
			position: fixed $i;
			top: calc(var(--pad) * var(--line-height)) $i;
			right: var(--pad) $i;
			box(var(--font-size));
		}
	}

	// Bar
	.bar {
		&Base {
			background-color: color-a(4);
			backdrop-filter: var(--popup-filter);
			opacity: 1;
			fg();
			padding: var(--pad) 0 $i;
			brd(,color4);
			height: unset;
			min-height: unset;
			left: var(--body-pad) $i;
			right: var(--body-pad) $i;

			&:first-child {
				brd(top, 0);
				border-radius: 0 0 var(--border-radius) var(--border-radius) $i;
			}
			&:last-child {
				brd(bottom, 0);
				border-radius: var(--border-radius) var(--border-radius) 0 0 $i;
			}
		}
		&Button {
			&Base {
				background-color: transparent $i;
				line-height: unset;
				padding: 0 var(--pad) $i;
				height: unset;
			}
			&Icon {
				display: none;
			}
		}
	}
	.messagesErrorBar {
		background-color: color-a(1);
		brd(,color1);
	}

	/**
	 * Popups
	**/
	// Global
	.layerContainer > div {
		dropfade();
	}
	._40128e129e4f87de-scrim {
		opacity: 0 $i;
	}
	.contentWrapper, // emojis/gifs
	.messagesPopoutWrap // pinned/mentions
	{
		brd(0);
		shd(0);
	}
	[role="listbox"] {
		bg();
		brd();
		shd(big);
	}

	// Generic
	.root.fullscreenOnMobile {
		brd();
		shd(big);

		.header {
			bg(2);
			pad();
			brd(bottom);
		}
		.content {
			pad();

			& > [aria-hidden] { // lmao
				display: none;
			}
		}
		.message {
			bg(2);
			padding-top: calc(var(--pad) / 2) $i;
			brd();
		}
		.footer {
			pad();
			brd(top);
			shd(0);
		}
	}

	// Generic (mana)
	._8a031a135bfcb9ba-container {
		bg();
		pad(0);
		brd();

		._8a031a135bfcb9ba-actionBar {
			bg(2);
			brd(top);

			button {
				--bg2: var(--bg);
			}
		}
		._8a031a135bfcb9ba-actionBarTrailing {
			& > div {
				justify-content: end $i;
			}
		}
		._8a031a135bfcb9ba-body {
			overflow: auto $i;
		}
		._8a031a135bfcb9ba-bodyInner {
			pad();
		}
		._8a031a135bfcb9ba-header {
			pad(0);
		}
		._8a031a135bfcb9ba-headerLayout {
			bg(2);
			pad();
			brd(bottom);
		}
		._8a031a135bfcb9ba-headerSubtitle {
			mar(inline);
		}
		._8a031a135bfcb9ba-headerTrailing {
			mar(0);
		}
		// ? lol
		._8a031a135bfcb9ba-bodySpacerBottom,
		._8a031a135bfcb9ba-bodySpacerTop {
			display: none $i;
		}
	}

	// Context menu
	.submenuPaddingContainer {
		pad(0);
	}
	.menu {
		bg();
		brd();

		.userPopoutOverlayBackground > & {
			bg(2);
			brd(0);
			brd(top);
			max-width: unset;
		}

		& > .scroller {
			pad(0);

			& > .wrapper { // reactions
				gap: 0 $i;
				pad(0);
				brd(bottom);

				[role="menuitem"] {
					pad(0);

					& > div {
						bg(2);
						pad();
						brd(0);
						brd(right);

						&:hover {
							hl();
						}
					}
				}
			}
			& > [aria-hidden] { // lmao
				display: none;
			}
		}
		.icon {
			box(var(--font-size));

			&Container {
				mar(left, 0);
				margin-right: 1ch;
				position: unset;
				box(var(--font-size));

				&Left {
					& > img,
					& > .icon {
						position: absolute;
						left: var(--pad);
					}

					// kill yourself
					/#account-edit-custom-status .label,
					~/ [role="menuitem"] > .label:only-child,
					& + .label:last-child {
						margin-left: calc(var(--font-size) + 1ch);
					}
				}
			}
		}

		// Emojis
		.image {
			box(var(--font-size));

			&Container {
				mar(left, 0);
				mar(right);
			}
		}

		// Arrow
		.hintContainer,
		.caret {
			color: inherit;
			position: absolute;
			right: var(--pad);
			box(var(--font-size));
		}
		.mainStatusIcon {
			mar(0);
		}
		.separator {
			brd(bottom);
			mar(0);
		}
	}
	[role^="menuitem"] {
		lnh();
		pad();
		brd(0);
		mar(0);
		min-height: unset;
		flex-direction: row-reverse;

		&[aria-expanded="true"],
		&:hover {
			--header-primary: var(--hl-fg) $i;
			hl();
		}
		&[aria-haspopup] {
			padding-right: calc(var(--pad) * 2 + var(--font-size)) $i;
		}
	}

	// User
	$user-info {
		mar(0);

		& > [dir] {
			pad();
			brd(top);
			mar(top);
			shd(0);

			& > :first-child {
				margin-top: calc(var(--pad) * -2);
			}
		}
		.divider {
			display: none;
		}
		.section {
			pad(0);
		}
		.usernameSection {
			pad();
			pad(bottom, 0);
		}
		.userTag {
			mar(bottom);
		}
		.customStatus {
			lnh();

			&Section {
				mar(left);
			}
		}
		.gameIcon {
			border-radius: var(--border-radius);
			box(calc(var(--font-size) * var(--line-height) * 2));
		}
		.contentGameImageUserPopoutV2 {
			mar(left);
		}
		.note {
			mar(0);
		}
	}

	:where(.c0bea05627c5dc35-outer).user-profile-popout {
		bg();
		brd();
		shd(big);
	}
	.roundedBanner,
	.overlayBackground {
		brd(0);
	}
	.userPopout {
		&Outer {
			brd();
		}
		&OverlayBackground {
			@extend $user-info;
			margin-top: calc(var(--pad) * 4 + 11px) $i;

			.eyebrow {
				margin-top: calc(var(--pad) * 2) $i;
			}
			.headerText { // game header
				normalise-header(false);
			}
		}
	}
	.userProfile {
		/[class*="userProfileOuter_"] {
			border-radius: var(--border-radius);

			.tabBarContainer {
				bg(2);
				brd(top);
			}
			.topSection {
				margin-bottom: calc(52px + var(--pad) * 2);

				.header {
					pad(0);
					brd(0);

					&Top {
						top: calc(var(--pad) * 2);
						right: calc(var(--pad) * 2);
					}
				}
			}
		}
		&ModalOverlayBackground {
			brd(top);
			mar(0);

			& > .body {
				@extend $user-info;
				brd(0);
				mar(0);

				& > .container {
					pad();
				}
				& > .scrollerBase {
					&,
					&:not(.infoScroller) > :first-child {
						mar(top, 0);
					}
				}
				h1 {
					normalise-header(false);
				}
			}
		}
	}
	.accountProfilePopoutWrapper {
		left: 0;

		h3 {
			normalise-header(false);
		}
	}
	.userInfo {
		&Section {
			pad(0);

			& + & {
				pad(top);
				brd(top);
				mar(top);
			}
		}
		&Text {
			lnh();
			mar(0);
		}
	}
	.profileBadge {
		box(var(--font-size));

		/.badgeList,
		&s {
			pad();
			brd();
			gap: 1ch;
			position: absolute;
			top: var(--pad);
			right: var(--pad);
			z-index: 1;
			min-height: unset;

			&:empty {
				display: none;
			}
		}
	}
	.role {
		pad();
		brd(0);
		border-radius: var(--border-radius) $i;
		mar(0);
		gap: 1ch;
		height: unset;

		&s {
			gap: var(--pad);
		}
		&Circle,
		&Name {
			mar(0);
		}

		// Stolen from gk
		if (role-background) {
			background-color: transparent;
			overflow: hidden;

			&RemoveIcon {
				position: absolute;
			}
			&Circle::after {
				content: '';
				position: relative;
				display: block;
				right: -100px;
				min-width: 230px;
				height: 69px;
				background-color: inherit;
				opacity: var(--bg-opacity);
				pointer-events: none;
			}
		}
	}
	.connectedAccount {
		gap: var(--pad);

		&sColumn {
			width: calc(50% - var(--pad)) $i;
			gap: var(--pad);
		}
		&Container {
			normalise-button();
			mar(0);
			position: relative;
			focus(focus-within);

			.anchor {
				position: absolute;
				inset: 0;
			}
		}
		&NameText {
			fg();
		}
		&Verified,
		&Open {
			~/ .textXsNormal,
			~/Children,
			&Icon {
				display: none;
			}
		}
	}
	.additionalActionsIcon {
		normalise-button();
		mar(left);
		box(var(--font-size));
	}

	// Message search
	[role="listbox"][style="width: 320px;"] {
		margin-top: calc(var(--pad) * -1);
		height: min-content;
		max-height: 75vh;
		overflow-y: scroll;

		& > ul {
			pad(0);

			&:first-child {
				margin-top: calc(var(--pad) * -1);
			}

			&::before {
				display: none;
			}
		}
		.header {
			normalise-header(false);
			letter-spacing: inherit;
			mar(left);
			mar(right);
		}
		.option {
			&::after {
				display: none;
			}

			&.user {
				display: grid;
				grid-template-columns: var(--font-size) repeat(2, 1fr);

				.filter {
					display: none;
				}
			}

			[aria-labelledby="FILTER_IN-header"] > ^[1..-1] { // channel
				.resultChannel {
					display: grid;
					grid-template-columns: var(--font-size) repeat(2, 1fr);
					flex-grow: 1;
					gap: 1ch;

					strong {
						fg();
					}
				}
				.filter {
					display: none;
				}
			}

			.nonText {
				&::before,
				&::after {
					content: '"';
				}
			}
		}
		.queryContainer,
		.plusIcon {
			display: none;
		}
		.display {
			&Avatar {
				box(var(--font-size));
			}
			&Username {
				fg(2);
			}
		}
	}

	// Autocomplete
	.autocomplete {
		bg();
		brd(0);
		shd(big);
		inset-inline: 0 $i;
		bottom: calc(100% + var(--pad)) $i;
		dropfade();

		&Row {
			lnh();
			pad(0);

			&[aria-selected="true"],
			&:hover {
				hl();

				.autocompleteRowContentSecondary,
				span {
					color: inherit $i;
				}
			}

			&Content {
				color: inherit;
				pad();
				margin-left: calc(24px + 1ch);
				gap: 1ch;

				&Primary {
					width: 50%;
				}
				&Secondary {
					text-align: left;
					mar(0);
					width: 50%;
				}
			}
			&Icon {
				mar(right);
				position: absolute;
				left: var(--pad);
			}

			& > .base {
				background-color: inherit $i;
			}
			.emojiImage {
				box(24px);
			}
		}

		.scrollerBase,
		.base {
			pad(0);
		}
		.divider {
			pad(0);

			&::after {
				height: var(--border-width);
			}
		}
	}
	._13533e3c5791980f-autocompleteRowHeading {
		fg();
	}
	[data-list-id="channel-autocomplete"] > .base {
		display: none;
	}

	// Quick switcher
	$qs = {
		container: '[aria-label="Results"]'
	}

	.quickswitcher {
		pad(0);
		brd();
		shd(big);
		dropfade();

		& > :last-child { // protip
			display: none;
		}
		.input {
			--bg2: var(--bg);
			normalise-input();
			mar();
			height: unset;
		}
		{$qs[container]} {
			bg();
			brd(top);
			border-radius: 0 0 var(--border-radius) var(--border-radius);
			mar(0);
		}
		.content {
			lnh();
			height: auto $i;

			&Default {
				pad(0);
			}
		}
		.header {
			normalise-header(false);
			mar(left);
			mar(right);
			width: 100%;
		}
		.result {
			border-radius: 0;
			height: unset;

			&[aria-selected="true"] {
				hl();

				* {
					color: var(--hl-fg);
				}
			}

			& > .content {
				lnh();
				pad();
				height: unset;
				gap: 1ch;
			}
			.icon {
				color: inherit;

				&Container {
					mar(0);
					box(var(--font-size));
				}
			}
			.note {
				text-transform: unset;
				mar(0);
			}
			.miscContainer {
				opacity: 1;
			}
		}
	}

	// Pinned messages & recent mentions
	.fc561d3c125f6a2f-container {
		brd();
		shd(big);
	}
	.messagesPopout {
		pad();

		&Wrap {
			bg();

			& > .header {
				bg(2);
				pad();
				brd(bottom);
				shd(0);
				height: unset;
				min-height: unset;
				display: flex;

				.button {
					--bg2: var(--bg);
					--pad: calc(var(--reserve-pad) / 2);
					normalise-button();
					box(unset);
					min-width: unset;
					min-height: unset;
				}
			}
			.channelHeader {
				bg(3);
				pad();
				brd();
				brd(bottom, 0);
				height: unset;
			}
		}
	}
	.ab66419eae73260f-header {
		pad(0);
		brd(bottom);
	}
	.ab66419eae73260f-headerTabs {
		mar(0);
	}
	.ab66419eae73260f-headerTitle {
		display: none;
	}
	.ab66419eae73260f-tabBar {
		brd(0);
		mar(0);
	}

	/**
	 * Settings
	**/
	._5a8382cf5c9d77df-labelContainer {
		._5a8382cf5c9d77df-description {
			fg(2);
		}
		._5a8382cf5c9d77df-label {
			normalise-header(false);
		}
	}

	/**
	 * Chat
	**/
	.f75fb00fb7356cbe-chat {
		brd(0);
	}
	._36d072eab2b2e737-chatGradientBase {
		display: none $i;
	}
	.scroller {
		&Inner {
			--alt-bg: messages-alt ? var(--bg2) : var(--bg);
			--compact-timestamp-width: 10ch;
			--compact-username-width: 12ch;
			padding-left: var(--body-pad);
			padding-right: var(--body-pad);

			@supports not (-moz-appearance: none) {
				padding-right: calc(var(--body-pad) - var(--scrollbar-width));
			}
		}
		&Spacer {
			height: var(--pad);
		}
	}

	// Messages
	[class*="message_"] {
		pad(0);
		mar(0);
		min-height: unset $i;

		&::before,
		&::after {
			display: none;
		}

		&[class*="compact_"] {
			--font-normal: var(--font-code); // for proper aligning
			--alt-bg: var(--bg2);
			--message-actions-pos-top: calc(var(--line-height) * 1px);

			& > .contents {
				text-indent: calc(
					(var(--compact-timestamp-width) + var(--compact-username-width)) \
					* -1 - 3ch
				);
				pad(0);
				mar(0);
			}
			& > .container {
				padding-left: calc(
					var(--compact-timestamp-width) + var(--compact-username-width) \
					+ 4ch
				) $i;
			}
			.timestamp .separator {
				fg(2);
				opacity: 1;
				position: unset;
				display: unset;
			}
			&:not([class*="groupStart_"]) .username {
				display: none;
			}

			// Align usernames IRC-style
			& > .contents {
				display: flex;
				gap: 1ch;
			}
			.header {
				text-indent: 0;
				width: calc(
					var(--compact-timestamp-width) + var(--compact-username-width) \
					+ 3ch
				);
				display: inline-flex;
				flex-shrink: 0;

				&Text {
					white-space: nowrap;
					text-align: right;
					display: flex;
					flex-grow: 1;
				}

				.username {
					text-overflow: ellipsis;
					width: 0;
					flex-grow: 1;
				}
			}
			.repliedMessage {
				padding-left: 1ch;
				margin-left: var(--compact-timestamp-width);
			}
		}

		&[class*="cozy_"] {
			mar(top);

			& > .contents > .messageContent,
			& > .container {
				mar(0);
			}
			.header {
				pad();
				padding-left: calc(
					var(--pad) + var(--avatar-spacing) \
					+ var(--avatar-size) * var(--line-height)
				) $i;
				min-height: unset;

				& > span {
					margin-right: 1ch $i;
				}
			}
			.avatar {
				mar(0);
				box(calc(var(--avatar-size) * var(--line-height)));
				left: var(--pad);
				top: var(--pad);
			}
			.repliedMessage {
				margin-left: calc(var(--pad) + var(--avatar-spacing));
				mar(bottom, 0);
				height: unset;

				&::before {
					brd(left);
					brd(top);
					mar(0);
					margin-bottom: calc(var(--pad) / -0.5) $i;
					position: unset;
					box(40px, var(--font-size));
					z-index: 1;
				}
			}

			if (messages-alt) {
				--message-actions-pos-top: 0;
				background-color: transparent $i;
				pad(top);
				brd(top);

				[role="separator"] + li > & {
					pad(top, 0);
					brd(top, 0);
				}

				& > .contents,
				& > .container {
					margin-left: calc(var(--pad) * -1) $i;
				}
				& > .contents > .messageContent,
				& > .container {
					pad(0);
					pad(left);
					pad(right);
				}
				.header {
					padding-top: calc(var(--pad) / var(--line-height)) $i;
				}
				.avatar {
					top: calc(var(--pad) / var(--line-height));
				}
				.repliedMessage {
					--reply-spacing: calc(var(--pad) / 2) $i;
					margin-left: calc(
						var(--avatar-size) + var(--avatar-spacing) + var(--reply-spacing)
					) $i;
				}
				.repliedMessageClickableSpine {
					left: calc(
						var(--avatar-size) / -2 - var(--gutter) - var(--reply-spacing)
					) $i;
				}
			} else {
				--cozy-top-border-width: calc(var(--border-width) * -1);
				--message-actions-pos-top: var(--pad);
				bg(2);
				brd();

				& > .contents > .messageContent,
				& > .container {
					bg(3);
					pad();
				}
				.header {
					bg(2);
					brd(bottom);
				}
			}
		}

		&:not([class*="groupStart_"]) {
			pad(top, 0);
			brd(top, 0);
			margin-top: var(--cozy-top-border-width) $i;

			.messageContent {
				pad(top, 0);
			}
		}
		&[class*="mentioned_"] {
			brd(left, color3);
		}
		&[class*="automodMessage_"],
		&[class*="ephemeral_"],
		&[class*="highlighted_"],
		&[class*="replying_"] {
			brd(left, color4);
		}

		& > .contents {
			position: relative;
		}
		& > .container {
			padding: 0.25rem 0;
			gap: var(--pad);

			// Embed buttons
			.children {
				mar(top);
				height: unset;
			}
		}

		// Username
		.header {
			lnh();

			&Text {
				mar(0);
			}
		}
		.username {
			lnh();

			&:not(:hover) {
				fg(2);
				filter: none;
			}
		}
	}
	.message {
		& > .wrapper,
		.root & .wrapper {
			@extend [class*="message_"];
			pad();
		}

		&Container { // recent mentions
			bg(2);
			pad();
			brd();
			mar(0);
		}
		&Group { // pinned
			&Wrapper {
				bg(2);
				pad();
				brd();
				mar(bottom);
			}
			&Cozy {
				@extend [class*="message_"];
			}
		}
	}
	[data-list-id="chat-messages"] > [role="separator"] {
		brd(0);
		mar(0);
		mar(top);
		mar(bottom);
		height: calc(var(--font-size) * var(--line-height));
		top: 0 $i;

		& > span {
			lnh();
			pad();

			&::before {
				content: '';
				position: absolute;
				inset: 0;
				top: calc(50% - var(--border-width));
				brd(top);
				z-index: -1;
			}
		}
		& > .content {
			text-transform: uppercase;
			mar(0);
		}
		& > .unreadPill {
			bg();
			clr(9);
			white-space: pre;
			position: unset;
			height: unset;

			&::before {
				border-top-color: var(--color1) $i;
			}
			&::after {
				content: ' messages';
			}
		}
		svg {
			display: none;
		}
	}
	.botTag {
		background-color: unset;
		clr(5);
		pad(0);
		mar(0);
		top: 0;
		height: unset $i;
		vertical-align: unset;

		[class*="cozy_"] & {
			margin-left: 1ch $i;
		}

		&Verified {
			display: none;
		}
	}
	.timestamp {
		lnh();
		mar(0);
		height: unset;

		[class*="message"][class*="cozy_"] > .contents > &,
		[class*="message"][class*="cozy_"][class*="groupStart_"]:not(:hover) .header & {
			display: none;
		}
		[class*="message"][class*="compact_"] .header & {
			margin-right: 1ch $i;
			width: var(--compact-timestamp-width) $i;
		}
	}
	.repliedMessage {
		lnh();
		mar(right);

		&::before {
			border-top-left-radius: var(--border-radius);
		}

		& ~ .buttonContainer {
			top: calc(var(--font-size) * var(--line-height));
		}
		& > img {
			margin-right: 1ch;
		}
		.username {
			opacity: 1;
		}
	}
	.replyBadge {
		margin-right: 1ch;
		box(var(--font-size));
	}
	.mention {
		border-radius: var(--border-radius);
		padding: 0 calc(var(--pad) / 2);
	}
	[aria-label="Message Actions"] {
		pad(0);
		top: var(--message-actions-pos-top);
		right: var(--pad);

		if (!messages-alt) {
			[class*="cozy_"] & {
				--bg: var(--bg3);
			}
		}

		&.isHeader {
			top: messages-alt \
				? var(--header-h) \
				: calc(var(--header-h) + var(--pad));
		}

		& > .wrapper {
			bg();
			pad(0);
			brd(0);
			shd(0);
			height: unset;
			overflow: unset;

			&::before {
				content: '';
				position: absolute;
				left: -2ch;
				box(2ch, 100%);
				background-image: linear-gradient(90deg, transparent, var(--bg));
			}

			& > div {
				background-color: transparent;
				pad(0);
				min-width: unset;
				height: unset;
			}
		}
	}
	.f84418acfdbdfe54-hoverBarButton {
		background-color: transparent $i;

		.f84418acfdbdfe54-icon {
			transform: none $i;
		}
	}

	/**
	 * Everything else in chat
	**/
	// Attachments
	.hoverButton {
		pad(0);

		&Group {
			opacity: 1;
			brd(0);
			outline: none;
			mar(left);
			position: unset;
			gap: 1ch;
		}
	}
	.newMosaicStyle {
		brd();

		& > :first-child {
			brd(0);

			code {
				bg();
			}
		}
		.footer {
			brd(0);
			pad();
			height: unset;
			gap: 1ch;

			& > * {
				pad(0);
			}
		}
	}
	.nonMediaAttachmentsContainer {
		mar(top);
		mar(bottom);
	}

	// Normal file
	.attachment {
		pad();
		brd();

		.icon {
			mar(right);
		}
		.downloadWrapper {
			mar(right, 0);
		}
	}

	// Voice messages
	.messageAttachment > .container {
		background-color: var(--alt-bg);
		pad();
		brd();
	}

	// Images
	.mediaAttachmentsContainer {
		&,
		& > div,
		/.messageAttachment,
		/[class*="imageWrapper_"] {
			border-radius: var(--border-radius);
		}
	}

	// Audio
	.wrapperAudio {
		fg();
		pad(0);
	}
	.audio {
		&Metadata {
			background-color: var(--alt-bg);

			&::before {
				mar();
				height: unset;
			}

			.metadata {
				&Content {
					pad();
					brd(left);
				}
				&Download {
					height: unset;
				}
				&Size {
					opacity: 1;
					fg(2);
					lnh();
				}
			}
		}
		&Controls {
			background-color: var(--alt-bg);
			brd(0);
			brd(top);
			mar(0);
		}
	}
	.fakeEdges {
		&::before {
			border-radius: 50% 0 0 50%;
		}
		&::after {
			border-radius: 0 50% 50% 0;
		}
	}

	// Code view
	.formattedSize {
		padding-left: 1ch;

		&::before {
			content: '(';
		}
		&::after {
			content: ')';
		}
	}

	// Threads
	[aria-roledescription="Open Thread Button"] {
		normalise-button();
		background-color: var(--alt-bg) $i;
	}
	.cta,
	.name {
		lnh();
	}
	.bottomLine {
		display: none;
	}

	// Embeds
	.embed {
		border-radius: var(--border-radius);

		&Full {
			background-color: var(--alt-bg);
			border-left-color: var(--hl);
		}
		&Link {
			color: inherit $i;
		}
		&Margin {
			mar(top);
		}
		&SuppressButton {
			opacity: 1;
			pad(0);
		}
		&Provider {
			normalise-header();
		}
		&Title {
			mar(0);
		}
		&Author {
			mar(0);
			mar(bottom);

			&Icon {
				margin-right: 1ch;
				box(var(--avatar-size));
			}
		}
		&Description {
			lnh();
		}
		&Footer {
			align-items: start;

			&Icon {
				mar(right);
			}
			&Text {
				lnh();
				fg(2);
			}
		}
		&Thumbnail {
			mar(0);
			mar(left);
		}
		&Media {
			border-radius: var(--border-radius);

			~/Full & {
				mar(top);
			}
		}
		&Image,
		&Thumbnail,
		&Video {
			img,
			video {
				border-radius: var(--border-radius);
			}
		}
	}
	.grid {
		pad();
	}

	// Reactions
	$reaction = {
		normal: '[class*="reaction_"]',
		own:    '[class*="reactionMe_"]'
	}
	.reaction {
		&s {
			pad(0);
			mar(0);
		}
		&Inner {
			pad(0);
		}
		&Count {
			fg();
			pad();
			brd(left);
			mar(0);
		}
	}
	{$reaction[normal]} {
		background-color: var(--alt-bg) $i;
		brd();
		mar(right);
		focus(focus-within);

		img {
			pad();
			mar(0);
		}
	}
	{$reaction[own]} {
		--alt-bg: color-a(3) $i;
		--border: var(--color11) $i;
	}

	// Syntax highlighting
	.hljs {
		background-color: var(--alt-bg) $i;
		lnh();
		pad();
		brd();

		&-comment,
		&-quote {
			fg(2);
		}
		&-addition,
		&-built_in,
		&-deletion,
		&-meta,
		&-meta &-keyword,
		&-name,
		&-section,
		&-selector-class,
		&-selector-id,
		&-selector-tag,
		&-title,
		&-keyword {
			clr(9);
		}
		&-bullet,
		&-doctag,
		&-literal,
		&-link,
		&-meta &-meta-string,
		&-number,
		&-regexp,
		&-string,
		&-subst,
		&-symbol {
			clr(10);
		}
		&-selector-pseudo {
			clr(12);
		}
		&-variable {
			clr(13);
		}
		&-attr,
		&-attribute,
		&-selector-attr,
		&-class &-title,
		&-template-variable,
		&-type {
			clr(14);
		}
	}

	// Message textbox
	.f75fb00fb7356cbe-form {
		padding: var(--body-pad) $i;
		pad(top, 0);
		mar(0);

		.b8880176888cc928-typing {
			padding-inline: var(--body-pad) $i;
			top: unset $i;
			bottom: 0 $i;
		}
		.b8880176888cc928-text,
		.b8880176888cc928-typingDots {
			mar(0);
		}
	}
	._740174f3d6a2c8fe-channelTextArea {
		background: transparent $i;
		brd(0);
		mar(0);

		._740174f3d6a2c8fe-inner {
			pad(0);
		}
		._740174f3d6a2c8fe-textArea {
			mar(right);
		}
		._740174f3d6a2c8fe-themedBackground {
			background: transparent $i;
			brd(0);
			overflow: auto $i;
			overflow: visible $i;
		}
		._1b31f471f0bb10ab-editor {
			normalise-input();
		}
		._1b31f471f0bb10ab-placeholder {
			inset: var(--pad) $i;
			z-index: 1 $i;
		}
		.ec4baf0360ff3578-slateTextArea:not(._1b31f471f0bb10ab-editor) {
			pad(0);
		}
	}
	._0923f156a0410684-attachWrapper {
		pad(0);
		mar(right);

		._0923f156a0410684-attachButton {
			mar(0);
		}
		._0923f156a0410684-attachButtonInner {
			pad(0);
		}
	}

	/**
	 * Search
	**/
	.search {
		// Header
		.toolbar & {
			mar(0);
			order: -1;

			&Bar {
				--bg2: var(--bg);
				--fg: var(--reserve-fg);
				--pad: calc(var(--reserve-pad) / 2);
				normalise-input();
				pad(0);
				box(240px, unset);
				focus(focus-within);
				align-items: center $i;
			}

			& > :not(:focus-within) {
				& > div {
					background-color: transparent $i;
					brd(0);
					width: var(--font-size) $i;
				}
				.DraftEditor-root {
					pad(0);
					box(0);
				}
				.iconLayout {
					cursor: pointer $i;
				}
			}
			&:focus-within {
				[role="button"] {
					mar();
				}
			}
		}

		&Filter,
		&Answer {
			pad(left);
			pad(right);
			brd(0);
			mar(0);
			margin-top: 2px $i;
			height: unset;
		}
		&Answer {
			pad(left, 0);
		}

		// Sidebar
		&Header:not(.h5) { // .h5 - gifs header
			bg(3);
			pad(0);
			pad(left);
			brd(bottom);
			height: var(--header-h);
		}
		&Result {
			brd();
			mar(bottom);

			&Group {
				margin-bottom: calc(var(--pad) * 2);
			}
			&sWrap {
				brd(left);
				width: var(--search-results-width) $i;

				.scroller {
					pad(0);
					overflow: hidden $i;

					[role="list"] {
						/*
						 * Move scrollbar away from the pages list,
						 * as it is sticky now.
						 */
						overflow: hidden scroll;
						height: calc(100% - var(--header-h) - var(--pad) * 2);

						&::-webkit-scrollbar {
							&-button,
							&-track {
								--bg2: var(--bg);
							}
						}
					}
					& > .container { // pages
						position: sticky;
						bottom: 0;
						z-index: 1;
					}
				}
			}

			// Popout
			&Channel {
				&Icon {
					color: inherit;
					box(var(--font-size));
				}
				&Icon,
				&Category {
					opacity: 1;
					mar(0);
					top: 0;
				}
			}
		}

		&LearnMore,
		&ClearHistory {
			margin-right: calc(var(--pad) * -1);
			top: calc(var(--pad) / 2 / var(--line-height)) $i;
		}

		.DraftEditor {
			&-root,
			/.public-DraftEditorPlaceholder-root,
			/.public-DraftEditor-content {
				lnh();
				pad(0);
				overflow-x: visible;
			}
			&-root {
				pad();
			}
			&-editorContainer {
				brd(0);
				height: unset $i;
			}
		}

		.iconContainer {
			display: block $i;
			box(var(--font-size));
		}
	}
	.page {
		&Control {
			pad(0);

			&Container {
				bg(3);
				brd(top);
				mar(0);
			}

			button {
				--bg2: var(--bg);
				--pad: calc(var(--reserve-pad) / 2);
				normalise-button();
			}
			.c1521037ef09de7e-endButton {
				mar(inline);
			}
			.roundButton {
				background-color: transparent;
				fg(2);
				pad();
				brd(0);

				&:hover {
					fg();
				}
			}
			.activeButton {
				hl();
			}
		}
		&Button {
			lnh();
			mar(0);
			box(unset);
			min-width: unset;
			min-height: unset;

			.iconCaret {
				display: none;
			}
		}
	}
	#search-results {
		pad();

		.channelName {
			&Container {
				normalise-header();
			}
			&Text {
				lnh();
			}
			&Icon {
				display: none;
			}
		}
	}
	.highlight {
		hl();
	}
}