// =============================================================================
// :: Settings
// =============================================================================
$arrow-size: 1.4rem;
$arrow-top-position: -$arrow-size * 0.5 - 0.1rem;
$content-spacing: 1.5rem;

// =============================================================================
// :: Flyout
// =============================================================================
.c-flyout {
	position: relative;

	display: inline-flex;
}

// =============================================================================
// :: Elements
// =============================================================================
.c-flyout__trigger {
	display: flex;
	justify-content: center;
	align-items: center;
	order: 1;

	cursor: pointer;
}

.c-flyout__content {
	position: absolute;
	left: 50%;
	bottom: calc(100% + #{$content-spacing});
	z-index: $z-index-roof;

	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 30rem;
	padding: 2.2rem;

	opacity: 0;

	color: $text-color-base;
	background-color: $background-color-base;
	box-shadow: 0 1.2rem 4rem -1rem $box-shadow-color-base;

	transform: translateX(-50%);

	transition:
		opacity 0.3s ease-in-out,
		height 0s ease-in-out 0.3s;

	pointer-events: none;

	&::before {
		content: "";

		position: absolute;
		left: 50%;
		bottom: $arrow-top-position;
		z-index: $z-index-floor - 1;

		width: $arrow-size;
		height: $arrow-size;

		border-top: 0.1rem solid $border-color-light;
		border-left: 0.1rem solid $border-color-light;
		background-color: $background-color-base;

		transform: translateX(-50%) rotate(45deg);
	}

	p {
		font-size: $font-size-2x-small;
		text-align: center;
		white-space: normal;
	}
}

// =============================================================================
// :: States
// =============================================================================
.c-flyout {

	&:hover {

		.c-flyout__content {
			@include respond-at(get-breakpoint("tablet")) {
				opacity: 1;

				pointer-events: auto;
			}
		}
	}

	&.is-open {

		.c-flyout__content {
			height: auto;

			opacity: 1;

			transition:
				opacity 0.3s ease-in-out,
				height 0s ease-in-out;

			pointer-events: auto;
		}
	}
}