phx-context-menu{
	background-color: extract(@CLR_1, 9);
	.phlox-box-shadow(0, 3, 5, 0);
	position: absolute;
	display: none;
	z-index: @CONTEXT_MENU_Z_INDEX;
	color: extract(@CLR_0, 6);
	font-size: @CONTEXT_MENU_FONT_SIZE;
	text-align: left;

	ul{
		list-style-type: none;
		border-bottom: @CONTEXT_MENU_VERTICAL_BORDER_WIDTH solid @CLR_BORDER_COLOR;
		padding-left: @CONTEXT_MENU_VERTICAL_ITEM_GROUP_PADDING;
	}

	ul > li{
		border-top: @CONTEXT_MENU_VERTICAL_BORDER_WIDTH solid @CLR_BORDER_COLOR;
		border-left: @CONTEXT_MENU_VERTICAL_BORDER_WIDTH solid @CLR_BORDER_COLOR;
		border-right: @CONTEXT_MENU_VERTICAL_BORDER_WIDTH solid @CLR_BORDER_COLOR;
		// padding: @CONTEXT_MENU_VERTICAL_ITEM_PADDING;
		height: @CONTEXT_MENU_ITEM_HEIGHT;

		phx-default-menu-item > div {
			height: 100%;

			> .phx-default-menu-item {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			padding: @CONTEXT_MENU_VERTICAL_ITEM_PADDING;
		}
		}

	}

	ul > li:first-child{
		// border-top: @CONTEXT_MENU_VERTICAL_FIRST_ITEM_BORDER_TOP;
	}

	&.show{
		display: block;
	}

	ul{
		margin:0;
    padding: 0;
	}

	ul > li{
		cursor:pointer;

		&:hover,
		&:focus {
		  background-color: extract(@CLR_1, 8);
		}

		// disable remove hover bg
		&.disable:hover,
		&.disable:focus {
		  background-color:transparent;
		}

		&:hover > * > .default-menu > ul {
			display: block;
		}

		phx-component-wrapper.disable {
			& + phx-default-menu-item{
				color: @CLR_BRAND_FONT;
			}
		}
	}

	&.right{
		& * > .default-menu > ul{
			right: @DEFAULT_MENU_ITEM_GROUP_RIGHT;
			left : auto;
		}
	}

	button {
    &.fake{
			display: block; // necessary for making btn zero hide
      width: 0;
      height: 0;
			padding: 0;
			border: 0;
    }
  }
}