/* custom select styles */
.jcf-select {
	display: inline-block;
	vertical-align: top;
	position: relative;
	cursor: pointer;

	&.jcf-select-filter-select {
		background: $primary-color;
		box-shadow: 0 1px 1px rgba(1, 2, 2, 0.1);
		height: 44px;
		width: 100%;

		&.jcf-select-bg-white {
			background: $white;

			.jcf-select-text {
				color: $scarpa-flow;
			}

			.jcf-select-opener {
				&:after {
					color: $scarpa-flow;
				}
			}
		}

		&.jcf-select-bg-gray {
			background: $desert-storm;

			.jcf-select-text {
				color: $scarpa-flow;
			}

			.jcf-select-opener {
				&:after {
					color: $scarpa-flow;
				}
			}
		}

		.jcf-select-text {
			font-size: 14px;
			color: $scarpa-flow;
			font-weight: 700;
			line-height: 44px;
			padding-left: 15px;
			color: $white;
			margin-right: 35px;
		}

		.jcf-select-opener {
			width: 44px;

			&:after {
				color: $white;
				right: 15px;
				content: "\e906";
				font-size: 14px;
			}
		}
	}

	&.jcf-select-language {
		.jcf-select-opener {
			&:after {
				content: "\e903";
			}
		}

		&:hover {
			.jcf-select-opener {
				&:after {
					color: darken($white, 10%);
				}
			}
		}
	}

	&.jcf-select-sort-select {
		background: $primary-color;
		box-shadow: none;
		text-align: left;
		height: 34px;

		.jcf-select-text {
			line-height: 32px;
			color: $white;
		}

		.jcf-select-opener {
			&:after {
				color: $white;
			}
		}
	}

	&.jcf-select-trip {
		background: $trip-select-bg;
		border-radius: 4px;
		font-size: 14px;
		line-height: 20px;
		padding: 5px 10px;
		min-width: 75px;
		color: $gray;
		width: 100%;

		.jcf-select-text {
			font-size: 14px;
			line-height: 24px;
			font-style: normal;
			color: $trip-select-color;
		}

		.jcf-select-opener {
			&:after {
				right: 10px;
				color: $trip-select-color;
				font-size: 14px;
			}
		}
	}
}

.jcf-select-trip {
	.jcf-list .jcf-option {
		color: $gray;
		letter-spacing: 0.05em;
	}

	&.jcf-select-dark {
		.jcf-list .jcf-option {
			color: $gray;
		}
	}
}

.jcf-select select {
	z-index: 1;
	left: 0;
	top: 0;
}

.jcf-select .jcf-select-text {
	text-overflow:ellipsis;
	white-space: nowrap;
	overflow: hidden;
	cursor: default;
	display: block;
	font-size: 18px;
	line-height: 26px;
	margin: 0 20px 0 0;
	color: $white;
	letter-spacing: 0.05em;
	text-transform: uppercase;

	@include breakpoint-min ($screen-md) {
		font-size: 12px;
		line-height: 18px;
	}
}

.jcf-select .jcf-select-opener {
	position: absolute;
	text-align: center;
	width: 25px;
	bottom: 0;
	right: 0;
	top: 0;

	&:after {
		content: "\e906";
		position: absolute;
		right: 0;
		top: 50%;
		font: 14px/14px 'icomoon';
		margin-top: -7px;
		color: $white;
	}
}

body > .jcf-select-drop {
	position: absolute;
	margin: -1px 0 0;
	z-index: 9999;
	min-width: 90px;
}

body > .jcf-select-drop.jcf-drop-flipped {
	margin: 1px 0 0;
}

.jcf-select .jcf-select-drop {
	position: absolute;
	margin-top: 0px;
	z-index: 9999;
	top: 100%;
	left: -1px;
	right: -1px;
}

.jcf-select .jcf-drop-flipped {
	bottom: 100%;
	top: auto;
}

.jcf-select-drop .jcf-select-drop-content {
	border: 0;
}

.jcf-list-box {
	overflow: hidden;
	display: inline-block;
	border: 1px solid $submarine;
	min-width: 200px;
	margin: 0 15px;
}

.jcf-list {
	display: inline-block;
	vertical-align: top;
	position: relative;
	background: $white;
	font-size: 14px;
	line-height: 16px;
	width: 100%;
}

