SettingsModal
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	font-family: Poppins;
	z-index: 20;
	display: flex;
	opacity: 0;
	align-items: center;
	justify-content: center;
	transition: opacity 0.16s ease;

	&.visible
	{
		opacity: 1;
		pointer-events: all;

		.settings-modal
		{
			opacity: 1;
			transform: translateY( 0 ) scale( 1 );
		}
	}

	.modal-backdrop
	{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba( 4, 5, 7, 0.66 );
		z-index: 0;
	}

	.settings-modal
	{
		position: relative;
		width: 760px;
		height: 360px;
		background-color: #f2f4f7;
		border-radius: 3.982vh;
		box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.28 );
		overflow: visible;
		opacity: 0;
		transform: translateY( 12px ) scale( 0.985 );
		transition: opacity 0.18s ease, transform 0.18s ease;
		z-index: 1;
	}

	.settings-title
	{
		position: absolute;
		left: 0;
		top: 34px;
		width: 760px;
		height: 34px;
		align-items: center;
		justify-content: center;
		font-size: 25px;
		font-weight: 400;
		line-height: 32px;
		color: #20242a;
		text-align: center;
		white-space: nowrap;
		z-index: 3;
	}

	.settings-subtitle
	{
		position: absolute;
		left: 48px;
		top: 72px;
		width: 664px;
		height: 24px;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: 400;
		line-height: 22px;
		color: rgba( 32, 36, 42, 0.64 );
		text-align: center;
		white-space: nowrap;
		z-index: 3;
	}

	.dialog-body
	{
		position: absolute;
		left: 48px;
		top: 128px;
		width: 664px;
		height: 184px;
		z-index: 3;
	}

	.toggle-list
	{
		width: 100%;
		flex-direction: column;
		gap: 0;
		border-top: 1px solid rgba( 35, 39, 46, 0.2 );
		border-bottom: 1px solid rgba( 35, 39, 46, 0.2 );
	}

	.toggle-row
	{
		position: relative;
		width: 664px;
		height: 92px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px;
		background-color: transparent;
		border-radius: 0;
		border: 0;
		cursor: pointer;
		overflow: visible;
	}

	.settings-row-divider
	{
		width: 664px;
		height: 1px;
		background-color: rgba( 35, 39, 46, 0.2 );
		flex-shrink: 0;
		z-index: 1;
	}

	.toggle-row.focus
	{
		background-color: rgba( 255, 255, 255, 0.34 );
	}

	.toggle-name
	{
		width: 520px;
		height: 92px;
		align-items: center;
		font-size: 24px;
		font-weight: 400;
		line-height: 32px;
		color: #20242a;
		white-space: nowrap;
		z-index: 3;
	}

	.toggle-ring
	{
		position: absolute;
		left: -4px;
		top: -4px;
		width: 672px;
		height: 100px;
		border-radius: 10px;
		overflow: visible;
		z-index: 2;
		pointer-events: none;
	}

	.toggle-switch
	{
		position: relative;
		width: 64px;
		height: 38px;
		border-radius: 19px;
		background-color: #b9bdc3;
		align-items: center;
		justify-content: flex-start;
		padding-left: 4px;
		z-index: 3;
		transition: background-color 0.16s ease;
	}

	.toggle-switch.on
	{
		background-color: #0074df;
	}

	.toggle-knob
	{
		position: absolute;
		left: 4px;
		top: 4px;
		width: 30px;
		height: 30px;
		border-radius: 15px;
		background-color: #ffffff;
		box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.22 );
		transition: left 0.16s ease, box-shadow 0.16s ease;
	}

	.toggle-switch.on .toggle-knob
	{
		left: 30px;
		box-shadow: 0 2px 10px rgba( 0, 116, 223, 0.32 );
	}
}