@use '../assets';

#app-mount .layer-86YKbF:not(.baseLayer-W6S8cY) .contentRegion-3HkfJJ {
	flex: unset;
	flex-grow: 1;
	background: transparent;
	position: static;

	// Header
	&::before {
		content: var(--i18n-settings-header);
		display: flex;
		align-items: center;
		border-bottom: 1px solid var(--base-border);
		width: 100%;
		height: 50px;
		font-size: var(--font-size-md);
		font-weight: var(--font-weight-semibold);
		color: var(--text-normal);
		position: absolute;
		top: 0;
		left: 0;
		padding: var(--spacing-double);
		box-sizing: border-box;
		background: var(--background);
		z-index: -0;
	}
	.contentColumnDefault-3eyv5o {
		padding: var(--spacing-double);
		flex-grow: 1;
		max-width: unset;
		min-width: unset;
		display: flex;
		flex-direction: column;
		.container-3W9WIM {
			flex-grow: 1;
		}
	}

	// Streamer Mode

	.streamerModeEnabled-2q0Gft {
		.streamerModeEnabledImage-2EveVD {
			width: 520px;
			height: 200px;
			margin-bottom: calc(var(--spacing) * 5);
			background: var(--text-muted);
			mask: url(assets.$illustration_3) center/contain no-repeat;
		}
		.streamerModeEnabledBtn-2nlJTD {
			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;
			box-sizing: border-box;
			padding: 0 var(--spacing);
			border-radius: var(--button-border-radius);
			color: var(--text-normal);
			background: var(--background-light);
			border: 1px solid var(--base-border);
			box-shadow: none !important;
			display: flex;
			align-items: center;
			text-transform: none;
			margin: 0;
			&:hover {
				border: 1px solid currentColor;
				.contents-3ca1mk {
					background-image: none;
				}
			}
			&:focus {
				box-shadow: 0 0 0 1px currentColor !important;
				border: 1px solid currentColor !important;
			}
		}
	}

	// Close button
	.toolsContainer-25FL6V {
		padding-top: 0;
		width: auto;
		height: 50px;
		top: 0;
		display: flex;
		align-items: center;
		position: absolute;
		margin: 0;
		right: calc(var(--spacing) * 1.5);
	}
	.tools-kIrEGr {
		position: relative;
		.closeButton-PCZcma {
			border: none;
			width: 16px;
			height: 16px;
			flex: none;
			border-radius: 0;
			transform: none;
			background: transparent;
			svg {
				fill: transparent;
				background: var(--text-muted);
				mask: url(assets.$icon_close) center/12px no-repeat;
				g,
				path {
					display: none;
				}
				&:hover {
					background: var(--text-normal);
				}
			}
			&::after {
				content: '';
				position: fixed;
				top: 0;
				left: 0;
				width: 100vw;
				height: 100vw;
				z-index: -1;
				cursor: var(--cursor);
			}
		}
		.keybind-13vtq8 {
			display: none;
		}
	}

	// Global rules

	.note-2C4pGr {
		margin-bottom: var(--spacing-half);
	}

	h2 {
		font-weight: var(--font-weight-semibold);
		font-size: var(--font-size-md);
		color: var(--text-normal);
		margin-bottom: var(--spacing);
		line-height: unset;
		text-transform: none;
	}
	.marginBottom40-fvAlAV h5 + .children-1xdcWE .marginTop8-24uXGp.flex-1xMQg5:first-child {
		margin-top: 0;
	}
	.title-2dsDLn,
	.h3-2Gh4ka {
		font-size: var(--font-size);
		font-weight: var(--font-weight-normal);
		color: var(--text-normal);
		margin: 0;
	}
	h5 {
		font-weight: var(--font-weight-semibold);
		font-size: var(--font-size-md);
		margin-bottom: var(--spacing);
		line-height: unset;
		text-transform: none;
		&:not(.isEnabled-2qCZy8) {
			color: var(--text-normal);
		}
	}
	.row-1Tg75B {
		box-shadow: none;
	}
	.control-1fl03- {
		margin: 0;
		order: -1;
		margin-right: var(--spacing-half) !important;
	}
	.description-30xx7u {
		font-size: var(--font-size);
		font-weight: var(--font-weight-normal);
		line-height: 1.5;
		color: var(--text-muted);
	}
	.subText-1gefwV {
		color: var(--text-muted);
		font-size: var(--font-size);
		margin-top: var(--spacing-third);
	}
	.titleDefault-3GR-DE {
		cursor: var(--cursor);
	}
	.switchItem-2hKKKK {
		margin: 0;
		.description-30xx7u {
			margin-bottom: var(--spacing);
		}
	}
	.marginTop40-Q4o1tS {
		margin-top: var(--spacing-double);
	}
	.faded-Yd0FtY {
		opacity: 1;
	}

	.beta-3smTDE {
		vertical-align: middle;
		line-height: var(--line-height);
		border-radius: var(--border-radius);
		padding: var(--spacing-third) var(--spacing-half);
		color: var(--text-normal);
		background: var(--background-modifier-active);
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-normal);
		display: inline-block;
		user-select: none;
	}

	// Content dividers
	.children-1xdcWE > .marginBottom40-fvAlAV {
		margin-bottom: var(--spacing-double);
		&:last-child {
			margin-bottom: 0;
		}
	}
	.horizontal-2EEEnY > .flexChild-3PzYmX {
		&:first-child {
			margin-left: 0;
		}
		&:last-child {
			margin-right: 0;
		}
	}
	.divider-3y7HAB {
		display: none;
	}
	.divider-3wNib3 {
		margin: 0;
		padding: 0;
		border: none;
		margin-top: var(--spacing-double);
	}
	.formNotice-2nS8ey {
		.default-_FzbTF {
			font-size: var(--font-size);
			color: var(--text-muted);
		}
		h5 {
			margin-bottom: var(--spacing-third);
			color: var(--text-normal);
			font-size: var(--font-size);
		}
	}
}

// Light Mode

html.theme-light
	#app-mount
	.layer-86YKbF:not(.baseLayer-W6S8cY)
	.contentRegion-3HkfJJ
	.streamerModeEnabled-2q0Gft
	.streamerModeEnabledBtn-2nlJTD {
	&: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;
	}
}