.jcf-list .jcf-list-content {
	vertical-align: top;
	display: inline-block;
	overflow: auto;
	width: 100%;
}

.jcf-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.jcf-list ul li {
	overflow: hidden;
	display: block;

	&:first-child {
		display: none;
	}
}

.jcf-list .jcf-overflow {
	overflow: auto;
}

.jcf-list .jcf-option {
	white-space: nowrap;
	overflow: hidden;
	cursor: default;
	display: block;
	padding: 10px;
	color: $storm-dust;
	height: 1%;
}

.jcf-list .jcf-disabled {
	background: $white !important; // We must set !important for override js inline style
	color: $gray !important; // We must set !important for override js inline style
}

.jcf-select-drop .jcf-hover,
.jcf-list-box .jcf-selected {
	background: $mercury;
	color: $black;
}

.jcf-list .jcf-optgroup-caption {
	white-space: nowrap;
	font-weight: bold;
	display: block;
	padding: 5px 10px;
	cursor: default;
	color: $black;
}
.jcf-list .jcf-optgroup .jcf-option {
	padding-left: 30px;
}

.jcf-select-drop {
	box-shadow: 0 1px 1px 0 rgba($gray, .5);

	&.jcf-select-trip {
		@include breakpoint-min ($screen-md) {
			box-shadow: none;
		}
	}

	&.jcf-select-filter-select{
		.jcf-option {
			padding-left: 15px;
			color: $white;

			&.jcf-hover {
				background: darken($primary-color, 15);
			}
		}

		.jcf-list {
			background: darken($primary-color, 5);
		}

		&.jcf-select-bg-white {
			.jcf-list {
				background: $white;
			}

			.jcf-option {
				color: $scarpa-flow;

				&.jcf-hover {
					background: darken($white, 10);
				}
			}
		}
	}

	&.jcf-select-filter-select{
		&.jcf-select-bg-gray {
			.jcf-option {
				color: $scarpa-flow;

				&.jcf-hover {
					background: darken($desert-storm, 10);
				}
			}

			.jcf-list {
				background: $desert-storm;
			}
		}
	}

	&.jcf-select-question {
		.jcf-select-drop-content {
			border: 1px solid $desert-storm;
		}

		.jcf-list {
			font-size: 14px;
			line-height: 16px;

			li:first-child {
				display: block;
			}
		}

		.jcf-option {
			padding: 10px;
		}

		@include breakpoint-min($screen-md) {
			.jcf-option {
				padding-left: 30px;
			}
		}
	}
}

.custom-checkbox {
	input {
		display: none;
	}

	input[type="checkbox"] {
		&:checked {
			+ .check-input {
				&:after {
					opacity: 1;
				}
			}
		}
	}

	.check-input {
		width: 15px;
		height: 15px;
		border: 1px solid $gray;
		display: inline-block;
		vertical-align: middle;
		position: relative;
		margin-right: 10px;

		&:after {
			content: "\e962";
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			font: 8px/13px 'icomoon';
			text-align: center;
			opacity: 0;
		}
	}

	.check-label {
		display: inline-block;
		vertical-align: middle;
	}
}

.custom-radio {
	input {
		display: none;
	}

	input[type="radio"] {
		&:checked {
			+ .check-input {
				&:after {
					opacity: 1;
				}
			}
		}
	}

	.check-input {
		width: 15px;
		height: 15px;
		border-radius: 15px;
		border: 2px solid $silver-chalice;
		display: inline-block;
		vertical-align: middle;
		position: relative;
		margin-right: 12px;

		&:after {
			content: '';
			position: absolute;
			left: 3px;
			right: 3px;
			top: 3px;
			bottom: 3px;
			background: $silver-chalice;
			border-radius: 50%;
			text-align: center;
			opacity: 0;
		}
	}

	.check-label {
		display: inline-block;
		vertical-align: middle;
	}
}

.jcf-select-trip {
	.jcf-select-drop-content {
		background: $trip-select-bg;
		color: $trip-select-color;
	}

	.jcf-list {
		background: $trip-select-bg;
		color: $trip-select-color;
	}

	.jcf-hover {
		background: darken($trip-select-bg, 10);
		color: $trip-select-color;
	}
}