@use "@gloria/layout/_mixins.scss" as *;

.c-mobile-overlay {
	display: none;
	flex-direction: column;
	z-index: var(--z-index-overlay);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--color-common-white);
	overflow-y: auto;
	opacity: 0;
	transform: translateY(-100%);
	transition: transform var(--duration-fast) var(--cbuc-cubic-out),
	            opacity var(--duration-fast) var(--cbuc-cubic-out);

	&[data-headless='true'] {
		// This is a workaround for the overlay placed on-top of the overlay with the head.
		// If the header is fixed, it is slightly above the overlay and it'll overlap to headless one.
		z-index: calc(var(--z-index-overlay) + 2);
	}

	&.is-anim {
		&-entering {
			transform: translateY(0);
			opacity: 1;
		}

		&-entered {
			transform: translateY(0);
			opacity: 1;
		}

		&-exiting {
			transform: translateY(-100%);
			opacity: 0;
		}

		&-exited {
			transform: translateY(-100%);
			opacity: 0;
		}
	}

	&__header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: var(--spacing-4);
		border-bottom: 1px solid var(--color-gray-400);
	}

	&__title {
		font-family: var(--font-family-heading);
		font-size: var(--font-size-lg);
		font-weight: var(--font-weight-bold);
	}

	&__content {
		position: relative;
		flex: 1;

		&.is-spaced {
			padding: var(--spacing-4);
		}
	}
}

