SettingsPanel {
	width: 100%;
	flex-direction: column;

	.settings-tabs {
		width: 100%;
		gap: 8px;
		margin-bottom: 12px;
	}

	.settings-tab {
		flex-grow: 1;
		height: 36px;
		align-items: center;
		justify-content: center;
		font-size: 11px;
		letter-spacing: 2px;
		background-color: rgba( 255, 255, 255, 0.035 );
		border: 1px solid rgba( 255, 255, 255, 0.10 );
		cursor: pointer;
		pointer-events: all;
		&.selected, &:hover {
			background-color: rgba( 255, 255, 255, 0.12 );
		}
	}

	.settings-list {
		width: 100%;
		flex-direction: column;
		gap: 10px;
	}

	.setting-row {
		width: 100%;
		min-height: 82px;
		padding: 15px 16px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		background-color: rgba( 255, 255, 255, 0.04 );
		border: 1px solid rgba( 255, 255, 255, 0.10 );
	}

	.setting-copy {
		flex-grow: 1;
		flex-direction: column;
	}

	.setting-name {
		font-size: 14px;
		letter-spacing: 2px;
		font-weight: bold;
	}

	.setting-description {
		margin-top: 5px;
		max-width: 560px;
		font-size: 12px;
		font-weight: normal;
		opacity: 0.55;
	}

	.setting-control {
		min-width: 190px;
		height: 44px;
		flex-direction: row;
		align-items: stretch;
		border: 1px solid rgba( 255, 255, 255, 0.14 );
		background-color: rgba( 0, 0, 0, 0.24 );
	}

	.setting-step {
		width: 44px;
		align-items: center;
		justify-content: center;
		font-size: 22px;
		cursor: pointer;
		pointer-events: all;

		&:hover {
			background-color: rgba( 255, 255, 255, 0.14 );
		}
	}

	.setting-value {
		flex-grow: 1;
		align-items: center;
		justify-content: center;
		font-size: 14px;
	}

	.setting-cycle {
		min-width: 190px;
		height: 44px;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba( 255, 255, 255, 0.14 );
		background-color: rgba( 255, 255, 255, 0.05 );
		cursor: pointer;
		pointer-events: all;
		font-size: 13px;
		letter-spacing: 2px;

		&:hover {
			background-color: rgba( 255, 255, 255, 0.14 );
		}
	}

	.settings-panel-actions {
		width: 100%;
		margin-top: 14px;
		justify-content: flex-end;
	}

	.settings-reset {
		min-width: 190px;
		min-height: 42px;
		padding: 10px 16px;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba( 255, 255, 255, 0.12 );
		background-color: rgba( 255, 255, 255, 0.035 );
		cursor: pointer;
		pointer-events: all;
		font-size: 11px;
		letter-spacing: 2px;
		opacity: 0.7;

		&:hover {
			opacity: 1;
			background-color: rgba( 255, 255, 255, 0.10 );
		}
	}
}