@use '@lucca-front/scss/src/commons/utils/namespace';
@use '@lucca-front/scss/src/commons/utils/keyframe';
@use '@lucca-front/scss/src/commons/utils/color';

@include namespace.appendRootVars {
	--components-cdk-backdrop-opacity: 0.4;
}

.cdk-overlay-container {
	position: fixed;
	z-index: 1000;
	block-size: 100%;
	inset-inline-start: 0;
	pointer-events: none;
	inset-block-start: 0;
	inline-size: calc(100% - var(--commons-pushPanel-inlineSize));
}

.cdk-overlay-connected-position-bounding-box {
	position: absolute;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	min-inline-size: 1px;
	min-block-size: 1px;
}

.cdk-overlay-pane {
	box-sizing: border-box;
	position: absolute;
	pointer-events: auto;
	z-index: 1000;

	> * {
		flex-grow: 1;
		min-inline-size: 0;
	}

	&.mod-optionPicker {
		min-inline-size: 13rem;
		max-inline-size: 30rem;
	}

	&:has(> lu-select-panel) {
		max-inline-size: 35rem !important;
	}
}

.cdk-overlay-backdrop {
	opacity: 0;
	pointer-events: auto;
	position: absolute;
	inset: 0 var(--commons-pushPanel-inlineSize) 0 0 !important;
	transition: opacity var(--commons-animations-durations-fast) ease-in-out;
	z-index: 1000;

	&.cdk-overlay-backdrop-showing {
		opacity: 0.4;
	}

	&.cdk-overlay-dark-backdrop {
		background-color: color.transparentize(var(--palettes-neutral-900), 0.6);
	}

	&.cdk-overlay-transparent-backdrop {
		background: 0 0;
	}
}

.cdk-overlay-backdrop.cdk-overlay-backdrop-showing.lu-popup-backdrop {
	opacity: var(--pr-t-elevation-surface-backdrop);

	@include keyframe.fadeIn;
}