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

$colors-map: (
	primary: var(--#{$prefix}primary-color),
	//secondary: var(--#{$prefix}secondary-color),
	secondary: rgba(0, 0, 0, 0.54),
	success: var(--#{$prefix}success-color),
	info: var(--#{$prefix}info-color),
	warning: var(--#{$prefix}warning-color),
	danger: var(--#{$prefix}danger-color),
);

.#{$prefix}theme-centurion {
	.#{$prefix}icon {
		--#{$prefix}icon-font-size-default: 24px;
		--#{$prefix}icon-color: inherit;

		&--xs {
			--#{$prefix}icon-font-size: 12px;
		}

		&--sm {
			--#{$prefix}icon-font-size: 16px;
		}

		&--md {
			--#{$prefix}icon-font-size: 18px;
		}

		&--lg {
			--#{$prefix}icon-font-size: 20px;
		}

		&--xl {
			--#{$prefix}icon-font-size: 24px;
		}

		@each $key, $value in $colors-map {
			&--#{$key} {
				--#{$prefix}icon-color: #{$value};
			}

			@if $key == 'secondary' {
				&--#{$key} {
					--#{$prefix}icon-color: var(--#{$prefix}secondary-action-color);
				}
			}
		}
	}
}