@use "sass:map";
@use "sass:meta";
@use "@angular/material" as mat;
@use "../global/index" as global;
@use "../themes/index" as themes;

$radius: 16px !default;
$icon-spacing: global.$spacing !default;

@mixin override-color($theme) {
	$color-config: mat.get-color-config($theme);
	$primary-palette: map.get($color-config, "primary");
	$foreground: map.get($color-config, "foreground");
	$background: map.get($color-config, "background");
	$accent-palette: map.get($color-config, "accent");
	$warn-palette: map.get($color-config, "warn");

	$overlayFn: themes.get-overlay-function($theme);

	.mat-mdc-button-base {
		/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
		&.mat-mdc-outlined-button:not([color]):not(.mat-button-disabled) {
			border-color: map.get(map.get($color-config, "foreground"), text);
		}

		&.mat-mdc-outlined-button{
			&.mat-primary {
				border-color: mat.get-color-from-palette($primary-palette) !important;
			}

			&.mat-accent {
				border-color: mat.get-color-from-palette($accent-palette) !important;;
			}

			&.mat-warn {
				border-color: mat.get-color-from-palette($warn-palette) !important;;
			}
		}
	}

	.mdc-button {

		&.buttonAlternative {
			color: white;
			background-color: black;
		}
	}
}

@mixin override-theme($theme) {
	$color-config: mat.get-color-config($theme);

	.mdc-button {
		// Temporary for typo.
		--mdc-typography-button-letter-spacing: normal;
	}

	@if $color-config != null {
		@include override-color($theme);
	}

	.mat-mdc-button-base {
		&.mdc-button,
		&.mat-mdc-unelevated-button,
		&.mat-mdc-outlined-button,
		&.mat-mdc-raised-button {
			text-transform: uppercase;
			border-radius: $radius;
		}

		.mat-icon {
			height: 24px;
			width: 24px;
			font-size: 24px;
		}
	}

	.mat-mdc-button,
	.mat-mdc-unelevated-button,
	.mat-mdc-raised-button,
	.mat-mdc-outlined-button {
		white-space: nowrap;

		.mdc-button__label {
			z-index: 0;
		}
	}

	.mdc-button {
		//For responsive behavior
		min-width: unset;

		&.buttonAlternative {
			border-width: 2px;
			border-radius: global.$shape-radius * 4;
			padding: global.$spacing global.$spacing * 2;
			height: auto;
			gap: global.$spacing;
			line-height: global.$spacing * 2;

			> mat-icon {
				margin: 0;
			}
		}
	}

}