@import "../../_variables.scss";

.canvas-bar {
	background-color: white;
	border: solid 2px $dark-grey;
	border-radius: 5px;
	position: absolute;
	top:30px;
	z-index: 4;
	display:flex;

	.move#{&}-button {
		background-image: url('../../../images/move.svg');
	}

	.components#{&}-button {
		background-image: url('../../../images/components.svg');
	}

	.select-points#{&}-button {
		background-image: url('../../../images/select-points.svg');
	}

	.shadow#{&}-button {
		background-image: url('../../../images/icon-shadow.svg');
		background-size: 95%;
	}

	&-button {
		width: 22px;
		height: 22px;
		cursor: pointer;
		border-right: solid 2px $dark-grey;
		box-sizing: content-box;
		background-position: center;
		background-repeat: no-repeat;

		&:first-of-type {
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;
		}

		&:last-of-type {
			border-right: none;
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
		}

		&:hover, &.is-active {
			@include themify () {
				background-color: $theme-background;
			}
		}
	}
}
