// Mobile first design
.new-section-wizard {
	margin: 0;
	padding: 0;

	.options {
		margin: 10px;
		padding: 0;

		> .preset-option {
			cursor: pointer;
			display: block;
			white-space: nowrap;
			padding: 0.375rem 0.75rem;
			margin: 10px;
			background-color: map-get($gray-shades, 100);
			border: 1px solid map-get($gray-shades, 200);
			overflow-x: hidden;
			text-overflow: ellipsis;
			@extend .no-select;
			@include border-radius(2px);
			@include button-shadow-light();

			.icon {
				text-align: center;
				display: inline-block;
				width: 40px;
				margin-right: 10px;

				> .img {
					text-align: center;
					display: inline-block;
					height: 30px;
					width: 30px;
				}
			}

			> .name {
				display: inline-block;
				font-size: 1.1rem;
				font-weight: 500;
				color: map-get($gray-shades, 800);
				letter-spacing: 0.5px;
				margin-top: 6px;
			}

			&:hover {
				background-color: map-get($yellow-shades, 200);
				border: 1px solid map-get($yellow-shades, 300);
			}
		}

		> .block-option {
			cursor: pointer;
			display: block;
			white-space: nowrap;
			padding: 0.375rem 0.75rem;
			margin: 10px;
			background-color: map-get($gray-shades, 100);
			border: 1px solid map-get($gray-shades, 200);
			@extend .no-select;
			@include border-radius(2px);
			@include button-shadow-light();

			> .name {
				font-size: 1.1rem;
				font-weight: 500;
				color: map-get($green-shades, 800);
				letter-spacing: 0.5px;
				@extend .text-truncate;
			}

			> .desc {
				color: map-get($gray-shades, 800);
				font-size: 0.9rem;
				font-weight: 300;
				@extend .text-truncate;
			}

			&:hover {
				background-color: map-get($yellow-shades, 200);
				border: 1px solid map-get($yellow-shades, 300);
			}
		}
	}

	// Desktop sizing
	@media (min-width: $display-break-2) {
		.options {
			> .preset-option,
			> .block-option {
				display: inline-block;
				width: 300px;
			}
		}
	}
}
