// Options List
// -------------------------
.optionsmenu__list {
	@include menu-mixin;
	justify-content: space-between;
	counter-reset: breadcrumbCounter;
	margin-bottom: $m-xs;
	justify-content: flex-start;

	.optionsmenu__item {
		margin-bottom: 0;
	}

	&.columns-1{
		flex-direction: column;
	}

	&.columns-4, &.columns-2 {
		flex-wrap: wrap;
	}

	@include media-breakpoint-up(sm) {
		&.columns-4 {
			.optionsmenu__item {
				min-width: 25%;
				flex-basis: 25%;
			}
		}
		&.columns-2 {
			.optionsmenu__item {
				min-width: 50%;
				flex-basis: 50%;
			}
		}
		&.columns-auto {
			.optionsmenu__item {
				padding-right: $m-sm;
			}
		}
	}
	@include media-breakpoint-only(xs) {
		&.columns-4,
		&.columns-auto {
			flex-wrap: wrap;
			.optionsmenu__item {
				min-width: 50%;
				flex-basis: 50%;
			}
		}
		&.columns-2 {
			flex-wrap: wrap;
			.optionsmenu__item {
				min-width: 50%;
				flex-basis: 50%;
			}
		}
	}

}

	.optionsmenu__label {
		display: flex;
		align-items: center;
		padding: $m-xs 0;

		input {
			position: absolute;
			left: -1000em;
		}
		.fakeinput {
			$box: 1rem;
			content: '';
			display: flex;
			justify-content: center;
			align-items: center;
			width: $box;
			height: $box;
			margin-right: $m-xs;
			color: $white;
			border: solid $border-width $primary;
			transition: 200ms background ease-in-out;
		}

		input[type='radio'] ~ .fakeinput {
			border-radius: 50%;
		}
		input[type='checkbox'] ~ .fakeinput {
			border-radius: 3px;
		}
		&:hover {
			color: $secondary;
			.fakeinput {
				border-color: $secondary;
			}
		}
		input:checked {
			~ .fakeinput {
				@extend .box-gradient;
			}
			~ .optionsmenu__icon {
				border-color: $primary;
			}
		}


		// Layout icons
		.optionsmenu__icon {
			background: no-repeat center center;
			background-size: 60px;
			width: 80px;
			height: 80px;
			border: solid $border-width transparent;
			border-radius: 3px;
			margin-right: $m-xs;
		}

		input[value='row'] ~ .optionsmenu__icon {
			background-image: url('../svg/row_mode_in_article.svg');
		}
		input[value='grid'] ~ .optionsmenu__icon {
			background-image: url('../svg/grid_mode_after_article.svg');
		}
		input[value='pinned'] ~ .optionsmenu__icon {
			background-image: url('../svg/pin_mode_page_bottom.svg');
		}
	}