@use '../assets';

#app-mount {
	// General Messages
	.group-spacing-16 .groupStart-3Mlgv1 {
		margin: 0;
	}
	.wrapper-30-Nkg {
		background: transparent !important;
		min-height: unset;
		&.groupStart-3Mlgv1 {
			border-top: 1px solid var(--base-border);
			min-height: auto;
			&.cozy-VmLDNB {
				padding-top: var(--spacing);
			}
			&.compact-2Nkcau {
				margin-top: 0;
			}
		}
		&.compact-2Nkcau {
			padding: var(--spacing-compact) 0 var(--spacing-compact) 70px;
		}
		.username-h_Y3Us {
			font-size: var(--chat-font-size);
			color: var(--text-normal);
			font-weight: var(--font-weight-semibold);
			line-height: normal;
			margin: 0;
		}
		.markup-eYLPri {
			font-size: var(--chat-font-size);
			margin-left: 0;
			padding-left: 0;
			line-height: var(--line-height);
			font-weight: var(--font-weight-normal);
		}
		&.mentioned-Tre-dv {
			background: rgb(var(--accent), 0.1) !important;
			& + .message-2CShn3:not(.groupStart-3Mlgv1) {
				margin-top: 0;
				padding-top: 0;
			}
			&:not(:nth-last-child(2)) {
				padding-bottom: 4px;
			}
			&.compact-2Nkcau {
				padding-bottom: var(--spacing-compact);
			}
			&::before {
				background-color: var(--accent-solid);
			}
			.mention {
				background: transparent;
				&:hover {
					color: var(--text-normal);
				}
			}
		}
		&.cozy-VmLDNB:not(.groupStart-3Mlgv1) {
			margin-top: calc(var(--spacing) / -1);
			padding-top: 0;
		}

		// Bot Tag
		.botTag-7aX5WZ {
			font-size: 0;
			padding: 0;
			height: auto;
			width: auto;
			background-color: var(--background-modifier-active);
			border-radius: var(--border-radius);
			&.botTagCozy-3NTBvK {
				margin: 0 var(--spacing-third);
				margin-right: 0;
				margin-top: 0;
				vertical-align: unset;
				top: 0;
			}
			.botTagVerified-2KCPMa {
				display: none;
			}
			&::before {
				content: '';
				width: 16px;
				height: 16px;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				mask: url(assets.$icon_cog) center/12px no-repeat;
				background: var(--text-normal);
			}
		}

		// Timestamps
		.timestamp-p1Df1m,
		.timestamp-2qj4__ {
			color: var(--text-muted);
			font-size: var(--chat-font-size-xsm);
			margin-left: var(--spacing-half);
			font-weight: var(--font-weight-semibold);
			height: auto;
			line-height: normal;
			top: var(--spacing-third);
			&.latin24CompactTimeStamp-2pXUBq {
				width: auto;
			}
			&.alt-1dvXnH {
				font-size: var(--chat-font-size-xsm);
				height: auto;
				width: 40px;
				text-align: center;
			}
		}

		// Edit Messages
		.contents-2MsGLg .scrollableContainer-15eg7h.webkit-QgSAqd {
			padding: 0;
			.markup-eYLPri {
				padding: 4px var(--spacing-half) 0;
			}
		}
		.edited-1v5nT8 {
			color: var(--text-muted);
			font-size: var(--font-size-xsm);
			cursor: var(--cursor);
		}
		.operations-3q3u6E {
			font-size: 0;
			margin-top: var(--spacing-half);
			padding: var(--spacing-half) 0;
			a {
				font-size: var(--font-size);
				font-weight: var(--font-weight-normal);
				cursor: var(--cursor);
				min-height: var(--input-height);
				height: var(--input-height);
				line-height: normal;
				transition: none;
				padding: 0 var(--spacing);
				border-radius: var(--button-border-radius);
				text-decoration: none;
				display: inline-flex;
				align-items: center;
				text-transform: capitalize;
				&:last-child {
					color: var(--white);
					background-color: rgb(var(--accent));
					margin-left: var(--spacing);
					&:hover {
						box-shadow: inset 0 0 0 100vmax rgb(255, 255, 255, 0.1);
					}
					&:focus {
						box-shadow: 0 0 0 2px rgb(var(--accent), 0.25),
							inset 0 0 0 100vmax rgb(255, 255, 255, 0.1);
					}
				}
				&:first-child {
					color: var(--text-normal);
					background: var(--background-light);
					border: 1px solid var(--base-border);
					cursor: var(--cursor);
					&:hover {
						border: 1px solid currentColor;
					}
					&:focus {
						box-shadow: 0 0 0 1px currentColor !important;
						border: 1px solid currentColor !important;
					}
				}
			}
		}

		// Cozy
		&.cozy-VmLDNB {
			margin: 0;
			padding-left: calc(var(--chat-avatar-size) + var(--spacing) * 2);
			padding-bottom: var(--spacing);
			.container-2sjPya {
				max-width: 100%;
			}
			.header-2jRmjb {
				align-items: center;
				display: flex;
				min-height: unset;
			}
			.headerText-2z4IhQ {
				display: flex;
				margin: 0;
			}
			.avatar-2e8lTP {
				border-radius: var(--avatar-radius) !important;
				box-shadow: 0 0 0 0.875px var(--base-border);
				margin: 0;
				top: var(--spacing);
				left: var(--spacing);
				width: var(--chat-avatar-size) !important;
				height: var(--chat-avatar-size) !important;
				transition: 100ms ease box-shadow;
				background-color: var(--background);
				position: absolute;
				overflow: hidden !important;
				cursor: var(--cursor);
				filter: none;
				transform: none;
				&:hover {
					box-shadow: 0 0 0 1px var(--accent-solid);
				}
				&[src*='/assets/'] {
					content: url(assets.$blank);
					& + .header-2jRmjb + .messageContent-2t3eCI {
						position: unset;
						&::after {
							content: '';
							top: var(--spacing);
							left: var(--spacing);
							width: var(--chat-avatar-size);
							height: var(--chat-avatar-size);
							background: var(--text-muted);
							mask: url(assets.$icon_person) center/40% no-repeat;
							position: absolute;
							z-index: 1;
							pointer-events: none;
						}
					}
				}
			}
			.wrapper-1VLyxH {
				width: var(--chat-avatar-size) !important;
				height: var(--chat-avatar-size) !important;
				foreignObject::after {
					content: none;
				}
				img {
					border-radius: 0;
					clip-path: none;
				}
			}
			.emoji {
				width: calc(var(--font-size) * 1.6);
				height: calc(var(--font-size) * 1.6);
				&.jumboable {
					width: calc(var(--font-size) * 4);
					height: calc(var(--font-size) * 4);
				}
			}
			.emotewrapper {
				&:hover::after {
					content: '';
					width: 16px;
					height: 16px;
					top: -7px;
					right: -7px;
					background: var(--background);
					border: 1px solid var(--base-border);
					border-radius: 50%;
					position: absolute;
					box-sizing: border-box;
				}
				.fav {
					position: absolute;
					width: 16px;
					height: 16px;
					top: -7px;
					right: -7px;
					mask: url(assets.$icon_star) center/70% no-repeat;
					background: var(--text-muted);
					z-index: 1;
					padding: 0;
					box-sizing: border-box;
					border: 1px solid var(--base-border);
					border-radius: 50%;
					&:hover {
						background: var(--text-normal);
					}
					&.active {
						background: rgb(var(--status-yellow));
						mask: url(assets.$icon_star_filled) center/70% no-repeat;
					}
				}
			}

			// Remove threads bar thingy
			&.hasThread-3h-KJV::after {
				display: none;
			}
		}

		// Quick actions
		.wrapper-2vIMkT {
			background: var(--background);
			box-shadow: none;
			height: 24px;
			top: 4px;
			border-radius: var(--border-radius);
			overflow: hidden;
			box-sizing: border-box;
			margin: 0;
		}
		.separator-PzTEkx {
			display: none;
		}
		.container-2gUZhU {
			top: -17px;
			.button-3bklZh {
				height: 100%;
				padding: 0;
				width: auto;
				color: var(--text-normal);
				border-radius: 0;
				cursor: var(--cursor);
				box-sizing: border-box;
				border-top: 1px solid var(--base-border);
				border-bottom: 1px solid var(--base-border);
				&:hover {
					background: var(--background-modifier-hover);
				}
				&:active {
					background: var(--background-modifier-active);
				}
				&.selected-69H4ua {
					color: var(--white);
					background: var(--accent-solid);
				}
				&:first-child {
					border-left: 1px solid var(--base-border);
					border-radius: var(--border-radius) 0 0 var(--border-radius);
				}
				&:last-child {
					border-right: 1px solid var(--base-border);
					border-radius: 0 var(--border-radius) var(--border-radius) 0;
				}
				&:only-child {
					border-radius: var(--border-radius);
				}
				.icon-1zidb7 {
					width: 14px;
					height: 14px;
					path {
						&[d='M7 12.001C7 10.8964 6.10457 10.001 5 10.001C3.89543 10.001 3 10.8964 3 12.001C3 13.1055 3.89543 14.001 5 14.001C6.10457 14.001 7 13.1055 7 12.001ZM14 12.001C14 10.8964 13.1046 10.001 12 10.001C10.8954 10.001 10 10.8964 10 12.001C10 13.1055 10.8954 14.001 12 14.001C13.1046 14.001 14 13.1055 14 12.001ZM19 10.001C20.1046 10.001 21 10.8964 21 12.001C21 13.1055 20.1046 14.001 19 14.001C17.8954 14.001 17 13.1055 17 12.001C17 10.8964 17.8954 10.001 19 10.001Z'] {
							d: path(assets.$path_kebab_horizontal);
							transform: scale(1.275) translateX(3px) translateY(2px);
						}
						&[d='M19.2929 9.8299L19.9409 9.18278C21.353 7.77064 21.353 5.47197 19.9409 4.05892C18.5287 2.64678 16.2292 2.64678 14.817 4.05892L14.1699 4.70694L19.2929 9.8299ZM12.8962 5.97688L5.18469 13.6906L10.3085 18.813L18.0201 11.0992L12.8962 5.97688ZM4.11851 20.9704L8.75906 19.8112L4.18692 15.239L3.02678 19.8796C2.95028 20.1856 3.04028 20.5105 3.26349 20.7337C3.48669 20.9569 3.8116 21.046 4.11851 20.9704Z'] {
							d: path(assets.$path_pencil);
							transform: scale(1.275) translateX(2.5px) translateY(1px);
						}
						&[d='M12.2512 2.00309C12.1677 2.00104 12.084 2 12 2C6.477 2 2 6.477 2 12C2 17.522 6.477 22 12 22C17.523 22 22 17.522 22 12C22 11.916 21.999 11.8323 21.9969 11.7488C21.3586 11.9128 20.6895 12 20 12C15.5817 12 12 8.41828 12 4C12 3.31052 12.0872 2.6414 12.2512 2.00309ZM10 8C10 6.896 9.104 6 8 6C6.896 6 6 6.896 6 8C6 9.105 6.896 10 8 10C9.104 10 10 9.105 10 8ZM12 19C15.14 19 18 16.617 18 14V13H6V14C6 16.617 8.86 19 12 19Z'] {
							d: path(assets.$path_smile);
							transform: scale(1.275) translateX(2px) translateY(1px);
							+ path {
								display: none;
							}
						}
					}
				}
			}
		}
	}

	// Compact
	.compact-2Nkcau {
		padding: var(--spacing) 0 var(--spacing-third) 70px;
		.contents-2MsGLg {
			padding-left: 0;
			margin: 0;
			overflow: visible !important;
		}
		.emoji {
			width: calc(var(--font-size) * 1.6);
			height: calc(var(--font-size) * 1.6);
			&.jumboable {
				width: calc(var(--font-size) * 2);
				height: calc(var(--font-size) * 2);
			}
		}
		.repliedMessage-3Z6XBG {
			top: var(--spacing-half);
			.replyBadge-LMm_Ic {
				display: none;
			}

			& + .contents-2MsGLg {
				padding-top: 30px;
			}
		}
	}

	// System Messages
	.expanded-3lghlw {
		background: rgb(var(--status-red), 0.1);
		border-left: 2px solid rgb(var(--status-red));
	}
	.blockedSystemMessage-3FmE9n .blockedMessageText-3Zeg3y {
		position: relative;
		top: 3px;
	}
	.blockedIcon-cd-3B7 {
		position: relative;
		top: 2px;
	}
	.systemMessage-1H1Z20,
	.blockedSystemMessage-3FmE9n {
		&.compact-2Nkcau {
			padding-left: calc(10px + var(--spacing-double)) !important;
		}
		.content-vSHmMD {
			font-size: var(--chat-font-size);
			color: var(--text-muted);
			font-weight: var(--font-weight-normal);
			line-height: normal;
			display: flex;
			align-items: center;
			a {
				color: var(--text-normal);
			}
		}
		.container-x059i8 {
			padding: var(--spacing-third) 0;
		}
		.iconContainer-2rPbqG {
			margin: 0;
			padding: 0;
			width: calc(var(--chat-avatar-size) + var(--spacing) * 2);
			margin-top: 1px;
			.iconSize-Ai8Wtu {
				background-size: cover;
				width: var(--font-size-md);
				height: var(--font-size-md);
			}
			.blockedIcon-cd-3B7 {
				background: var(--text-muted);
				mask: url(assets.$icon_close) center/12px no-repeat;
				path {
					display: none;
				}
			}
		}
		.blockedAction-2cPk2G {
			color: var(--text-link);
		}
	}
	.localBot-GrCgVt {
		background: rgb(var(--accent), 0.1) !important;
		&.cozyMessage-1DWF9U {
			&::after {
				content: '';
				border-radius: calc(var(--border-radius) / 1.5);
				box-shadow: 0 0 0 0.875px var(--base-border);
				top: var(--spacing);
				left: var(--spacing);
				width: var(--chat-avatar-size);
				height: var(--chat-avatar-size);
				background: var(--background-light);
				position: absolute;
				pointer-events: none;
			}
		}
		.botTagRegular-kpctgU {
			display: none;
		}
		.avatar-2e8lTP {
			opacity: 0;
		}
		&::before {
			background: var(--accent-solid);
		}
		.container-2sjPya {
			display: block;
			padding: 0 !important;
			.localBotMessage-3cUzun {
				margin: 0;
				font-size: 0;
				a {
					font-size: var(--font-size);
					font-weight: var(--font-weight-normal);
					cursor: var(--cursor);
					min-height: var(--input-height);
					height: var(--input-height);
					line-height: normal;
					transition: none;
					padding: 0 var(--spacing);
					border-radius: var(--button-border-radius);
					text-decoration: none;
					display: inline-flex;
					align-items: center;
					text-transform: capitalize;
					color: var(--white);
					background-color: rgb(var(--accent));
					margin-top: var(--spacing-half);
					&:hover {
						box-shadow: inset 0 0 0 100vmax rgb(255, 255, 255, 0.1);
					}
					&:focus {
						box-shadow: 0 0 0 2px rgb(var(--accent), 0.25),
							inset 0 0 0 100vmax rgb(255, 255, 255, 0.1);
					}
				}
			}
		}
	}

	// Attachments
	.zalgo-jN1Ica .messageContent-2t3eCI {
		overflow: visible;
	}
	.attachment-1PZZB2 {
		border: 1px solid var(--base-border);
		background-color: var(--background);
		overflow: hidden;
		padding: 0;
		.icon-1KCy88 {
			margin-left: var(--spacing);
			width: 24px;
			margin-right: 0;
		}
		& > .anchor-1MIwyf {
			height: 51px;
			display: flex;
			align-items: center;
			padding: 0 var(--spacing-half);
			border-left: 1px solid var(--base-border);
			svg {
				color: var(--text-muted);
				opacity: 1;
				margin-left: 0;
			}
			&:hover svg {
				color: var(--text-normal);
			}
		}
	}
	.attachmentInner-1fP7iq {
		padding: var(--spacing);
	}
	.wrapper-1HIH0j {
		border: 1px solid var(--base-border);
		background-color: var(--background);
		padding: var(--spacing);
		.inviteSplash-2nkLRX {
			margin: calc(var(--spacing) / -1) calc(var(--spacing) / -1) var(--spacing);
		}
		h5 {
			margin-bottom: var(--spacing);
		}
		.guildIconImage-74OdmM {
			border-radius: var(--border-radius);
			box-shadow: inset 0 0 0 1px var(--base-border);
			width: var(--avatar-size-lg);
			height: var(--avatar-size-lg);
			margin-right: var(--spacing);
		}
		.guildName-3G4jq- {
			font-size: var(--font-size-md);
		}
		.count-62gVQ0 {
			font-size: var(--font-size);
		}
	}
	.wrapperAudio-1Bzv_Z {
		background: var(--background);
		border: 1px solid var(--base-border);
		padding: 0;
	}
	.audioMetadata-1Hrt8T::before {
		height: 56px;
		background-position: center;
		background-size: 24px;
		padding: 0 var(--spacing);
	}
	.metadataContent-lalfZ3 {
		padding: var(--spacing);
	}
	.metadataDownload-3IY84h {
		height: 56px;
		display: flex;
		align-items: center;
		padding: 0 var(--spacing-half);
		border-left: 1px solid var(--base-border);
		svg {
			color: var(--text-muted);
			opacity: 1;
		}
		&:hover svg {
			color: var(--text-normal);
		}
	}
	.audioControls-3fmemK {
		border-top: 1px solid var(--base-border);
		border-radius: 0;
		background: transparent;
		margin-top: 0;
	}
	.imageWrapper-oMkQl4 {
		border-radius: var(--border-radius);
		outline: none;
		transition: 250ms ease;
	}

	// Embeds
	.embedImage-2Ynqkh img,
	.embedImage-2Ynqkh video,
	.embedThumbnail-2nTasl img,
	.embedThumbnail-2nTasl video,
	.embedVideo-2ixt5A img,
	.embedVideo-2ixt5A video {
		border-radius: var(--border-radius);
	}
	.embedFull-1HGV2S {
		background-color: var(--background);
		border-top: 1px solid var(--base-border) !important;
		border-right: 1px solid var(--base-border) !important;
		border-bottom: 1px solid var(--base-border) !important;
		border-radius: var(--border-radius);
		.grid-1aWVsE {
			padding: var(--spacing);
			> div:first-child,
			.embedSuppressButton-1rZHq6 + div {
				margin: 0;
			}
		}
		a {
			color: var(--text-link) !important;
		}
	}
	.embedProvider-1GSN0c {
		font-size: var(--font-size-sm);
		color: var(--text-muted);
	}
	.embedAuthorNameLink-1NK1y6 {
		font-size: var(--font-size);
		color: var(--text-normal);
		font-weight: var(--font-weight-semibold);
	}
	.embedTitle-2n1pEb,
	.embedAuthorName-pGyUPR {
		font-size: var(--chat-font-size);
		font-weight: var(--font-weight-semibold);
	}
	.embedMargin-2PsaQ4 {
		margin-top: var(--spacing-half);
	}
	.embedAuthorIcon-3pnkS4 {
		margin-right: var(--spacing-half);
		width: var(--chat-font-size);
		height: var(--chat-font-size);
		border-radius: var(--border-radius);
	}
	.embedDescription-1DrJxZ,
	.embedFieldName-9LYSyR,
	.embedFieldValue-3EHtvR {
		font-size: var(--chat-font-size);
		font-weight: var(--font-weight-normal);
		color: var(--text-normal);
	}
	.embedFieldName-9LYSyR {
		font-weight: var(--font-weight-semibold);
	}
	.embedAuthorName-pGyUPR,
	.embedFieldName-9LYSyR,
	.embedTitle-2n1pEb {
		color: var(--text-normal);
	}
	.embedFooterIcon-1dTZzD {
		border-radius: var(--avatar-radius);
		margin-right: var(--spacing-half);
	}

	// Blockquotes
	.blockquoteContainer-3VtvI1 {
		background: var(--background);
		border: 1px solid var(--base-border);
		border-radius: var(--border-radius);
		padding: var(--spacing);
		position: relative;
		box-sizing: border-box;
		border-top-left-radius: 0;
		margin: var(--spacing-half) 0;
		margin-left: 13px;
		width: fit-content;
		blockquote {
			padding: 0;
			max-width: unset;
		}
		.blockquoteDivider-363utW {
			position: absolute;
			top: -1px;
			left: -15px;
			width: 0;
			height: 0;
			width: 15px;
			height: 15px;
			border-radius: 0;
			background: transparent;
			overflow: hidden;
			&::after {
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				top: 0;
				left: 8px;
				width: 100%;
				height: 100%;
				border-radius: 0;
				background: var(--background);
				border: 1px solid var(--base-border);
				transform: skewX(45deg);
			}
		}
	}

	// Search Flash Indicator
	.backgroundFlash-1X5jVs {
		transition: 150ms ease;
		background: rgb(var(--accent), 0.2) !important;
		&[style*='rgb(88, 101, 242, 0)'] {
			background: transparent !important;
		}
	}

	// Replied to message
	.repliedMessage-3Z6XBG {
		position: absolute;
		top: var(--spacing-triple);
		left: calc(var(--spacing-triple) + var(--chat-avatar-size));
		background: var(--background);
		border: 1px solid var(--base-border);
		width: fit-content;
		margin-left: -5px;
		max-width: calc(100vw - (var(--sidebar-width) * 3));
		padding: var(--spacing-third) var(--spacing-half);
		border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
		& > div {
			position: relative;
			z-index: 1;
		}
		img {
			&.replyAvatar-sHd2sU {
				display: none;
			}
			&.emoji {
				display: inline;
			}
		}
		.username-h_Y3Us {
			margin-right: var(--spacing-half);
		}
		&::before {
			content: none;
		}
		&::after {
			content: '';
			position: absolute;
			top: -1px;
			left: -4px;
			z-index: 0;
			width: 6px;
			height: 6px;
			border-radius: 0;
			background: var(--background);
			border: 1px solid var(--base-border);
			transform: skewX(45deg);
			border-bottom: none;
			border-right: none;
		}
		& + .contents-2MsGLg .header-2jRmjb {
			margin-bottom: 32px;
		}
	}
	.repliedTextContent-2hOYMB {
		max-width: calc(100vw - (var(--sidebar-width) * 3));
		overflow: hidden !important;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	// Text file embed
	.container-rr3Ruk {
		border: 1px solid var(--base-border);
		border-radius: var(--border-radius);
		background: var(--background);
		pre {
			margin: 0;
			code {
				border: none;
			}
		}
	}
	.attachmentName-vgRpzs {
		font-size: var(--chat-font-size-sm);
	}
	.formattedSize-1YbZww {
		color: var(--text-muted);
		font-size: var(--chat-font-size-xsm);
	}
	.textContainer-36wgKK {
		border: none;
		background: transparent;
		min-height: auto;
	}
	.footer-GXWBBp {
		border: none;
		background: transparent;
		height: auto;
		padding: var(--spacing-half) var(--spacing);
		border-top: 1px solid var(--base-border);
		.openFullPreviewSection-31zc2v {
			padding: 0;
			height: 16px;
			svg {
				height: 16px;
				width: 16px;
			}
		}
		svg {
			height: 18px;
			width: 18px;
		}
	}

	.message-2CShn3 pre {
		font-size: var(--chat-font-size-sm);
		code {
			font-size: var(--chat-font-size-sm);
			&::before {
				font-size: var(--chat-font-size-sm);
			}
		}
		&::before {
			font-size: var(--chat-font-size-sm);
		}
	}
}

// Remove Powercord Codeblock Mods
.powercord-lines,
.powercord-codeblock-lang {
	display: none;
}

// Light Mode
.theme-light #app-mount .message-2CShn3 .operations-3q3u6E a:first-child {
	&:hover {
		background: var(--background);
		border: 1px solid var(--secondary-border);
	}
	&:focus {
		box-shadow: 0 0 0 2px rgb(0, 0, 0, 0.05) !important;
		border: 1px solid var(--secondary-border) !important;
	}
}
