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

.#{$prefix}theme-centurion {
	.#{$prefix}dropdown-popup {
		--#{$prefix}dropdown-popup-padding-block: 0.25rem;
		--#{$prefix}dropdown-popup-border-radius: 0px;
		--#{$prefix}dropdown-popup-background: #fff;
		--#{$prefix}dropdown-popup-backdrop-filter: none;
		--#{$prefix}dropdown-popup-color: #343a40;
		--#{$prefix}dropdown-popup-border-width: 1px;
		--#{$prefix}dropdown-popup-border-color: var(--#{$prefix}border-color);
		--#{$prefix}dropdown-popup-shadow: var(--#{$prefix}shadow-sm);
	}

	.#{$prefix}dropdown-separator {
		--#{$prefix}dropdown-separator-height: 1px;
		--#{$prefix}dropdown-separator-color: var(--#{$prefix}border-color);
		--#{$prefix}dropdown-separator-margin: 0.25rem 0;
	}

	.#{$prefix}dropdown-item {
		--#{$prefix}dropdown-item-border-radius: 0px;
		--#{$prefix}dropdown-item-margin-inline: 0;
		--#{$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: none;
		--#{$prefix}dropdown-item-content-transition: none;

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

		--#{$prefix}dropdown-item-subtitle-color: var(--#{$prefix}subtitle-color);
		--#{$prefix}dropdown-item-subtitle-font-weight: 400;
		--#{$prefix}dropdown-item-subtitle-letter-spacing: 0em;
		--#{$prefix}dropdown-item-subtitle-margin-top: 0.125rem;

		--#{$prefix}dropdown-item-description-color: var(--#{$prefix}subtitle-color);
		--#{$prefix}dropdown-item-description-font-weight: 400;
		--#{$prefix}dropdown-item-description-letter-spacing: 0em;
		--#{$prefix}dropdown-item-description-margin-top: 0.0625rem;

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-color: inherit;
			--#{$prefix}overlay-opacity: 0;
			--#{$prefix}_hover-overlay-color: inherit;
			--#{$prefix}_hover-overlay-opacity: 0.04;
			--#{$prefix}_active-overlay-opacity: 0.08;
		}

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

		&--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.08;
				--#{$prefix}_hover-overlay-color: var(--#{$prefix}primary-color);
				--#{$prefix}_hover-overlay-opacity: 0.12;
				--#{$prefix}_active-overlay-color: var(--#{$prefix}primary-color);
				--#{$prefix}_active-overlay-opacity: 0.16;
			}

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

		&--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.04;
			--#{$prefix}_active-overlay-opacity: 0.08;
		}

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

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

	// 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: 4px;
		--#{$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;
	}
}