@use "../../00-base/colors/colors";
@use "../../00-base/mixin/flyouts.mixin";
@use "button-action";

.hoo-buttonicon-overflow {
	// @extend %flyoutDropDown;

	display: flex;

	height: 2rem;

	&:hover,
	&.show-flyout{
		background-color: colors.$neutral-100;
		&>.hoo-buttonicon-flyout{
			background-color: inherit;
		}
		.hoo-buttonflyout{
			left: unset;
			right: 0;
		}
	}



	.hoo-buttonicon-flyout{
		height: 100%;
	}

	button {
		cursor: pointer;
		@extend .hoo-buttonaction;

		height: 2lh;
		margin-right: 0;

		&>* {
			pointer-events: none;
		}

		&:active {
			background-color: colors.$neutral-350;
		}

		&:hover {
			background-color: colors.$neutral-200;
		}

		&[disabled],
		&:disabled {
			pointer-events: none;
	
			color: colors.$neutral-400;
			border-color: colors.$neutral-100;
			background-color: colors.$neutral-100;
			.hoo-buttonicon-flyout{
				color: colors.$neutral-400;
				.hoo-icon{
					fill: inherit;
				}
			}
		}

	}
}

.hoo-buttonmenu{
	@extend .hoo-buttonicon-overflow;
}