@use "sass:math";

$kit-select-nested-border-radius: 3px;
$kit-select-nested-triangle-width: 3.6px;
$kit-select-nested-limit: 7;
$kit-select-nested-offset-left: 20px;
$kit-select-nested-padding-left: 10px;

.kit-select-nested {
	position: relative;
	display: block;
	min-width: 108px;
	box-sizing: border-box;
	font-family: "PT Sans", sans-serif;
	white-space: nowrap;

	& * {
		box-sizing: border-box;
	}

	&_show_dropdown {
		z-index: 2;
		border-top-left-radius: $kit-select-nested-border-radius;
		border-top-right-radius: $kit-select-nested-border-radius;
	}
}

.kit-select-nested__label {
	position: relative;
	width: 100%;
	min-height: 47px;
	margin: 0;
	padding: 5px 50px 3px 10px;
	background-color: #ffffff;
	border: 1px solid #c5d6e1;
	border-radius: $kit-select-nested-border-radius;
	outline: none;
	text-align: left;
	cursor: pointer;
	appearance: none;

	.kit-select-nested_show_dropdown & {
		z-index: 2;
		padding-bottom: 4px;
		background-color: #f6f7f7;
		border: 1px solid #8aacc2;
		border-bottom-width: 0;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
	}
}

.kit-select-nested__label-title {
	overflow: hidden;
	font-family: "PT Sans", sans-serif;
	font-size: 14px;
	line-height: 19px;
	font-weight: normal;
	color: #000000;
	text-overflow: ellipsis;
}

.kit-select-nested__label-details-list {
	display: flex;
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	font-family: "PT Sans", sans-serif;
	font-size: 13px;
	line-height: 18px;
	font-weight: normal;
	color: #666666;
	letter-spacing: -0.2px;
}

.kit-select-nested__label-icon {
	position: absolute;
	top: 15px;
	right: 20px;
	width: 11px;
	height: 16px;
	fill: #8aacc2;

	.kit-select-nested_show_dropdown & {
		fill: #323232;
	}
}

.kit-select-nested__dropdown-wrap {
	position: absolute;
	top: 0;
	z-index: 1;
	width: 100%;
	padding-top: 47px;
	background-color: #ffffff;
	border: 1px solid #8aacc2;
	border-top-width: 0;
	border-radius: $kit-select-nested-border-radius;
	box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}

.kit-select-nested__dropdown-option-details {
	&:not(:first-child)::before {
		content: "·";
		margin: 0 8px;
	}

	.kit-select-nested__label & {
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

.kit-select-nested__filter {
	position: relative;
	padding: 5px $kit-select-nested-padding-left 10px;
	background-color: #f6f7f7;
	border-bottom: 1px dashed #939393;
}

.kit-select-nested__dropdown-list-wrap {
	overflow: scroll;
}

.kit-select-nested__dropdown-list {
	width: fit-content;
	min-width: 100%;
	max-height: 511px;
	margin: 0;
	padding: 9px 0;
	list-style: none;
}

.kit-select-nested__dropdown-option-label {
	$inner-classes: "+ .kit-select-nested__dropdown-option-sublist-toggle + .kit-select-nested__dropdown-sublist .kit-select-nested__dropdown-option-label";
	$recursive-class-name: $inner-classes;

	display: block;
	width: 100%;
	margin: 0;
	padding: 3.5px
		($kit-select-nested-offset-left + $kit-select-nested-padding-left);
	background-color: #ffffff;
	border: 0;
	border-radius: 0;
	font-family: "PT Sans", sans-serif;
	font-size: 14px;
	line-height: 19px;
	font-weight: normal;
	color: #000000;
	text-align: left;
	cursor: pointer;
	appearance: none;

	&:hover,
	&:focus {
		background-color: #3875d7;
		outline: none;
		color: #ffffff;
	}

	&_disabled {
		opacity: 0.25;
		cursor: default;

		&:hover,
		&:focus {
			background-color: #ffffff;
			color: #000000;
		}
	}

	.kit-select-nested__dropdown-sublist & {
		padding-left: $kit-select-nested-offset-left * 2 +
			$kit-select-nested-padding-left;
	}

	@for $i from 2 through $kit-select-nested-limit {
		#{$recursive-class-name} {
			padding-left: $kit-select-nested-offset-left *
				$i +
				$kit-select-nested-padding-left;
		}

		$recursive-class-name: "#{$recursive-class-name} #{$inner-classes}";
	}
}

.kit-select-nested__dropdown-option-details-list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: "PT Sans", sans-serif;
	font-size: 13px;
	line-height: 18px;
	font-weight: normal;
	color: #666666;
	letter-spacing: -0.1px;

	.kit-select-nested__dropdown-option-label:hover &,
	.kit-select-nested__dropdown-option-label:focus-within & {
		color: #ffffff;
	}

	.kit-select-nested__dropdown-option-label_disabled:hover &,
	.kit-select-nested__dropdown-option-label_disabled:focus-within & {
		color: #666666;
	}
}

.kit-select-nested__dropdown-sublist {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;

	.kit-select-nested__dropdown-option_show_sublist > & {
		display: block;
	}
}

.kit-select-nested__dropdown-option {
	position: relative;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.kit-select-nested__dropdown-option-sublist-toggle {
	$cent-left: 19px - $kit-select-nested-padding-left;
	$inner-classes: "+ .kit-select-nested__dropdown-sublist .kit-select-nested__dropdown-option-sublist-toggle";
	$recursive-class-name: $inner-classes;

	position: absolute;
	top: 8px;
	left: $kit-select-nested-offset-left - $cent-left;
	margin: 0;
	padding: 2px 5px;
	background-color: transparent;
	border: none;
	border-radius: 0;
	cursor: pointer;
	appearance: none;

	&::before {
		$color: #323232;
		$color-alt: #ffffff;

		content: "";
		display: block;
		width: 0;
		height: 0;
		border: $kit-select-nested-triangle-width solid transparent;
		border-left: $kit-select-nested-triangle-width solid $color;
		border-right-width: 0;

		.kit-select-nested__dropdown-option_show_sublist > & {
			transform: rotate(90deg);
			transform-origin: math.div($kit-select-nested-triangle-width, 2)
				$kit-select-nested-triangle-width 0;
		}

		.kit-select-nested__dropdown-option-label_disabled + & {
			opacity: 0.25;
		}

		.kit-select-nested__dropdown-option-label:hover + &,
		.kit-select-nested__dropdown-option-label:focus-within + & {
			border-left-color: $color-alt;
		}

		.kit-select-nested__dropdown-option-label_disabled:hover + &,
		.kit-select-nested__dropdown-option-label_disabled:focus-within + & {
			border-left-color: $color;
		}
	}

	@for $i from 2 through $kit-select-nested-limit {
		#{$recursive-class-name} {
			left: $kit-select-nested-offset-left * $i - $cent-left;
		}

		$recursive-class-name: "#{$recursive-class-name} #{$inner-classes}";
	}
}

.kit-select-nested__dropdown-footer {
	display: flex;
	align-items: center;
	padding: 10px 16px;
	background-color: #f6f7f7;
	border-top: 1px solid #d7d8da;

	& > button {
		margin-right: 13px;
	}
}