@use 'sass:map';
@use '@angular/material' as mat;
@use './scrollbar.scss' as scrollbar;
@use './bui-card' as card;
@use './ui-theme-legacy' as legacy;
@use '../stepper/stepper-theme' as stepper;
@use '../radio-panel/radio-panel-theme' as radio;
@use '../selection-panel/selection-panel-theme' as selection;
@use '../form-field/form-field-theme';

$default-border-color-transition: border-color 100ms cubic-bezier(0.55, 0, 0.55, 0.2);
$mat-foreground-extract: (
	'secondary-text': 'light',
	'hint-text': 'muted',
	'divider': 'divider',
	'base': 'base',
	'inactive': 'inactive'
);

$mat-background-extract: (
	'card': 'card',
	'background': 'body'
);

@mixin all-component-colors($theme, $border-color-transition: $default-border-color-transition) {
	@if (mat.get-theme-version($theme) == 1) {
		@include stepper.color($theme);
		@include radio.color($theme);
		@include selection.color($theme);

		.bui-border-emphasis:hover {
			border-color: currentColor !important;
			transition: $border-color-transition;
		}

		// @include card.bui-card($color-config);
		@each $p in (primary, tertiary, secondary, error) {
			$c: mat.get-theme-color($theme, $p);
			@include apply-color($p, $c, $border-color-transition);
		}

		.bui-host {
			@each $p in (primary, tertiary, secondary, error) {
				$c: mat.get-theme-color($theme, $p);
				--bui-color-#{$p}: #{$c};
			}

			@if mat.get-theme-type($theme) != dark {
				--bui-color-success: #519602;
				--bui-color-info: #0dcaf0;
				--bui-color-warning: #ffc107;
				--bui-color-error: #dc3545;
			}
		}
	} @else {
		@include legacy.apply-colors($theme);
	}
}

@mixin apply-color($name, $color, $border-color-transition: $default-border-color-transition) {
	.bui-border-#{$name} {
		border-color: $color !important;
		transition: $border-color-transition;
	}
	.bui-bg-#{$name} {
		background-color: $color !important;
	}
	.bui-color-#{$name} {
		color: $color !important;
	}
	.bui-outline-#{$name} {
		outline-color: $color !important;
	}
}

@mixin apply-colors($theme, $border-color-transition: $default-border-color-transition) {
	@include all-component-colors($theme, $border-color-transition);
}

@mixin theme($theme, $border-color-transition: $default-border-color-transition) {
	@if (mat.get-theme-version($theme) == 1) {
		@include apply-colors($theme, $border-color-transition);
		@include stepper.theme($theme);
		@include radio.theme($theme);
		@include selection.theme($theme);
		@include scrollbar.bui-scrollbar;

		.mat-icon {
			&.fas,
			&.far,
			&.fab,
			&.fa {
				display: inline-flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
			}
		}
	} @else {
		@include legacy.theme($theme);
	}
}