@import "../csscube-colors.css";
@import "../csscube.css";
@import "rotate.css";
.cube.rotate {
	transition: transform 1.5s;
	transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg);

	animation-name: cube-rotate-animation;
	animation-duration: 2s;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-timing-function: ease;
}

@media(hover: hover) and (pointer: fine) {
	.cube.rotate:hover {
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
}

.cube.rotate:active {
	transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

@keyframes cube-rotate-animation {
	0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg); }
	50% { transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg); }
	100% { transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg); }
}
.corner.front.left.up .sticker.front { background-color: var(--csscube-front-color-inactive); }
.corner.front.left.up .sticker.up { background-color: var(--csscube-up-color-inactive); }
.corner.front.left.up .sticker.left { background-color: var(--csscube-left-color-inactive); }
.edge.left.up .sticker.up { background-color: var(--csscube-up-color-inactive); }
.edge.left.up .sticker.left { background-color: var(--csscube-left-color-inactive); }
.edge.front.left .sticker.front { background-color: var(--csscube-front-color-inactive); }
.edge.front.left .sticker.left { background-color: var(--csscube-left-color-inactive); }
.center.left .sticker.left { background-color: var(--csscube-left-color-inactive); }
.corner.front.left.down .sticker.front { background-color: var(--csscube-front-color-inactive); }
.corner.front.left.down .sticker.left { background-color: var(--csscube-left-color-inactive); }
.corner.front.left.down .sticker.down { background-color: var(--csscube-down-color-inactive); }
.edge.left.down .sticker.left { background-color: var(--csscube-left-color-inactive); }
.edge.left.down .sticker.down { background-color: var(--csscube-down-color-inactive); }
.edge.front.up .sticker.front { background-color: var(--csscube-front-color-inactive); }
.edge.front.up .sticker.up { background-color: var(--csscube-up-color-inactive); }
.center.up .sticker.up { background-color: var(--csscube-up-color-inactive); }
.center.front .sticker.front { background-color: var(--csscube-front-color-inactive); }
.edge.front.down .sticker.front { background-color: var(--csscube-front-color-inactive); }
.edge.front.down .sticker.down { background-color: var(--csscube-down-color-inactive); }
.center.down .sticker.down { background-color: var(--csscube-down-color-inactive); }
.corner.front.right.up .sticker.front { background-color: var(--csscube-front-color-inactive); }
.corner.front.right.up .sticker.up { background-color: var(--csscube-up-color-inactive); }
.corner.front.right.up .sticker.right { background-color: var(--csscube-right-color-inactive); }
.edge.right.up .sticker.up { background-color: var(--csscube-up-color-inactive); }
.edge.right.up .sticker.right { background-color: var(--csscube-right-color-inactive); }
.edge.front.right .sticker.front { background-color: var(--csscube-front-color-inactive); }
.edge.front.right .sticker.right { background-color: var(--csscube-right-color-inactive); }
.center.right .sticker.right { background-color: var(--csscube-right-color-inactive); }
.corner.front.right.down .sticker.front { background-color: var(--csscube-front-color-inactive); }
.corner.front.right.down .sticker.right { background-color: var(--csscube-right-color-inactive); }
.corner.front.right.down .sticker.down { background-color: var(--csscube-down-color-inactive); }
.edge.right.down .sticker.right { background-color: var(--csscube-right-color-inactive); }
.edge.right.down .sticker.down { background-color: var(--csscube-down-color-inactive); }
.corner.back.left.up .sticker.up:after { content: var(--csscube-double-left-arrow); }
.corner.back.left.up .sticker.left:after { content: var(--csscube-double-down-arrow); }
.edge.back.left .sticker.left:after { content: var(--csscube-double-down-arrow); }
.corner.back.left.down .sticker.left:after { content: var(--csscube-double-down-arrow); }
.corner.back.left.down .sticker.down:after { content: var(--csscube-double-right-arrow); }
.edge.back.up .sticker.up:after { content: var(--csscube-double-left-arrow); }
.edge.back.down .sticker.down:after { content: var(--csscube-double-right-arrow); }
.corner.back.right.up .sticker.up:after { content: var(--csscube-double-left-arrow); }
.corner.back.right.up .sticker.right:after { content: var(--csscube-double-up-arrow); }
.edge.back.right .sticker.right:after { content: var(--csscube-double-up-arrow); }
.corner.back.right.down .sticker.right:after { content: var(--csscube-double-up-arrow); }
.corner.back.right.down .sticker.down:after { content: var(--csscube-double-right-arrow); }