@use 'popover';

@layer components {
	.lu-picker-panel {
		@extend %popover-panel;
	}

	.lu-picker-content {
		@extend %popover-content;

		max-block-size: 20rem;
		padding: var(--pr-t-spacings-50);
		overflow-y: auto;
		display: block;
		animation: scaleIn 150ms cubic-bezier(0.25, 0.8, 0.25, 1);
		margin-inline-start: calc(var(--pr-t-spacings-50) * -1);
		margin-inline-end: calc(var(--pr-t-spacings-50) * -1);

		&.is-loading {
			// block-size: 17.5rem;
		}
	}

	.lu-picker-content-option {
		display: flex;
		flex-direction: column;
		gap: var(--pr-t-spacings-50);
	}

	.lu-picker-content-option-emptyState {
		color: var(--palettes-neutral-600);
		padding-inline: var(--pr-t-spacings-100);
		text-align: center;
	}

	.lu-picker-content-option-group {
		margin-block-end: var(--pr-t-spacings-50);

		.optionItem-value {
			--components-options-item-padding-horizontal: var(--pr-t-spacings-250) var(--pr-t-spacings-100);
		}
	}

	.lu-picker-content-option-group-title {
		font: var(--pr-t-font-body-S);
		font-weight: var(--pr-t-font-fontWeight-semibold);
		padding-block: var(--components-options-item-padding-vertical);
		padding-inline: var(--components-options-item-padding-horizontal);
		color: var(--palettes-neutral-600);
		position: sticky;
		inset-block-start: 0;
		background-color: var(--pr-t-elevation-surface-raised);
		z-index: 1;
		display: flex;
		gap: var(--pr-t-spacings-100);
		justify-content: space-between;
		box-shadow: calc(var(--pr-t-spacings-50) * -0.5) calc(var(--pr-t-spacings-50) * -0.5) 0 2px var(--pr-t-elevation-surface-raised); // Mask background options scrolling behind

		&.is-highlighted {
			background-color: var(--palettes-neutral-50);
			border-radius: var(--pr-t-border-radius-default);
			outline: 4px solid var(--palettes-neutral-0);
		}
	}

	.lu-picker-content-add {
		position: sticky;
		display: block;
		inset-block-end: 0;
		background-color: var(--palettes-neutral-0);
		box-shadow: var(--pr-t-elevation-shadow-overflow);
		padding: var(--pr-t-spacings-50);
		margin-block: 0;
		margin-inline: calc(var(--pr-t-spacings-50) * -1);
		transform: translateY(var(--pr-t-spacings-50));
	}

	.lu-picker-content-loading {
		padding: var(--pr-t-spacings-50);
		display: flex;
		color: var(--palettes-neutral-600);
	}

	.lu-picker-loading {
		// deprecated
		position: absolute;
		inset-inline-start: 50%;
		inset-block-start: 50%;
		transform: translateX(-50%) translateY(-50%);
	}

	.lu-picker-header {
		background-color: var(--pr-t-elevation-surface-raised);
		position: sticky;
		inset-block-start: 0;
		inset-inline: 0;
		display: block;
		z-index: 1;
		margin-block-end: var(--pr-t-spacings-50);
		box-shadow: 0 -4px 0 var(--pr-t-spacings-100) var(--pr-t-elevation-surface-raised); // Avoid showing options list while scrolling due to header sticky potisionning
	}

	.lu-picker-textfield {
		inline-size: 100%;
		padding-block-end: var(--pr-t-spacings-100);

		.textfield-input {
			background-color: var(--palettes-neutral-0);
			outline: none;
		}
	}

	.lu-picker-footer {
		background-color: var(--pr-t-elevation-surface-raised);
		position: sticky;
		inset-block-end: 0;
		inset-inline: 0;
		display: block;
		z-index: 1;
	}

	.lu-date-picker-panel {
		inline-size: var(--components-calendar-width);

		.lu-picker-content {
			max-block-size: none;
		}
	}

	.lu-picker-content-group {
		display: flex;
		flex-direction: column;
		gap: var(--pr-t-spacings-50);

		&:not(:hover, :has(.is-highlighted)) {
			.link {
				opacity: 0.0001;
			}
		}
	}
}