@import "/UI/Theme.scss";

ComponentHandle
{
	@include ui-button-face;
	width: 38px;
	height: 38px;
	border-radius: 2px;
	position: absolute;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transform: scale( 1 ) translateX( -50% ) translateY( -50% );
	z-index: 100;

	.icon
	{
		font-family: "Material Icons";
		color: $ui-blue;
		font-size: 23px;
		pointer-events: none;
	}

	&:hover
	{
		opacity: 1;
		background-color: $ui-blue-soft;
	}

	&:active
	{
		border-color: $ui-blue;
		background-color: $ui-blue-soft;
		opacity: 1;
		transform: scale( 0.95 ) translateX( -50% ) translateY( -50% );
	}

	&.active
	{
		@include ui-selected;
		background-image: none;
		border-color: $ui-blue;
		opacity: 1;

		.icon
		{
			color: #fff;
		}
	}

	&:outro
	{
		transform: scale( 0 ) translateX( -50% ) translateY( -50% );
		transition: transform 0.2s ease-out;
	}
}