@ActionPreviewButton_ActionMenu_Width: 200px;

div.uwt-actionpreviewbutton
{
	display: inline-block;
	position: relative;
	// white-space: nowrap; // this actually looks better this way
	img.apb-icon
	{
		width: 1.2em;
		margin-right: 8px;
	}
	img.apb-icon, a.apb-text, a.apb-button
	{
		vertical-align: middle;
	}
	&> a.apb-button
	{
		opacity: 0;
		visibility: hidden;
		
		display: inline-block;
		padding: 0px 2px 0px 6px;
		border-radius: 4px;
		
		margin-left: 8px;
		padding-right: 6px;
		
		&::before
		{
			content: "...";
			font-family: inherit;
			font-weight: bold;

			display: block;
			margin-top: -3px;
			height: 0px;
		}
	}
	&:hover, &:focus-within
	{
		&> a.apb-button
		{
			&:hover
			{
				text-decoration: none;
			}
		}
	}
	&.apb-selected > div.apb-preview
	{
		visibility: visible;
		opacity: 1;
	}

	&> a.apb-text.apb-empty
	{
		color: inherit;
		cursor: inherit;
		&:hover
		{
			text-decoration: inherit;
		}
	}
	
	&> div.apb-preview
	{
		display: flex;
		visibility: hidden;
		opacity: 0;
		
		float: right;
		padding: 8px;
		margin-left: 8px;
		position: absolute;
		transition: all 0.3s;
		
		width: max-content;
		
		&> a.uwt-button.uwt-button-close
		{
			display: none;
			position: absolute;
			right: 8px;
			top: 8px;
			width: 8px;
			height: 8px;
			padding: 8px;
			min-width: unset;
			min-height: unset;
			&::after
			{
				content: "\f00d";
				font-family: "FontAwesome";
				position: absolute;
				top: 2px;
				left: 6px;
			}
		}
		&.uwt-detached
		{
			&> a.uwt-button.uwt-button-close
			{
				display: inline-block;
			}
			visibility: visible;
			opacity: 1;
			position: fixed;
		}
		
		&> div.uwt-gripper
		{
			position: absolute;
			top: 0px;
			width: 64px;
			height: 16px;
			left: 50%;
		}
		
		&.uwt-loading > div.apb-content, &.uwt-loading > div.apb-preview-content, &.uwt-loading > div.apb-actions
		{
			display: none;
		}
		&:not(.uwt-loading) > div.uwt-spinner
		{
			display: none;
		}
		
		&> div.apb-actions
		{
			&.uwt-empty
			{
				display: none;
			}

			margin: -8px;
			margin-right: 16px;
			
			&> h2
			{
				cursor: default;
			}
			&> ul.uwt-menu
			{
				width: @ActionPreviewButton_ActionMenu_Width;
				&> li.uwt-menu-item-command
				{
					position: relative;
					&> ul.uwt-menu
					{
						display: none;
						position: absolute;
						//margin-left: 20px;
						left: @ActionPreviewButton_ActionMenu_Width;
						top: 0px;
						width: max-content;
						z-index: 1;
					}
					&:hover > ul.uwt-menu
					{
						display: block;
					}
				}
			}
			/*
			&> div.apb-preview
			{
				visibility: hidden;
				opacity: 0;
				
				float: right;
				padding: 8px;
				margin-left: 8px;
				position: absolute;
			}
			*/
		}
		&> div.apb-preview-content
		{
			//!FIXME: determine what the best max-width is based on the location of the popup and the user's screen size
			max-width: 600px;
			
			&.uwt-empty
			{
				display: none;
			}
			&> div.apb-header
			{
				&> h2
				{
					&> span.apb-class-title
					{
						padding-right: 16px;
					}
				}
			}
		}
	}
}
body:not(.uwt-javascript-disabled) div.uwt-actionpreviewbutton
{
	&.apb-selected > a.apb-button
	{
		visibility: visible;
		opacity: 1;
	}
	&:hover, &:focus-within
	{
		&> a.apb-button
		{
			opacity: 1;
			visibility: visible;
			&:hover
			{
				text-decoration: none;
			}
		}
	}
}