@use '../mixins';
@use '../classes' as *;

#{cls('mount')} {
	#{cls('popout.user.outer')} {
		box-shadow:
			0 0 0 1px var(--border-high),
			var(--shadow-flyout);
		padding: 0;
		#{cls('profile.innerNonPremium profile.bannerWrapper')} {
			min-height: 120px !important;
			foreignObject {
				y: -30;
				mask: none;
			}
		}
		#{cls('popout.user.avatarNormal')} {
			position: absolute;
			top: 16px;
			right: 16px;
			left: unset;
			background: hsl(0 0% 100% / 0.2);
			border-color: transparent;
			box-shadow: 0 0 0 8px hsl(0 0% 100% / 0.2);
			circle[fill='black'] {
				opacity: 0 !important;
			}
		}
		#{cls('profile.overlay')} {
			overflow: visible;
			position: static;
			z-index: 2;
			margin-top: 0;
			& > #{cls('popout.user.section')}:first-of-type {
				padding: 0;
				position: absolute;
				top: 16px;
				left: 16px;
			}
			& > #{cls('popout.user.divider')} {
				display: none;
			}
			#{cls('popout.user.section')} {
				padding-right: 0 !important;
			}
		}
		#{cls('popout.user.badges')} {
			position: absolute;
			right: unset;
			left: 16px;
			top: 105px;
			z-index: 2;
			background: transparent;
			padding: 0;
		}
		#{cls('popout.user.badgeImage')} {
			filter: drop-shadow(var(--profile-premium-text-shadow));
		}
		#{cls('profile.banner')} {
			mask: linear-gradient(hsl(0 0% 0% / 0.5), transparent 90%);
			position: absolute;
			width: 100%;
			height: 120px;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			max-width: unset;
			pointer-events: none;
			[role='button'] {
				display: none;
			}
		}
		#{cls('popout.user.nickName')} {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			max-width: 220px;
		}
		// &.theme-light #{cls('roles.role')} {

		// }
	}
	#{cls('popout.user.inner')}::before {
		content: none;
	}

	#{cls('popout.user.nameTag')} {
		line-height: normal;
		text-shadow: var(--profile-premium-text-shadow);
	}

	#{cls('popout.user.messageContainer')} {
		border: none;
		border-radius: unset;
	}
}
