$crc: '.h-dropdown';

#{$crc} {
	display: inline-block;

	&.-active #{$crc}__button {
		border-color: $c-hover--primary-border;

		&.-split-button #{$crc}__icon > div {
			border-left-color: $c-hover--primary-border;
		}
	}

	&.-disabled {
		opacity: $v-control-disabled-opacity;
		pointer-events: none;

		#{$crc}__button {
			background: $c-disabled--primary-background;
			color: $c-disabled--negative-text;
		}
	}
}

#{$crc}__button {
	min-width: $v-control-height;
	width: 100%;
	height: $v-control-height;
	line-height: $v-control-height - ($v-control-border-width*2);
	border-radius: $v-control-border-radius;
	border-width: $v-control-border-width;
	border-style: solid;
	padding: 0 $g-8;
	padding-right: 0;
	transition: $t-fast-standard;
	font-size: $fs-default;
	outline: none;
	cursor: pointer;
	box-sizing: border-box;
	display: inline-flex;

	background: $c-primary-background;
	border-color: $c-primary-border;
	color: $c-primary-text;

	/*#{$crc}__text{
		margin-right: $v-gutter-8;
	}*/

	&:hover, &:focus {
		border-color: $c-hover--primary-border;
	}

	&.-split-button {
		#{$crc}__icon {
			outline: none;

			> div {
				border-left-width: $v-control-border-width;
				border-left-style: solid;
				border-left-color: $c-primary-border;
				transition: $t-fast-standard;
			}

			&:hover, &:focus {
				> div {
					border-left-color: $c-hover--primary-border;
				}
			}
		}
	}
}

#{$crc}__label{
	flex-grow: 1;
}

#{$crc}__icon {
	> div {
		display: flex;
		height: 16px;
		padding: 0 $g-8;
		margin: ($g-8 - $v-control-border-width) 0;
		vertical-align: top;
	}
}

#{$crc}__menu-container {
	filter: drop-shadow($sd-active--primary-box-shadow);

	&[data-floating-placement='top'] #{$crc}__arrow{
		transform: rotate(180deg);
	}
}


#{$crc}__menu {
	border: $v-control-border-width solid $c-primary-border;
	background: $c-primary-background;
	border-radius: $v-box-border-radius;
	padding-top: 3px - $v-control-border-width;
	display: flex;
	max-height: 300px;

	.h-scroll-container{
		flex-grow: 1;
	}

	&:after {
		content: '';
		position: absolute;
		height: 3px;
		left: 0;
		right: 0;
		top: 0;
		background: $c-primary;
		border-radius: $v-box-border-radius $v-box-border-radius 0 0;
	}
}

#{$crc}__arrow{
	$popper-arrow-size: 16px;
	color: $c-primary;
	width: $popper-arrow-size;
	height: $popper-arrow-size;
}