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

.#{$prefix}theme-fci {
	.#{$prefix}list {
		--#{$prefix}list-padding-y: 0px;
		--#{$prefix}list-padding-x: 0px;
		--#{$prefix}list-color: #343a40;
		--#{$prefix}list-background: #fff;

		// Tree indent per level — standard web/Fluent UI v9 (12px)
		--#{$prefix}list-tree-indent-size: 12px;
	}

	.#{$prefix}list--divider .#{$prefix}list-item {
		border-bottom: 1px solid #e0e0e0;
	}

	.#{$prefix}list--divider .#{$prefix}list-item:last-child {
		border-bottom: 0px;
	}

	.#{$prefix}list-item {
		--#{$prefix}list-item-border-radius: 0px;

		--#{$prefix}list-item-title-font-weight: 500;
		--#{$prefix}list-item-title-opacity: 1;

		--#{$prefix}list-item-subtitle-font-weight: 400;
		--#{$prefix}list-item-subtitle-opacity: 0.95;

		& > .#{$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;
		}

		&--selected {
			--#{$prefix}list-item-color: var(--#{$prefix}primary-color);

			& > .#{$prefix}overlay {
				--#{$prefix}overlay-color: var(--#{$prefix}primary-color);
				--#{$prefix}overlay-opacity: 0.08;
				--#{$prefix}_hover-overlay-opacity: 0.12;
				--#{$prefix}_active-overlay-opacity: 0.16;
			}
		}
	}

	.#{$prefix}list-subheader {
		--#{$prefix}list-subheader-border-width: 1px;
		--#{$prefix}list-subheader-border-color: #dee2e6;
	}

	.#{$prefix}list-group > .#{$prefix}list-item--selected {
		& > .#{$prefix}overlay {
			--#{$prefix}overlay-opacity: 0;
			--#{$prefix}_hover-overlay-opacity: 0;
			--#{$prefix}_active-overlay-opacity: 0;
		}
	}

	.#{$prefix}list--sm .#{$prefix}list-item {
		--#{$prefix}list-item-min-height: 20px;
		--#{$prefix}list-item-padding-y: 0;
		--#{$prefix}list-item-padding-x: 8px;
		--#{$prefix}list-item-padding-level: 12px;
		--#{$prefix}list-item-font-size: 11px;
		--#{$prefix}list-item-gap: 6px;

		--#{$prefix}list-item-title-font-size: 11px;
		--#{$prefix}list-item-title-line-height: 16px;

		--#{$prefix}list-item-subtitle-font-size: 10px;
		--#{$prefix}list-item-subtitle-line-height: 14px;
	}

	.#{$prefix}list--sm .#{$prefix}list-item .#{$prefix}icon {
		--#{$prefix}icon-font-size: 12px;
	}

	.#{$prefix}list--md .#{$prefix}list-item {
		--#{$prefix}list-item-min-height: 24px;
		--#{$prefix}list-item-padding-y: 0;
		--#{$prefix}list-item-padding-x: 12px;
		--#{$prefix}list-item-padding-level: 16px;
		--#{$prefix}list-item-font-size: 12px;
		--#{$prefix}list-item-gap: 8px;

		--#{$prefix}list-item-title-font-size: 12px;
		--#{$prefix}list-item-title-line-height: 18px;

		--#{$prefix}list-item-subtitle-font-size: 11px;
		--#{$prefix}list-item-subtitle-line-height: 16px;
	}

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

	.#{$prefix}list--md .#{$prefix}list-item .#{$prefix}checkbox .#{$prefix}icon {
		--#{$prefix}icon-font-size: 10px;
	}

	.#{$prefix}list--lg .#{$prefix}list-item {
		--#{$prefix}list-item-min-height: 28px;
		--#{$prefix}list-item-padding-y: 0;
		--#{$prefix}list-item-padding-x: 14px;
		--#{$prefix}list-item-padding-level: 20px;
		--#{$prefix}list-item-font-size: 14px;
		--#{$prefix}list-item-gap: 10px;

		--#{$prefix}list-item-title-font-size: 14px;
		--#{$prefix}list-item-title-line-height: 20px;

		--#{$prefix}list-item-subtitle-font-size: 12px;
		--#{$prefix}list-item-subtitle-line-height: 18px;
	}

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