<commit_before>@import "node_modules/wholesale-styleguide-scss/variables";
@import "node_modules/wholesale-styleguide-scss/util";
@import "node_modules/wholesale-styleguide-scss/components/complex/dropdown";

$export-dropdown-css: true !default;
$dropdown-item-active-color: $heaven !default;
$dropdown-background-color: $white !default;
$dropdown-shadow-color: $asphalt !default;
$dropdown-font-color: $base-font-color !default;
$dropdown-font-family: $base-font-family !default;
$dropdown-hover-background-color: $arctica !default;

@mixin dropdown-container($background-color, $shadow-color) {
	position: absolute;
	top: 100%;
	right: 0;
	width: rem(200px);
	margin-top: rem(20px);
	height: 0;
	display: none;
	background-color: $background-color;
	border-radius: 3px;
	box-shadow: 0 2px 6px $shadow-color;
	transition: height .125s ease;
	will-change: height;
	overflow: hidden;
	z-index: 3;

	&.left {
		left: 0;
	}
}

@mixin dropdown() {
	position: absolute;
	top: 0;
	left: 100%;
	padding: rem(5px 0);
	width: 100%;
	margin: 0;
}

@mixin dropdown-item($font-color, $font-family, $hover-bg-color, $active-bg-color) {
	position: relative;
	font-size: rem(14px);
	color: $font-color;
	font-family: $font-family;
	line-height: 2;
	cursor: pointer;
	padding: rem(8px 30px 8px 13px);
	white-space: nowrap;
	width: 100%;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: normal;
	&:hover {
		background-color: $hover-bg-color;
	}
	&.is-active {
		background-color: $active-bg-color !important;
	}
}

@mixin dropdown-arrow() {
	display: none;
	position: absolute;
	width: rem(10px);
	height: rem(10px);
	bottom: rem(-25px);
	right: rem(20px);
	background: linear-gradient(-45deg, rgba($white, 0) 50%, $white 50%);
	transform: rotate(45deg);
	z-index: 2;
	box-shadow: -1px -1px 1px $secondary-color;
}

