/* Patterns - Content - Flip_Content */
////
/// @group Patterns-Flip_Content
/// Patterns - Content - Flip_Content

///
.osui-flip-content {
	perspective: 200vw;
	position: relative;
	overflow: hidden;

	// Service Studio preview
	& {
		-servicestudio--webkit-perspective: initial;
		-servicestudio-perspective: initial;
	}

	// when inside firefox
	.firefox & {
		transform: perspective(200vw);
		transform-style: preserve-3d;
	}

	&--flipped {
		.osui-flip-content__container {
			transform: rotateY(-90deg);

			&__front {
				position: absolute;
			}

			&__back {
				position: relative;
				transform: rotateY(90deg);
			}
		}
	}

	&__container {
		cursor: default;
		position: relative;
		transform-style: preserve-3d;
		transition: all 630ms cubic-bezier(0.03, 0.01, 0.67, 1.97);

		&--flip-self {
			cursor: pointer;
		}

		// Service Studio preview
		& {
			-servicestudio--webkit-transform-style: initial;
			-servicestudio-transform-style: initial;
		}

		&__front,
		&__back {
			backface-visibility: hidden;
			left: 0;
			top: 0;

			&:empty {
				// Service Studio preview
				& {
					-servicestudio-min-height: 80px;
				}
			}
		}

		&__front {
			position: relative;
			z-index: var(--layer-global-screen);
		}

		&__back {
			position: absolute;
			width: 100%;

			// Service Studio preview
			& {
				-servicestudio-position: static;
			}
		}
	}
}

// IsRTL ---------------------------------------------------------------------------
///
.is-rtl {
	.osui-flip-content {
		&--flipped {
			.osui-flip-content__container {
				transform: rotateY(90deg);

				&__back {
					transform: rotateY(-90deg);
				}
			}
		}
	}
}