/* Dice 3D CSS gerado a partir do SCSS do projeto */

.dice__scene {
	width: 70px;
	height: 70px;
	perspective: 210px; /* 70px * 3 */
}

#dice__cube {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform: translateZ(-35px);
	transition: transform ease;
	transition-duration: 500ms;
}

/* Rotação quando sai o mesmo número */

@keyframes showSameFont {
	100% {
		transform: translateZ(-35px) rotateY(360deg);
	}
}

@keyframes showSameRight {
	100% {
		transform: translateZ(-35px) rotateY(-450deg);
	}
}

@keyframes showSameBack {
	100% {
		transform: translateZ(-35px) rotateY(-540deg);
	}
}

@keyframes showSameLeft {
	100% {
		transform: translateZ(-35px) rotateY(450deg);
	}
}

@keyframes showSameTop {
	100% {
		transform: translateZ(-35px) rotateX(-450deg);
	}
}

@keyframes showSameBottom {
	100% {
		transform: translateZ(-35px) rotateX(450deg);
	}
}

/* Posições do dado */

#dice__cube.show-front {
	transform: translateZ(-35px) rotateY(0deg);
}

#dice__cube.show-front.show-same {
	animation: showSameFont 500ms ease;
}

#dice__cube.show-right {
	transform: translateZ(-35px) rotateY(-90deg);
}

#dice__cube.show-right.show-same {
	animation: showSameRight 500ms ease;
}

#dice__cube.show-back {
	transform: translateZ(-35px) rotateY(-180deg);
}

#dice__cube.show-back.show-same {
	animation: showSameBack 500ms ease;
}

#dice__cube.show-left {
	transform: translateZ(-35px) rotateY(90deg);
}

#dice__cube.show-left.show-same {
	animation: showSameLeft 500ms ease;
}

#dice__cube.show-top {
	transform: translateZ(-35px) rotateX(-90deg);
}

#dice__cube.show-top.show-same {
	animation: showSameTop 500ms ease;
}

#dice__cube.show-bottom {
	transform: translateZ(-35px) rotateX(90deg);
}

#dice__cube.show-bottom.show-same {
	animation: showSameBottom 500ms ease;
}

/* Faces */

.dice__side {
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #fff;
	box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.1);
	user-select: none;
}


.dice__side--front {
	transform: rotateY(0deg) translateZ(35px);
	background-image: url('../assets/images/dice-1.png');
}

.dice__side--back {
	transform: rotateY(180deg) translateZ(35px);
	background-image: url('../assets/images/dice-6.png');
}

.dice__side--right {
	transform: rotateY(90deg) translateZ(35px);
	background-image: url('../assets/images/dice-4.png');
}

.dice__side--left {
	transform: rotateY(-90deg) translateZ(35px);
	background-image: url('../assets/images/dice-3.png');
}

.dice__side--top {
	transform: rotateX(90deg) translateZ(35px);
	background-image: url('../assets/images/dice-2.png');
}

.dice__side--bottom {
	transform: rotateX(-90deg) translateZ(35px);
	background-image: url('../assets/images/dice-5.png');
}