// ==========================================================================
// Select Theme
// ==========================================================================

.themes-box {
	max-width: 960px;
	margin: 0 auto;
	border: 6px solid $light-gray;
	background: $light-gray;
	overflow: hidden;
}

.theme {
	float: left;
	padding-top: 22%;
	width: 50%;
	background: #fff;
	border: 6px solid $light-gray;
	transition: box-shadow .2s ease-in-out;
	cursor: pointer;

	&:nth-child(4n-2),
	&:nth-child(4n-1) {
		background: #ccc;
	}
	&:hover {
		box-shadow: inset 0 0 0 4px $medium-blue;
	}
	@include breakpoint(phablet) {
		float: none;
		padding-top: 46%;
		width: 100%;
	}
}

.theme-buttons {
	margin: 0 13px 13px 0;
	text-align: right;

	.button--large {
		box-shadow: 0 2px 3px rgba(0,0,0,.2);
	}
	.small-icon {
		font-size: 15px;
		margin: 0 8px 0 -3px;
	}
	.fa-external-link {
		position: relative;
		top: 1px;
	}
}