@use '../utilities/effects' as *;
@use '../base/functions' as *;

.brandui-flip {
	background-color: transparent;
	perspective: 62.5rem;

	.brandui-flip-inner,
	.brandui-flip-front,
	.brandui-flip-back {
		display: block;
		position: relative;
		transition: var(--transition-slow);
		width: 100%;
		transform-style: preserve-3d;
	}

	.brandui-flip-front,
	.brandui-flip-back {
		backface-visibility: hidden;
	}

	.brandui-flip-back {
		inset: 0;
		margin: 0;
		position: absolute;
		box-sizing: border-box;
		transform: rotateY(180deg);
		overflow: hidden;
		height: 100%;
		width: 100%;

		&-content {
			@extend .taper-fade-v;

			position: relative;
			width: 100%;
			height: 100%;
			background-color: var(--default);
		}
	}

	&.flipped {
		.brandui-flip-inner {
			transform: rotateY(180deg);
		}
	}

	&.flipped-reverse {
		.brandui-flip-inner {
			transform: rotateY(-180deg);
		}
	}
}