$white: #fff;
$gray: #ccc;
$darkgray: #6c6c6c;
$titlegray: #797874;
$shadow: #656565;
$textgray: #555;
$darkergray: #2c2c2c;
$black: #000;
$blue: #005293;
$red: #ae2118;
$arialFont: Arial, Helvetica, sans-serif;
$tablet: '(min-width: 768px)';
$tabletLarge: '(min-width: 1024px)';

/* #page-header it just included for the examples */
#page-header {
	display: block;
	float: left;
	max-width: 800px;

	.bh-sl-title {
		color: $titlegray;
		font: normal 20px/1.4 $arialFont;

		@media #{$tabletLarge} {
			font-size: 30px;
		}
	}
}

/* Infowindow Roboto font override */
.gm-style {
	div, span, label, a {
		font-family: $arialFont;
	}
}

.GMAMP-maps-pin-view {
	color: $black;
	font: 400 15px/1 $arialFont;
}

/* InfoBubble font size */
.bh-sl-window {
	font-size: 13px;
}

.bh-sl-error {
	clear: both;
	color: $red;
	float: left;
	font-weight: bold;
	padding: 10px 0;
	width: 100%;
}

/* Avoid image issues with Google Maps and CSS resets */
.bh-sl-map-container img {
	border-radius: 0 !important;
	box-shadow: none !important;
	max-height: none !important;
	max-width: none !important;
}

