/**
 * Flipbox — Style 5: 3D Cube
 *
 * Both faces sit on the sides of a rotating cube — the front face is pushed
 * towards the viewer and the back face sits at 90deg, so the whole box turns
 * like a solid block.
 *
 * @package captain-widgets-kit
 * @since   1.7.0
 */

.captwiki-flipbox.captwiki-style-5 .captwiki-flipbox__inner {
	transition: transform var( --captwiki-fb-duration ) cubic-bezier( 0.45, 0, 0.25, 1 );
	transform: translateZ( calc( var( --captwiki-fb-height ) / -2 ) );
}

.captwiki-flipbox.captwiki-style-5 .captwiki-flipbox__front {
	transform: translateZ( calc( var( --captwiki-fb-height ) / 2 ) );
}

.captwiki-flipbox.captwiki-style-5 .captwiki-flipbox__back {
	transform: rotateX( -90deg ) translateZ( calc( var( --captwiki-fb-height ) / 2 ) );
}

.captwiki-flipbox.captwiki-style-5.captwiki-flipbox--hover:hover .captwiki-flipbox__inner,
.captwiki-flipbox.captwiki-style-5.captwiki-flipbox--hover:focus-within .captwiki-flipbox__inner,
.captwiki-flipbox.captwiki-style-5.is-flipped .captwiki-flipbox__inner {
	transform: translateZ( calc( var( --captwiki-fb-height ) / -2 ) ) rotateX( 90deg );
}
