@use "mixins/function.scss" as *;

$name: "flip-card";
$name-flip: bem($name, "flip");
$name-flip-front: bem($name, "flip", "front");
$name-flip-back: bem($name, "flip", "back");

.#{bem($name)} {
	&.#{is("reverse")} {
		transform: rotateY(180deg);
	}
	box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
		0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	transition: 0.6s transform linear;
	.#{$name-flip} {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		backface-visibility: hidden;
		&.#{$name-flip-front} {
			z-index: 2;
		}
		&.#{$name-flip-back} {
			transform: rotateY(-180deg);
		}
	}
}