.bh-sl-container {
	box-sizing: border-box;
	color: $textgray;
	float: left;
	font: normal 14px/1.4 $arialFont;
	padding: 0 15px;
	width: 100%;

	/* Avoid issues with Google Maps and CSS frameworks */
	> * {
		box-sizing: content-box !important;
	}

	.bh-sl-form-container {
		clear: left;
		float: left;
		margin-top: 15px;
		width: 100%;
	}

	.form-input {
		float: left;
		margin-top: 3px;
		width: 100%;

		// Tablet up
		@media #{$tablet} {
			width: auto;
		}

		label {
			display: block;
			font-weight: bold;
			width: 100%;

			// Tablet up
			@media #{$tablet} {
				display: inline-block;
				width: auto;
			}
		}

		input, select {
			box-sizing: border-box;
			border: 1px solid $gray;
			border-radius: 4px;
			font: normal 14px/1.4 $arialFont;
			margin: 15px 0;
			padding: 6px 12px;
			width: 100%;
			-webkit-border-radius: 4px;

			// Tablet up
			@media #{$tablet} {
				width: auto;
				margin: 0 15px 0 10px;
			}
		}
	}

	.loc-alt-dist {
		display: none;
	}

	button {
		background: darken( $blue, 5% );
		border: none;
		border-radius: 4px;
		color: $white;
		cursor: pointer;
		float: left;
		font: bold 14px/1.4 $arialFont;
		margin-top: 3px;
		padding: 6px 12px;
		white-space: nowrap;
		-webkit-border-radius: 4px;
	}

	.bh-sl-loading {
		background: url(../img/ajax-loader.gif) no-repeat;
		float: left;
		margin: 4px 0 0 10px;
		height: 16px;
		width: 16px;
	}

	.bh-sl-filters-container {
		clear: both;
		float: left;
		margin: 15px 0;
		width: 100%;

		.bh-sl-filters {
			float: left;
			list-style: none;
			margin: 0 100px 0 0;
			padding: 0;

			li {
				clear: left;
				display: block;
				float: left;
				margin: 5px 0;
				width: 100%;

				label {
					display: inline;
					vertical-align: text-bottom;
				}

				input {
					display: block;
					float: left;
					margin-right: 8px;
				}

				select {
					box-sizing: border-box;
					border: 1px solid $gray;
					border-radius: 4px;
					font: normal 14px/1.4 $arialFont;
					padding: 6px 12px;
					-webkit-border-radius: 4px;
				}
			}
		}
	}

	.bh-sl-map-container {
		clear: left;
		float: left;
		margin-top: 27px;
		width: 100%;

		// Tablet large up
		@media #{$tabletLarge} {
			margin-bottom: 60px;
		}

		a {
			color: $blue;
			text-decoration: none;

			&:active,
			&:focus,
			&:hover {
				text-decoration: underline;
			}
		}
	}

	.bh-sl-loc-list {
		font-size: 13px;
		height: 530px;
		overflow-x: auto;
		width: 100%;

		// Tablet large up
		@media #{$tabletLarge} {
			width: 30%;
		}

		ul {
			display: block;
			clear: left;
			float: left;
			width: 100%;
			list-style: none;
			margin: 0;
			padding: 0;

			li {
				border: 1px solid $white; /* Adding this to prevent moving li elements when adding the list-focus class*/
				box-sizing: border-box;
				clear: left;
				cursor: pointer;
				display: block;
				float: left;
				width: 100%;
			}
		}

		.list-label {
			background: darken( $blue, 20% );
			border-radius: 15px;
			color: $white;
			display: block;
			float: left;
			font-weight: bold;
			margin: 10px 0 0 15px;
			padding: 4px 7px;
			text-align: center;
			width: auto;
			min-width: 13px;
		}

		.list-details {
			float: left;
			margin-left: 6px;
			width: 80%;

			.list-content {
				padding: 10px;
			}

			.loc-dist {
				color: $darkgray;
				font-weight: bold;
				font-style: italic;
			}
		}

		.list-focus {
			border: 1px solid rgba(0, 82, 147, 0.4);
			transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
		}

		.bh-sl-close-directions-container {
			height: 20px;
			position: relative;
			width: 100%;

			.bh-sl-close-icon {
				right: 6px;
				top: 0;
			}
		}

		.bh-sl-directions-panel {
			margin: 0 2%;

			/* Avoid issues with table-layout */
			table {
				table-layout: auto;
				width: 100%;
			}

			table, td {
				vertical-align: middle;
				border-collapse: separate;
			}

			td {
				padding: 1px;
			}

			.adp-placemark {
				margin: 10px 0;
				border: 1px solid #c0c0c0;
			}

			.adp-marker {
				padding: 3px;
			}
		}

		.bh-sl-noresults-title {
			font-weight: bold;
			margin: 15px;
		}

		.bh-sl-noresults-desc {
			margin: 0 15px;
		}
	}

	.loc-name {
		/* Picked up by both list and infowindows */
		font-size: 15px;
		font-weight: bold;
	}

	.bh-sl-map {
		float: left;
		height: 530px;
		width: 100%;

		// Tablet large up
		@media #{$tabletLarge} {
			width: 70%;
		}
	}

	.bh-sl-pagination-container {
		clear: both;

		ol {
			list-style-type: none;
			margin: 0;
			padding: 10px 0;
			text-align: center;

			li {
				display: inline-block;
				margin: 0 4px;
			}

			a {
				box-shadow: none;
				color: $blue;
				display: inline-block;
				font: bold 14px $arialFont;
				padding: 10px;
				text-decoration: underline;
			}

			.bh-sl-current {
				color: $textgray;
				cursor: auto;
				text-decoration: none;

				a {
					color: $textgray;
					pointer-events: none;
					text-decoration: none;
				}
			}
		}
	}
}

/* Modal window */
.bh-sl-overlay {
	background: url(../img/overlay-bg.png) repeat;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10000;

	.bh-sl-modal-window {
		background: $white;
		border-radius: 10px;
		box-shadow: 0 0 10px #656565;
		position: absolute;
		left: 50%;
		margin-left: -460px; /* width divided by 2 */
		margin-top: 60px;
		height: 620px;
		width: 920px;
		z-index: 10010;

		.bh-sl-map-container {
			margin-top: 50px; /* increase map container margin */
		}

		.bh-sl-modal-content {
			float: left;
			padding: 0 1%; /* there's already a margin on the top of the map-container div */
			width: 98%;
		}

		.bh-sl-close-icon {
			right: 22px;
			top: 13px;
		}
	}
}

.bh-sl-close-icon {
	cursor: pointer;
	height: 24px;
	position: absolute;
	width: 24px;

	&:after,
	&:before {
		background: $gray;
		content: '';
		display: block;
		height: 24px;
		margin: -3px 0 0 -1px;
		position: absolute;
		bottom: 0;
		left: 50%;
		right: 3px;
		top: 3px;
		width: 3px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	&:hover:after,
	&:hover:before {
		background: darken($gray, 10%);
	}

	&:before {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
}
