@use '@discordstyles/classes' as *;

#{cls('mount')} {
	#{cls('app.layer')} {
		top: var(--window-padding);
		right: var(--window-padding);
		bottom: var(--window-padding);
		left: var(--window-padding);
		padding-top: 0;
		overflow: hidden;
		border-radius: var(--window-roundness);
	}

	// Container shadow
	.subtitleContainer_f75fb0::before {
		content: '';
		position: absolute;
		height: 5px;
		width: 100%;
		background: linear-gradient(rgb(0, 0, 0, 0.2), transparent);
		z-index: 1;
		top: 48px;
		pointer-events: none;
		user-select: none;
		border: none;
	}

	.container__9293f, .container__133bf {
		border: none;
	}

	// Bot tags
	.botTagRegular__82f07 {
		background: var(--gradient);
		color: var(--text-normal);
	}
	.botText__82f07 {
		font-weight: 600;
	}
	.botTagInvert-18-95s {
		color: rgb(var(--gradient-primary));
		.botText__82f07 {
			font-weight: bold;
		}
	}
}

//Globally fix scrollerbase getting its overflow set to hidden from the backgrounds
//we need a really powerful selector for this
html body #app-mount .scrollerBase_d125d2 {
	overflow-y: scroll !important;
}

::selection {
	background: rgb(var(--gradient-primary));
	color: var(--text-normal);
}

// Update notice
#{cls('mount app.inner')}::before {
	content: 'Your version of Frosted Glass is outdated. Please redownload';
	white-space: pre-wrap;
	display: var(--update-notice-1, block);
	color: #fff;
	text-align: center;
	padding: 10px 0;
	box-sizing: border-box;
	background: rgb(var(--discord-blurple), 0.7);
	text-shadow: 0 2px 3px rgb(0, 0, 0, var(--text-shadow));
}

//Tell people their native theme is wrong
html:not(.theme-dark) #{cls('mount app.inner')}::before,
html.custom-theme-background #{cls('mount app.inner')}::before {
	content: 'Unsupported native theme selected, please change your theme to Dark in Settings -> Appearance';
	white-space: pre-wrap;
	display: block;
	color: black;
	text-align: center;
	padding: 10px 0;
	box-sizing: border-box;
	background: red;
	text-shadow: none;
	font-weight: 700;
	font-size: larger;
	z-index: 9000;
}