.phx-view-button{
	.phlox-transition();
	width: @EDITOR_PAGE_VIEW_BUTTON_WIDTH;
	height:@EDITOR_PAGE_VIEW_BUTTON_HEIGHT;
	cursor: pointer;

	& img{
		.phlox-transition();
		// margin-top: @EDITOR_PAGE_VIEW_BUTTON_IMAGE_MARGIN_TOP;
		// margin-left: @EDITOR_PAGE_VIEW_BUTTON_IMAGE_MARGIN_LEFT;
		opacity: @EDITOR_PAGE_VIEW_BUTTON_IMAGE_OPACITY;
    height: 50pt;
	}

	&.active {
		& img{
			opacity: @EDITOR_PAGE_VIEW_ACTIVE_BUTTON_IMAGE_OPACITY;
			//! add glow shadow
		}
	}

	> div {
		.FC1L();
		color: extract(@CLR_1, 9);
		display: flex;
		height: 100%;
		align-items: center;
		justify-content: center;
	}

	&.record {
		> div {
	    &:before{
				color: inherit;
		    font-family: "PhloxGlyphicons";
	      content: "#";
	    }
		}
	}

	&.calendar {
		> div {
	    &:before{
				color: inherit;
		    font-family: "PhloxGlyphicons";
	      content: "d";
	    }
		}
	}

	&.form {
		> div {
	    &:before{
				color: inherit;
		    font-family: "PhloxGlyphicons";
	      content: "$";
	    }
		}
	}
}