@use "../colors/colors";

.hoo-buttonsplit,
.hoo-buttonicon-split,
.hoo-buttonicon-overflow,
div.hoo-buttoncontext-outer,
%flyoutDropDown{
	position: relative;
	.hoo-buttonflyout{
		position: absolute;
		z-index: 400;
		top: 100%;
		left: 0;

		display: none; // intermediate SHOW/HIDE
		cursor: unset;
	}

	// TODO: Add SLIDEOUT ANIMATION
	&.show-flyout{
		background-color: inherit;
		& > .hoo-buttonflyout{
			display: block;
			.hoo-button-pivot{
				display: flex;
			}
		}

		.hoo-buttonsplit-carret{
			background-color: colors.$buttonBackgroundCheckedHovered;
		}
	}
}