//
// Copyright (c) 2018-present, Vonage. All rights reserved.
//

.Vlt-dropdown {
	display: inline-block;
	position: relative;

	&__header,
	&__title {
		background: $purple-dark;
		border-top-left-radius: $unit1;
		border-top-right-radius: $unit1;
		color: $white;
		font-size: 1.5rem;
		font-weight: 600;
		margin-top: -8px;
		padding: 5px $unit2;
		text-align: left;
	}

	&__label {
		flex: 1;
	}

	&__link,
	&__block {
		color: $black;
		overflow: hidden;
		padding: 5px 16px;
		position: relative;
		text-align: left;

		&--border-top {
			margin-top: 3px;
			padding-bottom: 8px;
			padding-top: 8px;

			&:before {
				background-color: $grey-light;
				content: '';
				height: 1px;
				left: 0;
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		&--disabled,
		&_disabled {
			color: $grey-dark;
			cursor: default;
			pointer-events: none;
		}

		&--highlighted {
			color: $blue;
		}

		&__icon {
			flex: 0 0 20px;
			height: 20px;
			margin-bottom: -3px;
			margin-right: 10px;
			vertical-align: middle;
			width: 20px;
		}

		&__label {
			align-self: center;
			flex: 1;
		}
	}

	&__link {
		cursor: pointer;
		display: flex;
		font-size: 1.4rem;
		white-space: nowrap;

		&:hover,
		&:focus {
			background: rgba($black, 0.05);
		}

		&:focus {
			outline: none;
		}

		&:active {
			background: rgba($black, 0.1);
		}

		&--nohover {
			&:hover {
				background: transparent;
			}
		}

		&--selected,
		&_selected {
			font-size: 1.5rem;
			font-weight: 600;
			padding-right: 40px;

			&:after {
				$fill-color: encode-hex-code($black);
				background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22#{$fill-color}%22%20fill-rule%3D%22nonzero%22%20d%3D%22M2.904%2012.11L1.5%2013.52%207.958%2020%2022.5%205.409%2021.096%204%207.958%2017.182z%22%2F%3E%3C%2Fsvg%3E') no-repeat right center;
				background-size: contain;
				content: '';
				height: 16px;
				position: absolute;
				right: 16px;
				top: 9px;
				width: 16px;
			}
		}
	}

	&__block {
		&--nowrap {
			white-space: nowrap;
		}

		&--center {
			text-align: center;
		}
	}

	& + .Vlt-btn,
	.Vlt-btn + & {
		margin-left: $unit1;
	}

	&--full-width {
		display: flex;

		.Vlt-dropdown__trigger {
			width: 100%;

			.Vlt-btn {
				text-align: left;
				width: 100%;
			}
		}
	}
}

.Vlt-dropdown__trigger {
	// New wrapper for the dropdown button
	display: inline-block;

	&--btn {
		.Vlt-btn {
			&:hover {
				transform: none;
			}

			&:after {
				$fill-color: encode-hex-code($white);
				background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
				background-position: center center;
				background-repeat: no-repeat;
				background-size: contain;
				content: '';
				display: inline-block;
				float: right;
				height: 24px;
				margin-left: 5px;
				vertical-align: middle;
				width: 20px;
			}

			&.Vlt-btn--secondary.Vlt-btn--outline,
			&.Vlt-btn--tertiary,
			&.Vlt-btn--white {
				&:after {
					$fill-color: encode-hex-code($black);
					background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
				}
			}

			&.Vlt-btn--outline {
				&.Vlt-btn--primary {
					&:after {
						$fill-color: encode-hex-code($purple);
						background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
					}
				}

				&.Vlt-btn--tertiary {
					&:after {
						$fill-color: encode-hex-code($grey-light);
						background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
					}
				}

				&.Vlt-btn--quaternary {
					&:after {
						$fill-color: encode-hex-code($green);
						background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
					}
				}

				&.Vlt-btn--indigo {
					&:after {
						$fill-color: encode-hex-code($indigo);
						background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
					}
				}

				&.Vlt-btn--orange {
					&:after {
						$fill-color: encode-hex-code($orange);
						background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
					}
				}

				&.Vlt-btn--destructive {
					&:after {
						$fill-color: encode-hex-code($red);
						background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
					}
				}

				&.Vlt-btn--white {
					&:after {
						$fill-color: encode-hex-code($white);
						background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
					}
				}
			}

			&.Vlt-btn--link {
				&:after {
					background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A%23117bb8%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
				}
			}
		}

		& + .Vlt-dropdown__panel {
			margin-top: -4px
		}
	}

	&--block {
		width: 100%;

		.Vlt-btn {
			text-align: left;
			width: 100%;
		}
	}
}

.Vlt-dropdown__btn {
	@extend %Vlt-btn;
	margin-bottom: 0;
	margin-top: 0;

	&:after {
		background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A%23ffffff%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		content: '';
		display: inline-block;
		height: 20px;
		margin-bottom: -1px;
		margin-left: 5px;
		margin-top: -2px;
		vertical-align: middle;
		width: 20px;
	}

	&:hover {
		transform: none;
	}

	&:active {
		transform: none;
	}

	&:not(&--primary):not(&--secondary):not(&--tertiary):not(&--quaternary):not(&--destructive):not(&--indigo):not(&--orange):not(&--white) {
		@extend %Vlt-btn--tertiary;

		&:after {
			$fill-color: encode-hex-code($black);
			background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
		}
	}

	&--large {
		@extend %Vlt-btn--large;

		&:after {
			height: 24px;
			margin-left: 8px;
			width: 24px;
		}
	}

	&--small {
		@extend %Vlt-btn--small;

		&:after {
			margin: -4px -5px -3px 5px;
		}
	}

	&--app {
		@include btn-app-radius;
	}

	&--primary {
		@extend %Vlt-btn--primary;
	}

	&--secondary {
		@extend %Vlt-btn--secondary;
	}

	&--quaternary {
		@extend %Vlt-btn--quaternary;
	}

	&--destructive {
		@extend %Vlt-btn--destructive;
	}

	.Vlt-form__element & {
		margin-bottom: 0;
		margin-top: 0;
	}
}

.Vlt-native-dropdown {
	display: inline-flex; // Needed for vertical alignment on Firefox
	position: relative;
	width: fit-content;

	select {
		@extend %Vlt-btn, .Vlt-btn--secondary;
		margin-bottom: 0;
		margin-top: 0;
		padding-right: 38px;

		&::-ms-expand {
		    display: none;
		}

		&:hover {
			transform: none;
		}

		&:active {
			transform: none;
		}
	}

	&:after {
		$fill-color: encode-hex-code($white);
		background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		content: '';
		display: inline-block;
		height: 20px;
		margin-left: 5px;
		margin-top: -10px;
		pointer-events: none;
		position: absolute;
		right: 12px;
		top: 50%;
		width: 20px;
	}

	&--large {
		select {
			@extend %Vlt-btn--large;
		}
	}

	.Vlt-form__element--big &,
	&--large {

		&:after {
			right: 25px;
		}

		select {
			margin-bottom: 0;
			margin-top: 0;
			padding-right: 50px !important;
		}
	}

	& + .Vlt-btn,
	.Vlt-btn + & {
		margin-left: $unit1;
	}

	&--app {
		select {
			@include btn-app-radius;
		}
	}
}

// .Vlt-dropdown__selection {
// }

.Vlt-dropdown__panel {
	max-height: 0;
	min-width: 100%;
	overflow: hidden;
	position: absolute;
	top: 100%;
	z-index: $z-index-dropdowns;

	&__content {
		background: $white;
		border-radius: $unit1;
		box-shadow: inset 0 0 0 1px $grey-light, 0 2px 5px rgba($black, 0.15);
		font-size: 1.5rem;
		margin-bottom: 4px;
		padding: $unit1 0;

		@media #{$M-less}  {
			-webkit-overflow-scrolling: touch;
			overflow-y: scroll;
		}

		li:not([class]) {
			display: block; // Needed for IE if the __link or __block is in a nested div to avoid extra spacing
		}
	}

	&--left {
		right: 0;
	}

	&--width2 {
		min-width: 200px;
	}

	&--width3 {
		min-width: 300px;
	}

	&--nomaxheight {
		max-height: none;
	}

	.Vlt-btn {
		margin-bottom: 0;
		margin-top: 0;
	}
}

.Vlt-dropdown__scroll {
	flex: auto; // Has to be auto for IE
	overflow-y: auto;
}

.Vlt-dropdown--expanded .Vlt-dropdown__panel,
.Vlt-dropdown_expanded .Vlt-dropdown__panel,
.Vlt-dropdown__panel_open {
	max-height: 100vh;
	overflow: visible;
	transition: 0.3s;

	.Vlt-dropdown__panel__content {
		max-height: 400px;
		overflow-y: auto;

		&--scroll-area {
			display: flex;
			flex-flow: column;
			overflow-y: hidden;

			.Vlt-dropdown__link,
			.Vlt-dropdown__block {
				flex-shrink: 0;
			}
		}
	}
}