phx-app-switcher {
	.phlox-ripple();

	display: block;
}

.phx-app-switcher {
	.phlox-transition();

	position: relative;
	height: @APP_SWITHCER_HEIGHT;
	width: @APP_SWITHCER_WIDTH;
	text-align: center;

	&:hover {
		background-color: @MENU_TOP_NAV_ITEM_HOVER_BG_COLOR;
	}

	& + .popover {
		position: fixed;
		top: @APP_SWITCHER_POSITION_TOP - 8;
		left: @APP_SWITHCER_POSITION_LEFT;
		width: @APP_SWITHCER_POPOVER_WIDTH;
		font-family: @FONT_HEADLINE_FAMILY;
		border-radius: 0px;
		padding: 0px;
		max-width: none;
		& .header {
			.FH1L();
			color: extract(@CLR_0, 1);
			text-align: right;

			>div {
				padding-top: 12pt;
			}
		}
		& .tagline {
			.FC0L();
			color: extract(@CLR_0, 7);
			text-align: right;
		}
		& .group {
			color: extract(@CLR_0, 1);
		}
		&.bottom > .arrow {
			left: @APP_SWITCHER_ARROW_LEFT_POSITION;
		}
		& .appitem {
			padding-bottom: @APP_SWITHCER_APP_ITEM_PADDING_BOTTOM;
		}
		& .more{
			background-color: extract(@CLR_1, 8);
			color: extract(@CLR_1, 1);
			text-align: center;
			height: @APP_SWITHCER_MORE_BTN_HEIGHT;
			line-height: @APP_SWITHCER_MORE_BTN_HEIGHT;
		}
		& .popover-content{
			padding: @APP_SWITHCER_PADDING_TOP @APP_SWITHCER_PADDING_RIGHT @APP_SWITHCER_PADDING_BOTTOM @APP_SWITHCER_PADDING_LEFT;
		}
		& .scroll{
			overflow: scroll;
			height: @APP_SWITHCER_CONTENT_WIDTH;
		}
	}

	& .box-container {
		.phlox-transition();
		transition-duration: @APP_SWITCHER_WINDOW_TRANSITION_DURATION;

		position: absolute;

		width: @APP_SWITCHER_WINDOW_SIZE;
		height: @APP_SWITCHER_WINDOW_SIZE;
		padding: 0;
		margin: 0;
		top: @APP_SWITCHER_WINDOW_PADDING_TOP;
		left: @APP_SWITCHER_WINDOW_PADDING_LEFT;
	}

	& .box-container .square {
		.phlox-transition();
		transition-duration: @APP_SWITCHER_WINDOW_TRANSITION_DURATION;

		display: inline-block;
		background-color: extract(@CLR_S, 6);
		width: @APP_SWITCHER_WINDOW_INNER_SQUARE;
		height: @APP_SWITCHER_WINDOW_INNER_SQUARE;
	}

	& .box-container .square:nth-child(2) {
		padding-left: @APP_SWITCHER_WINDOW_GAP;
	}

	& .box-container .inline-boxes {
		line-height: 0px;
		font-size: @APP_SWITCHER_WINDOW_GAP * 3; /* doing gap in vertical */
		display: flex;
  	justify-content: space-between;
	}

	& .box-container .inline-boxes:nth-child(2) {
		padding-top: @APP_SWITCHER_WINDOW_GAP; /* doing gap in horizontal */
	}

	&.active .box-container {
		transform: rotate(@APP_SWITCHER_WINDOW_ROTATE_DEG);
		transition-duration: 1s;

		& .square {
			background-color: extract(@CLR_BRAND_HUE, 4);
		}
	}
}