@use '../assets';

#app-mount .root-8LYsGj {
	--left-side: 233px;
	--right-side: 465px;
	--banner-height: 180px;

	width: 700px;
	background: var(--background);
	border-radius: var(--border-radius);
	box-shadow: var(--elevation-2);
	box-sizing: border-box;
	transform: translateZ(0);
	animation: modal 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	overflow: visible;
	padding-top: 40px;
	flex-direction: row;
	border: 1px solid var(--base-border) !important;
	box-shadow: var(--elevation-2) !important;

	& > div {
		background: transparent;
	}

	// Left side
	.topSection-13QKHs {
		width: var(--left-side);
		border-right: 1px solid var(--base-border);
		height: 100%;
		padding: var(--spacing-double);
		box-sizing: border-box;
		background: var(--background-dark);
		& > header {
			position: relative;
			display: flex;
			flex-direction: column;
		}
		// Avatar
		.wrapper-1VLyxH {
			position: relative;
			top: 0;
			left: 0;
			border: none;
			width: 193px !important;
			height: 193px !important;
			margin-bottom: 40px;
			rect {
				x: 112;
				y: 112;
				width: 16px;
				height: 16px;
			}
		}
	}

	// User banner
	.banner-1YaD3N {
		position: absolute;
		top: calc(var(--spacing-double) / -1 + 1px);
		left: calc(var(--left-side) - var(--spacing-double));
		height: var(--banner-height);
		width: var(--right-side);
	}
	.headerTop-1PNKck {
		padding: 0;
		flex-direction: column;
		align-items: flex-start;
		position: unset;
	}
	// Usrbg support
	&[style*='--user-background'] .banner-1YaD3N:not(.bannerPremium-kkSkPv) {
		background: var(--user-background) center/cover no-repeat;
	}

	.customStatusActivity-WKWGD- {
		position: relative;
		z-index: 101;
		padding: calc(var(--spacing) / 1.5);
		background: var(--background);
		border: 1px solid var(--base-border);
		border-radius: var(--border-radius);
		order: -1;
		margin-bottom: var(--spacing-double);
	}
	.customStatusText-_4TbWr {
		font-size: var(--font-size-sm);
		color: var(--text-normal);
		font-weight: var(--font-weight-normal);
		line-height: normal;
	}
	.customStatus-kFfkj5 {
		display: flex;
		align-items: center;
		span {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.customStatusEmoji-3Oq9Rm {
			margin-right: var(--spacing-half);
			width: 16px;
			height: 16px;
		}
	}

	// Badges
	.badgeList-2aoHPw {
		margin: var(--spacing-double) 0;
		padding: 0;
		flex-direction: column;
		& > div,
		& > .bd-profile-badge {
			margin: 0;
			display: flex;
			align-items: center;
			&::after {
				content: attr(aria-label);
				margin-left: var(--spacing-half);
				font-size: var(--font-size);
				color: var(--text-normal);
				font-weight: var(--font-weight-normal);
				line-height: 18px;
				margin-top: -2px;
				width: 171px;
				max-width: 100%;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			&:not(:last-child) {
				margin-bottom: var(--spacing);
			}
		}
		&:empty {
			margin-bottom: 0;
		}
	}
	.bd-profile-badge svg {
		width: 14px;
		height: 14px;
		margin: 0 2px;
	}
	.profileBadge-12r2Nm {
		width: 18px;
		height: 18px;
		background: var(--text-muted);
		cursor: var(--cursor);
		overflow: hidden;
		position: relative;
		padding: 18px 18px 0 0;
		box-sizing: border-box;
		pointer-events: all;
		mask-size: contain;
		mask-position: center;
		mask-repeat: no-repeat;

		// Current nitro user
		&[src*='24d05f3b46a110e538674edbac0db4cd'] {
			mask-image: url(assets.$icon_heart);
		}
		// Server boosts
		&[src*='ca18353be0e57a2b3b3132fa1c08d6b4'],
		&[src*='e07c08cdc72bcc78b69c76d2c7ceb344'],
		&[src*='4a2618502278029ce88adeea179ed435'],
		&[src*='22f99ed6e34eaca48950254c70f8fe8d'],
		&[src*='c6d88d1d12afe03bdc4ebb747f8d196b'],
		&[src*='fbafa6adb7c49a6a2c3822521ff2af2f'],
		&[src*='d96ed283b74de75692487b7499fb8d09'],
		&[src*='0599f90e32c15b532647163edd72f70a'] {
			mask-image: url(assets.$icon_rocket);
		}
		// Early support
		&[src*='b802e9af134ff492276d94220e36ec5c'],
		&.powercord-badge-early {
			mask-image: url(assets.$icon_telescope);
			background: var(--text-muted);
			path {
				display: none;
			}
		}
		// Verified Bot Developer
		&[src*='4441e07fe0f46b3cb41b79366236fca6'] {
			mask-image: url(assets.$icon_code);
		}
		// Hypesquad
		&[src*='e666a84a7a5ea2abbbfa73adf22e627b'] {
			mask-image: url(assets.$icon_megaphone);
		}
		// Hypesquad Bravery
		&[src*='efcc751513ec434ea4275ecda4f61136'] {
			mask-image: url(assets.$icon_flame);
		}
		// Hypesquad Brilliance
		&[src*='ec8e92568a7c8f19a052ef42f862ff18'] {
			mask-image: url(assets.$icon_zap);
		}
		// Hypesquad Balance
		&[src*='9f00b18e292e10fc0ae84ff5332e8b0b'] {
			mask-image: url(assets.$icon_law);
		}
		// Paterned Server Owner
		&[src*='34306011e46e87f8ef25f3415d3b99ca'] {
			mask-image: url(assets.$icon_text_link);
		}
		&.profileBadgeStaff-3BXdTO,
		&.powercord-badge-staff {
			mask-image: url(assets.$icon_tools);
			background: var(--text-muted);
			path {
				display: none;
			}
		}
		&.profileBadgeBugHunterLevel1-dbEzVz,
		&.profileBadgeBugHunterLevel2-3TUciC,
		&.powercord-badge-hunter {
			mask-image: url(assets.$icon_bug);
			background: var(--text-muted);
			path {
				display: none;
			}
		}
		&.powercord-badge-developer {
			mask-image: url(assets.$icon_plug);
			background: var(--text-muted);
			path {
				display: none;
			}
		}
		&.powercord-badge-translator {
			mask-image: url(assets.$icon_globe);
			background: var(--text-muted);
			path {
				display: none;
			}
		}
	}

	// Username
	.nameTag-2Nlmsy {
		position: absolute;
		margin: 0;
		top: calc(183px + var(--spacing-double));
		font-size: var(--font-size-md);
		flex-direction: column;
		align-items: flex-start;
		& > span {
			line-height: var(--line-height);
		}
		&.nameTagWithCustomStatus-5c-v3- {
			top: calc(233px + var(--spacing-double));
		}
	}
	.discriminator-1bqsd3 {
		font-size: var(--font-size);
		color: var(--text-muted);
	}

	// Actions
	.relationshipButtons-3ByBpj {
		width: 100%;
		& > button {
			margin-left: 0;
			width: 100%;
		}
		& > [role='button'] {
			margin-right: -8px;
		}
	}

	// Tabs
	.tabBarContainer-sCZC4w {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 40px;
		border-bottom: 1px solid var(--base-border);
		padding: 0;
	}
	.tabBar-2hXqzU {
		height: auto;
	}
	.item-3XjbnG {
		margin: 0;
		padding: 0;
		text-align: center;
		font-size: var(--font-size);
		font-weight: var(--font-weight-normal);
		color: var(--text-normal) !important;
		display: flex;
		flex: 1;
		justify-content: center;
		border: none !important;
		box-sizing: border-box;
		height: 40px;
		cursor: var(--cursor);
		&:not(:first-child) {
			border-left: 1px solid var(--base-border) !important;
		}
		&:hover {
			background: var(--background);
		}
		&:first-child {
			border-top-left-radius: var(--border-radius);
		}
		&:last-child {
			border-top-right-radius: var(--border-radius);
		}
		&:only-child {
			width: var(--left-side);
			flex-grow: 0;
			border: 1px solid transparent !important;
			border-right-color: var(--base-border) !important;
			&::after {
				content: '';
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 40px;
				border: 1px solid var(--base-border);
				box-sizing: border-box;
				border-radius: var(--border-radius) var(--border-radius) 0 0;
			}
		}
		&.selected-g-kMVV,
		&[style*='rgb(255, 255, 255)'] {
			box-shadow: inset 0 -3px 0px var(--accent-solid);
			background: transparent !important;
			color: var(--text-normal) !important;
		}
	}

	// Body
	.body-1Ukv50 {
		width: var(--right-side);
		border-top-color: var(--base-border);
		position: absolute;
		height: calc(100% - 41px);
		left: var(--left-side);
		top: 41px;
	}
	.noTabBar-2Q-iE_::after {
		content: 'Your Profile';
		position: absolute;
		box-sizing: border-box;
		top: -41px;
		left: calc(var(--left-side) / -1);
		width: var(--left-side);
		display: flex;
		align-items: center;
		justify-content: center;
		border-right: 1px solid var(--base-border);
		height: 40px;
		padding: 0 var(--spacing);
		font-size: var(--font-size);
		font-weight: var(--font-weight-normal);
		color: var(--text-normal) !important;
		box-shadow: inset 0 -3px 0px var(--accent-solid);
	}
	.note-3M15gE {
		margin: 0;
	}

	.userInfoSection-2u2hir {
		border: none;
		padding: var(--spacing-double);
		background: var(--background);
		& + .userInfoSection-2u2hir {
			padding-top: 0;
		}
	}
	.userInfoSectionHeader-2mYYun {
		color: var(--text-normal);
		font-size: var(--font-size-md);
		font-weight: var(--font-weight-semibold);
		line-height: normal;
		text-transform: none;
		margin-bottom: var(--spacing-half);
	}
	.infoScroller-1QMpon {
		padding: var(--spacing-double);
	}

	.connectedAccounts-fvr7-7 {
		margin: 0;
		gap: var(--spacing);
	}
	.connectedAccountsColumn-2LgTkZ {
		margin: 0;
		width: 48.5%;
	}
	.connectedAccountContainer-SlCC-S {
		margin: 0;
		width: 100%;
		padding: 0;
		&:not(:last-child) {
			margin-bottom: var(--spacing);
		}
	}
	.connectedAccount-2PrNaX {
		width: unset;
		margin: 0;
		background: var(--background-light);
		border: 1px solid var(--base-border);
		border-radius: var(--border-radius);
		padding: var(--spacing);
		position: relative;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		height: auto;
		break-inside: avoid;
		.connectedAccountName-j0meX4 {
			font-size: var(--font-size);
			font-weight: var(--font-weight-normal);
			line-height: normal;
			color: var(--text-normal);
			margin: 0;
			& + span {
				display: none;
			}
		}
		img {
			display: inline-block;
			width: 16px;
			height: 16px;
			content: url(assets.$blank);
			background: var(--text-normal);
			mask-position: center;
			mask-size: contain;
			mask-repeat: no-repeat;
			margin-right: var(--spacing);
			&[src*='37f15a06d062bdd0fc252d2b35d0b0bb'] {
				mask-image: url(assets.$icon_battlenet);
			}
			&[src*='d897626dfa2016ea3ad0af935acb6070'] {
				mask-image: url(assets.$icon_steam);
			}
			&[src*='8d8f815f3d81a33b1e70ec7c22e1b6fe'] {
				// Ain't nobody got their facebook connected.
				mask-image: url(assets.$icon_facebook);
			}
			&[src*='ca71e0b8818221eea1deebbaf8dc6518'] {
				mask-image: url(assets.$icon_twitch);
			}
			&[src*='6a853b4c87fce386cbfef4a2efbacb09'] {
				mask-image: url(assets.$icon_github);
			}
			&[src*='85cf2b49d2a185c98ec8e383ad5a05d6'] {
				mask-image: url(assets.$icon_twitter);
				mask-size: 125%;
			}
			&[src*='f3224f560c8f5974355596a4f7e9ce19'] {
				mask-image: url(assets.$icon_reddit);
			}
			&[src*='1fa6585cbb8c0fe21188e26d19fc6609'] {
				mask-image: url(assets.$icon_xbox);
			}
			&[alt='Skype Logo' i] {
				// I checked like 100+ people for a skype connect and didn't find one.
				mask-image: url(assets.$icon_skype);
			}
			&[src*='57ee9535485efae7eb923ed4893abb57'] {
				mask-image: url(assets.$icon_youtube);
			}
			&[src*='eaeac24163b35f7526704a3d9b3c7722'] {
				mask-image: url(assets.$icon_spotify);
			}
			&[src*='94dc6f30a819026fa295d85f1f72b4ab'] {
				mask-image: url('/assets/806953fe1cc616477175cbcdf90d5cd3.png');
			}
			&[src*='7bab4490382024b0c8c29b5378eeaf8f'] {
				mask-image: url('/assets/7bab4490382024b0c8c29b5378eeaf8f.svg');
			}
		}
		a {
			font-size: var(--font-size);
			margin-top: var(--spacing-third);
			width: 100%;
			display: block;
			position: relative;
			overflow: hidden;
			text-overflow: ellipsis;
			border-top: 1px solid var(--base-border);
			padding-top: var(--spacing-half);
			margin-top: var(--spacing);
			line-height: normal;
			svg {
				display: none;
			}
			&::after {
				content: attr(href);
				width: 100%;
				white-space: nowrap;
			}
		}
	}

	// Activity
	.headerText-3g1XK9 {
		color: var(--text-normal);
		font-size: var(--font-size-md);
		font-weight: var(--font-weight-semibold);
		line-height: normal;
		text-transform: none;
		margin-bottom: var(--spacing-half);
	}
	.userProfileActivity-sal5no {
		padding: var(--spacing-double);
		& + .userProfileActivity-sal5no {
			padding-top: 0;
		}
	}
	.bodyNormal-250CQK {
		display: grid;
		grid-template-columns: 56px 1fr;
		grid-gap: var(--spacing);
	}
	.assetsLargeImageActivityFeed-3zBude,
	.assetsLargeImageActivityFeedXbox-3gGXXV,
	.assetsLargeImageProfile-1TX9jP {
		width: 56px;
		height: 56px;
	}
	.assetsSmallImageActivityFeed-2e1l_G,
	.assetsSmallImageProfile-NPfu8b {
		width: 24px;
		height: 24px;
	}
	.content-tXPNDw {
		margin-left: 0;
	}
	.actionsProfile-31n1ca {
		margin-left: 0;
		grid-column: 1/3;
	}
	.textRow-1sENuL {
		font-size: var(--font-size);
	}
	.spotifyIcon-2J9kSv {
		top: 0;
		right: var(--spacing-double);
	}

	.buttonsWrapper-2ARRp1 {
		margin-top: 0;
		gap: 12px;
		& > .button-TGAkj4 {
			margin: 0;
		}
		.buttonSize-dIiz43 {
			height: var(--input-height);
			min-height: var(--input-height);
		}
		&:empty {
			padding: 0;
		}
	}
	.button-TGAkj4.iconButtonSize-1-pz2t {
		max-width: unset;
		.contents-3ca1mk {
			display: flex;
		}
	}

	.listScroller-entkMk,
	.infoScroller-1QMpon {
		padding: var(--banner-height) 0 0 !important;
		& > div {
			position: relative;
			z-index: 1;
			&[style='position: absolute; pointer-events: none; min-height: 0px; min-width: 1px; flex: 0 0 auto; height: 20px;'] {
				display: none;
			}
		}
		&::-webkit-scrollbar {
			display: none;
		}
		&::before {
			content: '';
			position: absolute;
			top: calc(var(--banner-height) - 1px);
			left: 0;
			height: var(--banner-height);
			width: 100%;
			border-top: 1px solid var(--base-border);
			background: var(--background);
			z-index: 0;
		}
	}
	.listRow-2nO1T6 {
		margin: 0;
		border-radius: 0;
		background: var(--background);
		cursor: var(--cursor);
		padding: var(--spacing);
		&:hover {
			background: var(--background-modifier-hover);
		}
		&:active {
			background: var(--background-modifier-active);
		}
	}
	.listAvatar-2bU5Uh {
		width: 24px;
		height: 24px;
		border-radius: var(--border-radius);
		border: 1px solid var(--base-border);
		margin-right: var(--spacing);
	}
	.listRowContent-PEmSWj {
		display: flex;
		align-items: center;
	}
	.listName-PwbeHL {
		font-size: var(--font-size);
		font-weight: var(--font-weight-normal);
	}
	.guildNick-fe8oPN {
		font-weight: var(--font-weight-normal);
		margin-left: var(--spacing);
	}
}