@if $export-dropdown-css {
	.dropdown-menu {
		display: block;
	}
	.dropdown {
		position: relative;
		display: inline-block;
	}
	.dropdown-container {
		@include dropdown-container($dropdown-background-color, $dropdown-shadow-color);
		.dropdown-root-menu {
			right: 0;
			left: auto;
		}
		&.mod-open {
			display: block;
			+ .dropdown-arrow {
				display: block;
			}
		}
	}
	.dropdown-trigger {
		cursor: pointer;
	}
	.dropdown-menu {
		@include dropdown();
		&.mod-menu-open,
		&.mod-sub-open {
			left: 0;
		}
		&.mod-sub-open > .dropdown-item > .text {
			opacity: 0;
			z-index: -1;
		}
	}
	.dropdown-item {
		.text {
			@include dropdown-item($dropdown-font-color, $dropdown-font-family, $dropdown-hover-background-color, $dropdown-item-active-color);
		}
	}
	.dropdown-arrow {
		@include dropdown-arrow();
	}
	.dropdown-container.animate-close {
		animation: closeContainer .2s ease-in-out forwards;
	}
	.dropdown-menu.animate-in > .dropdown-item > .text {
		animation: dropDownIn .3s cubic-bezier(.32, .97, .71, .95) .0s forwards;
	}
	.dropdown-menu.animate-out > .dropdown-item > .text {
		animation: dropDownOut .3s cubic-bezier(.53, 1.49, 1, .87) forwards;
	}
	.dropdown-menu.animate-sub-in > .dropdown-item > .text {
		animation: dropDownSubIn .3s cubic-bezier(.32, .97, .71, .95) .0s forwards;
	}<commit_msg>Adding a fix height to the dropdown Menu (if we have a lot of elements, e.g. 100+) the dropdown is getting too long. Feedback from UX is, max-height should be 40rem.<commit_after>@import "node_modules/wholesale-styleguide-scss/variables";
@import "node_modules/wholesale-styleguide-scss/util";
@import "node_modules/wholesale-styleguide-scss/components/complex/dropdown";

$export-dropdown-css: true !default;
$dropdown-item-active-color: $heaven !default;
$dropdown-background-color: $white !default;
$dropdown-shadow-color: $asphalt !default;
$dropdown-font-color: $base-font-color !default;
$dropdown-font-family: $base-font-family !default;
$dropdown-hover-background-color: $arctica !default;

@mixin dropdown-container($background-color, $shadow-color) {
	position: absolute;
	top: 100%;
	right: 0;
	width: rem(200px);
	margin-top: rem(20px);
	height: 0;
	display: none;
	background-color: $background-color;
	border-radius: 3px;
	box-shadow: 0 2px 6px $shadow-color;
	transition: height .125s ease;
	will-change: height;
	overflow: hidden;
	z-index: 3;

	&.left {
		left: 0;
	}
}

@mixin dropdown() {
	position: absolute;
	top: 0;
	left: 100%;
	padding: rem(5px 0);
	width: 100%;
	margin: 0;
}

@mixin dropdown-item($font-color, $font-family, $hover-bg-color, $active-bg-color) {
	position: relative;
	font-size: rem(14px);
	color: $font-color;
	font-family: $font-family;
	line-height: 2;
	cursor: pointer;
	padding: rem(8px 30px 8px 13px);
	white-space: nowrap;
	width: 100%;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: normal;
	&:hover {
		background-color: $hover-bg-color;
	}
	&.is-active {
		background-color: $active-bg-color !important;
	}
}

@mixin dropdown-arrow() {
	display: none;
	position: absolute;
	width: rem(10px);
	height: rem(10px);
	bottom: rem(-25px);
	right: rem(20px);
	background: linear-gradient(-45deg, rgba($white, 0) 50%, $white 50%);
	transform: rotate(45deg);
	z-index: 2;
	box-shadow: -1px -1px 1px $secondary-color;
}

@if $export-dropdown-css {
	.dropdown-menu {
		display: block;
	}
	.dropdown {
		position: relative;
		display: inline-block;
	}
	.dropdown-container {
		@include dropdown-container($dropdown-background-color, $dropdown-shadow-color);
		.dropdown-root-menu {
			right: 0;
			left: auto;
		}
		&.mod-open {
			display: block;
			+ .dropdown-arrow {
				display: block;
			}
		}
	}
	.dropdown-trigger {
		cursor: pointer;
	}
	.dropdown-menu {
		@include dropdown();
		max-height: 40rem;
		overflow-y: scroll;
		overflow-x: hidden;
		&.mod-menu-open,
		&.mod-sub-open {
			left: 0;
		}
		&.mod-sub-open > .dropdown-item > .text {
			opacity: 0;
			z-index: -1;
		}
	}
	.dropdown-item {
		.text {
			@include dropdown-item($dropdown-font-color, $dropdown-font-family, $dropdown-hover-background-color, $dropdown-item-active-color);
		}
	}
	.dropdown-arrow {
		@include dropdown-arrow();
	}
	.dropdown-container.animate-close {
		animation: closeContainer .2s ease-in-out forwards;
	}
	.dropdown-menu.animate-in > .dropdown-item > .text {
		animation: dropDownIn .3s cubic-bezier(.32, .97, .71, .95) .0s forwards;
	}
	.dropdown-menu.animate-out > .dropdown-item > .text {
		animation: dropDownOut .3s cubic-bezier(.53, 1.49, 1, .87) forwards;
	}
	.dropdown-menu.animate-sub-in > .dropdown-item > .text {
		animation: dropDownSubIn .3s cubic-bezier(.32, .97, .71, .95) .0s forwards;
	}
{'fraction_non_alphanumeric': 0.16480147171546836, 'fraction_numerical': 0.030507435229189025, 'mean_word_length': 3.8795811518324608, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1549862', 'n_tokens_mistral': 2754, 'n_tokens_neox': 2465, 'n_words': 526}