/*
*
* Panels
*/

//
// Panel 1
//
.panel-1 {
}

.panel-1-toggle {
	@include reset-button;
	display: inline-flex;
	align-items: center;
	color: $body-color;
	vertical-align: baseline;
	transition: .22s;

	&:hover {
		color: $gray-1;
	}

	> * + * {
		margin-left: 5px;
	}

	&.active {
		.panel-1-toggle-icon {
			&::before {
				opacity: 0;
				visibility: hidden;
			}

			&::after {
				opacity: 1;
				visibility: visible;
			}
		}
	}
}

.panel-1-toggle-icon {
	position: relative;
	display: block;
	width: 20px;
	font-size: 18px;
	color: $primary;

	&::before,
	&::after {
		font-family: 'Material Design Icons';
		position: absolute;
		top: 50%;
		transform: translate3d(0, -50%, 0);
		left: 0;
		transition: .22s;
	}

	&::before {
		content: '\f504';
		opacity: 1;
		visibility: visible;
	}

	&::after {
		content: '\f465';
		opacity: 0;
		visibility: hidden;
	}
}

* + .panel-1 { margin-top: 18px; }
* + .panel-1-content { margin-top: 12px; }

.panel-1-content {
	display: none;

	> * {
		flex-grow: 1;
		padding: 0 15px;
		min-width: 190px;

		&:first-child {
			padding-left: 0;
		}

		&:last-child {
			padding-right: 0;
		}
	}

	&.active {
		display: flex;
	}
}

//
// Panel 2
//
.panel-2 {
	position: relative;
}

.panel-2-toggle {
	padding: 5px;
	min-width: $form-input-height;
	min-height: $form-input-height;

	.icon {
		font-size: 24px;
	}
}

.panel-2-content {
	position: absolute;
	right: 0;
	left: 20px;
	top: 0;
	bottom: auto;
	z-index: 2;
	padding-top: 31px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	background: $white;
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
	transition: .22s;

	&.active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.rd-range-outer + .rd-range-outer { margin-top: 25px; }
}

.panel-2-close {
	position: absolute;
	top: 0;
	right: 0;
	padding: 5px;
	font-size: 18px;
	line-height: 17px;
}

.panel-2-content-inner {
	position: relative;
	z-index: 1;
	padding: 0 40px 20px 10px;
	transition: .33s;
}

.rd-navbar-static-linked {
	.panel-2-content-inner {
		overflow-y: auto;
		overflow-x: hidden;
		max-height: calc(100vh - 350px);
	}
}

@include media-breakpoint-up(sm) {
	.panel-2-content-inner {
		padding: 25px 40px 50px 25px;
	}
}

@include media-breakpoint-up(md) {
	.panel-2-content-inner {
		padding: 25px 40px 70px 35px;

		.rd-range-outer + hr { margin-top: 40px; }
	}
}

@include media-breakpoint-up(lg) {
	.panel-2-content {
		
	}
}

//
// Panel 3
//
$accordion-corporate-header-padding: 21px 70px 21px 32px;
$accordion-corporate-content-padding: 15px 44px 20px nth($accordion-corporate-header-padding, 4);
$accordion-corporate-arrow-background: $secondary;

.panel-3 {
	position: relative;
	border: 2px solid $gray-12;
	&.active {
		border-color: transparent;
		.panel-3-header {
			pointer-events: none;
		}

		.panel-3-title {
			opacity: 0;
			visibility: hidden;
			transform: translateY(-5px);
		}

		.panel-3-content {
			opacity: 1;
			visibility: visible;

			> * {
				transform: translateY(0);
			}
		}
	}
}

.panel-3-title,
.panel-3-content {
	background: transparent;
}

.panel-3-header {
	padding: 11px 55px 11px 10px; 
	cursor: pointer;
}

.panel-3-title {
	margin: 0;
	font-family: $font-family-sec;
	font-size: 14px;
	font-weight: 600;
	border-bottom: 0;
	transition: .22s;
}

.panel-3-toggle {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 10px;
	z-index: 12;
	width: 30px;
	height: 30px;
	cursor: pointer;
	line-height: 30px;
	border-radius: 50%;
	background: $accordion-corporate-arrow-background;
	transition: .33s all ease;
	pointer-events: auto;

	&::before,
	&::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 4;
		background: $primary-lighten;
	}

	&::before {
		width: 14px;
		height: 2px;
		right: 28px;
	}

	&::after {
		width: 2px;
		height: 14px;
		right: 34px;
		opacity: 1;
		visibility: visible;
	}

	.active & {
		&::after {
			opacity: 0;
			visibility: visible;
		}
	}
}

.panel-3-content {
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	z-index: 10;
	padding: 15px nth($accordion-corporate-header-padding, 2) 15px 15px;
	pointer-events: none;
	border: 2px solid $gray-12;
	opacity: 0;
	visibility: hidden;
	transition: .22s;
	background: rgba($primary-darken, .95);

	> * {
		transform: translateY(5px);
		pointer-events: auto;
		transition: .22s;
	}
}

%context-dark {
	.panel-3,
	.panel-3-content {
		border-color: $lightblue;
	}

	.panel-3 {
		.panel-3-title {
			color: $white;
		}

		.panel-3-toggle {
			background: $white;

			&::before,
			&::after {
				color: #5b76a2;
			}
		}

		&.active {
			border-color: transparent;
		}
	}
}

@include media-breakpoint-up(sm) {
	.panel-3-content {
		background-color: transparent;
	}
}

//
// Panel 4
//
.panel-4 {
	z-index: 10;
	//opacity: 0;
	//visibility: hidden;
	pointer-events: none;
	transition: .55s;
	transform: translateY(100%);

	&,
	.google-map-container {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.google-map {
		height: 100%;
		background: $gray-16;
	}

	&.active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}
}

.panel-4-outer {
	position: relative;
}

.panel-4-toggle {
	@include reset-button;
	display: inline-flex;
	align-items: center;
	font: 600 12px/18px $font-family-sec;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: .22s;

	&,
	&:active,
	&:focus {
		color: $primary;
	}

	&:hover {
		color: $gray-1;
	}

	.icon {
		margin-right: 4px;
		font-size: 18px;
	}
}

%context-dark {
	.panel-4-toggle {
		&,
		&:active,
		&:focus {
			color: $white;
		}

		&:hover {
			color: $secondary;
		}
	}
}

.panel-4-close {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 11;
	transform: translate3d(-50%, 0, 0);
	@include reset-button;
	width: 40px;
	height: 40px;
	font-size: 22px;
	color: $gray-1;
	background: $secondary;
	transition: .33s;

	&:hover {
		color: $white;
		background: $primary;
	}
}