@use '@discordstyles/classes' as *;

#{cls('mount')} {
	//#region Settings
	#{cls('settings.content')} {
		background: rgb(0, 0, 0, var(--middle-brightness));
	}

	#{cls('settings.scroller')},
	#{cls('settings.sidebar.scroller')},
	#{cls('settings.sidebar.wrapper')} {
		background: var(--background-primary);
	}
	//#endregion Settings

	//#region Audit log
	#{cls('settings.server.auditLog')} {
		border: none;
		border-radius: 3px;
		overflow: hidden;
	}

	#{cls('settings.server.auditLogHeader')} {
		background: var(--background-secondary);
	}

	#{cls('settings.server.auditLogTimestamp')} {
		color: var(--text-muted);
	}

	#{cls('settings.server.auditLogChangeDetails')} {
		background: var(--background-secondary);
	}
	//#endregion Audit log

	//#region Header from edit role permissions
	#{cls('settings.server.roleEditPermissionsHeader')} {
		//Its not the most beautiful but the way the padding is setup we got very few options to make this readable
		//it still beats being invisible and overlapping
		border-radius: 5px;
		background-clip: content-box;
		background-color: var(--background-secondary);
		clip-path: content-box;

		&::before{
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			backdrop-filter: blur(var(--background-image-blur));
			z-index: -1;
		}

		& > * {
			margin-left: 10px;
			margin-right: 10px;
		}

		#{cls('settings.server.roleEditPermissionsTitleContainer')} {
			margin-top: 10px;
		}

		#{cls('settings.server.roleEditPermissionsSearchBarContainer')} {
			margin-bottom: 10px;
		}
	}
	//#endregion Header from edit role permissions
}
