@use '../../../variables' as *;

.#{$prefix}theme-fci {
	.#{$prefix}dropdown-popup {
		--#{$prefix}dropdown-popup-padding-block: 6px;
		--#{$prefix}dropdown-popup-border-radius: 8px;
		--#{$prefix}dropdown-popup-background: rgba(255, 255, 255, 0.98);
		--#{$prefix}dropdown-popup-backdrop-filter: blur(10px);
		--#{$prefix}dropdown-popup-color: #343a40;
		--#{$prefix}dropdown-popup-border-width: 1px;
		--#{$prefix}dropdown-popup-border-color: rgba(0, 0, 0, 0.08);
		--#{$prefix}dropdown-popup-shadow:
			0 0 0 1px rgba(0, 0, 0, 0.02),
			0 2px 4px rgba(0, 0, 0, 0.04),
			0 8px 16px rgba(0, 0, 0, 0.08),
			0 16px 32px rgba(0, 0, 0, 0.06);
	}

	.#{$prefix}dropdown-separator {
		--#{$prefix}dropdown-separator-height: 1px;
		--#{$prefix}dropdown-separator-color: #dee2e6;
		--#{$prefix}dropdown-separator-margin: 6px 16px;
	}

	.#{$prefix}dropdown-item {
		--#{$prefix}dropdown-item-border-radius: 6px;
		--#{$prefix}dropdown-item-margin-inline: 4px;
		--#{$prefix}dropdown-item-disabled-opacity: 0.5;
		--#{$prefix}dropdown-item-focus-outline: var(--#{$prefix}primary-color);
		--#{$prefix}dropdown-item-selected-color: inherit;
		--#{$prefix}dropdown-item-transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
		--#{$prefix}dropdown-item-content-transition: color 150ms ease-out;

		--#{$prefix}dropdown-item-title-font-weight: 600;
		--#{$prefix}dropdown-item-title-color: inherit;
		--#{$prefix}dropdown-item-title-letter-spacing: -0.01em;

		--#{$prefix}dropdown-item-subtitle-color: #4b5563;
		--#{$prefix}dropdown-item-subtitle-font-weight: 400;
		--#{$prefix}dropdown-item-subtitle-letter-spacing: 0em;
		--#{$prefix}dropdown-item-subtitle-margin-top: 2px;

		--#{$prefix}dropdown-item-description-color: #64748b;
		--#{$prefix}dropdown-item-description-font-weight: 400;
		--#{$prefix}dropdown-item-description-letter-spacing: 0.01em;
		--#{$prefix}dropdown-item-description-margin-top: 1px;

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-color: inherit;
			--#{$prefix}overlay-opacity: 0;
			--#{$prefix}_hover-overlay-color: inherit;
			--#{$prefix}_hover-overlay-opacity: 0.06;
			--#{$prefix}_active-overlay-opacity: 0.1;
			transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
		}

		&[data-highlighted] > .#{$prefix}overlay {
			--#{$prefix}overlay-opacity: 0.08;
		}

		&--selected {
			--#{$prefix}dropdown-item-selected-color: var(--#{$prefix}primary-color);
			font-weight: 500;

			& > .#{$prefix}overlay {
				--#{$prefix}overlay-color: var(--#{$prefix}primary-color);
				--#{$prefix}overlay-opacity: 0.1;
				--#{$prefix}_hover-overlay-color: var(--#{$prefix}primary-color);
				--#{$prefix}_hover-overlay-opacity: 0.14;
				--#{$prefix}_active-overlay-color: var(--#{$prefix}primary-color);
				--#{$prefix}_active-overlay-opacity: 0.18;
			}

			&[data-highlighted] > .#{$prefix}overlay {
				--#{$prefix}overlay-color: var(--#{$prefix}primary-color);
				--#{$prefix}overlay-opacity: 0.14;
			}
		}

		&--disabled > .#{$prefix}overlay {
			--#{$prefix}overlay-opacity: 0;
		}
	}

	.#{$prefix}dropdown-submenu-trigger {
		& > .#{$prefix}overlay {
			--#{$prefix}overlay-color: inherit;
			--#{$prefix}overlay-opacity: 0;
			--#{$prefix}_hover-overlay-color: inherit;
			--#{$prefix}_hover-overlay-opacity: 0.06;
			--#{$prefix}_active-overlay-opacity: 0.1;
			transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
		}

		&[data-highlighted] > .#{$prefix}overlay {
			--#{$prefix}overlay-opacity: 0.08;
		}

		&[data-popup-open] > .#{$prefix}overlay {
			--#{$prefix}overlay-opacity: 0.06;
		}
	}

	// Size variants - sm (Compact)
	.#{$prefix}dropdown--sm .#{$prefix}dropdown-item {
		--#{$prefix}dropdown-item-padding-block: 4px;
		--#{$prefix}dropdown-item-padding-left: 6px;
		--#{$prefix}dropdown-item-padding-right: 20px;
		--#{$prefix}dropdown-item-font-size: 11px;
		--#{$prefix}dropdown-item-line-height: 14px;
		--#{$prefix}dropdown-item-gap: 6px;

		--#{$prefix}dropdown-item-title-font-size: 11px;
		--#{$prefix}dropdown-item-title-line-height: 13px;
		--#{$prefix}dropdown-item-subtitle-font-size: 10px;
		--#{$prefix}dropdown-item-subtitle-line-height: 11px;
		--#{$prefix}dropdown-item-description-font-size: 9px;
		--#{$prefix}dropdown-item-description-line-height: 10px;
	}

	.#{$prefix}dropdown--sm .#{$prefix}dropdown-item .#{$prefix}icon {
		--#{$prefix}icon-font-size: 14px;
	}

	// Size variants - md (Default)
	.#{$prefix}dropdown--md .#{$prefix}dropdown-item {
		--#{$prefix}dropdown-item-padding-block: 6px;
		--#{$prefix}dropdown-item-padding-left: 8px;
		--#{$prefix}dropdown-item-padding-right: 24px;
		--#{$prefix}dropdown-item-font-size: 12px;
		--#{$prefix}dropdown-item-line-height: 16px;
		--#{$prefix}dropdown-item-gap: 8px;

		--#{$prefix}dropdown-item-title-font-size: 12px;
		--#{$prefix}dropdown-item-title-line-height: 15px;
		--#{$prefix}dropdown-item-subtitle-font-size: 11px;
		--#{$prefix}dropdown-item-subtitle-line-height: 13px;
		--#{$prefix}dropdown-item-description-font-size: 10px;
		--#{$prefix}dropdown-item-description-line-height: 11px;
	}

	.#{$prefix}dropdown--md .#{$prefix}dropdown-item .#{$prefix}icon {
		--#{$prefix}icon-font-size: 16px;
	}

	// Size variants - lg (Spacious)
	.#{$prefix}dropdown--lg .#{$prefix}dropdown-item {
		--#{$prefix}dropdown-item-padding-block: 8px;
		--#{$prefix}dropdown-item-padding-left: 12px;
		--#{$prefix}dropdown-item-padding-right: 32px;
		--#{$prefix}dropdown-item-font-size: 14px;
		--#{$prefix}dropdown-item-line-height: 18px;
		--#{$prefix}dropdown-item-gap: 10px;

		--#{$prefix}dropdown-item-title-font-size: 14px;
		--#{$prefix}dropdown-item-title-line-height: 17px;
		--#{$prefix}dropdown-item-subtitle-font-size: 12px;
		--#{$prefix}dropdown-item-subtitle-line-height: 15px;
		--#{$prefix}dropdown-item-description-font-size: 11px;
		--#{$prefix}dropdown-item-description-line-height: 13px;
	}

	.#{$prefix}dropdown--lg .#{$prefix}dropdown-item .#{$prefix}icon {
		--#{$prefix}icon-font-size: 18px;
	}
}