p5.js-web-editor/styles/components/_preferences.scss

.preferences {
	background-color: $light-preferences-background-color;
	display: none;
	font-family: 'Montserrat', sans-serif;
	padding-bottom: #{20 / $base-font-size}rem;
	&--selected {
		display: flex;
		flex-direction: column;
	}
}

.preferences__exit-button {
	@extend %preferences-button;
	margin-left: auto;
	background-color: $light-preferences-background-color;

	&:hover {
		background-color: $light-preferences-background-color;
	}
}

.preference__plus-button {
	@extend %preferences-button;
	margin-right: auto;
}

.preference__minus-button {
	@extend %preferences-button;
}

.preferences__heading {
	display: flex;
	flex-direction: rows;
	margin-left: #{20 / $base-font-size}rem;
}
.preferences__title {
	margin: 0 0;
	font-size: #{$menu-font-size}px;
	font-weight: 700;
	height: #{44 / $base-font-size}rem;
	line-height: #{44 / $base-font-size}rem;
}

.preference {
	margin: 0 #{20 / $base-font-size}rem;
}

.preference__title {
	margin: 0 0;
	font-size: #{$base-font-size}px;
	font-weight: 400;
	height: #{44 / $base-font-size}rem;
	line-height: #{44 / $base-font-size}rem;
}

.preference__value {
	@extend %button;
	border-radius: 0%;
	border: 2px solid $light-preferences-button-color;
	line-height: #{44 / $base-font-size}rem;
	margin: 0 #{20 / $base-font-size}rem;
}