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

$colors-map: (primary, secondary, success, info, warning, danger);

.#{$prefix}theme-fci {
	.#{$prefix}toolbar {
		--#{$prefix}toolbar-background: var(--#{$prefix}white-color);

		--#{$prefix}toolbar-title-font-weight: 500;

		& > .#{$prefix}surface {
			--#{$prefix}surface-color: white;
			--#{$prefix}surface-opacity: 1;
		}

		&--bordered > .#{$prefix}outline-b {
			--#{$prefix}outline-border-width: 1px;
			--#{$prefix}outline-border-color: #ddd;
		}

		&--sm {
			--#{$prefix}toolbar-height: 28px;
			--#{$prefix}toolbar-padding-y: 0;
			--#{$prefix}toolbar-padding-x: 10px;

			--#{$prefix}toolbar-title-font-size: 11px;
			--#{$prefix}toolbar-title-line-height: 16px;
			--#{$prefix}toolbar-subtitle-font-size: 10px;
			--#{$prefix}toolbar-subtitle-line-height: 14px;
		}

		&--md {
			--#{$prefix}toolbar-height: 32px;
			--#{$prefix}toolbar-padding-y: 0;
			--#{$prefix}toolbar-padding-x: 12px;
			--#{$prefix}toolbar-gap: 10px;
			--#{$prefix}toolbar-content-gap: 8px;

			--#{$prefix}toolbar-title-font-size: 12px;
			--#{$prefix}toolbar-title-line-height: 18px;
			--#{$prefix}toolbar-subtitle-font-size: 11px;
			--#{$prefix}toolbar-subtitle-line-height: 16px;
		}

		&--md .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
			--#{$prefix}icon-font-size-default: 18px;
		}

		&--lg {
			--#{$prefix}toolbar-height: 36px;
			--#{$prefix}toolbar-padding-y: 0;
			--#{$prefix}toolbar-padding-x: 14px;

			--#{$prefix}toolbar-title-font-size: 14px;
			--#{$prefix}toolbar-title-line-height: 20px;
			--#{$prefix}toolbar-subtitle-font-size: 12px;
			--#{$prefix}toolbar-subtitle-line-height: 18px;
		}
	}

	.#{$prefix}toolbar--filled {
		--#{$prefix}toolbar-color: var(--#{$prefix}white-color);
	}

	@each $color in $colors-map {
		.#{$prefix}toolbar--filled.#{$prefix}toolbar--#{$color} > .#{$prefix}surface {
			--#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
			--#{$prefix}surface-opacity: 1;
		}
	}
}