// color utilities
@use '@angular/material' as mat;
@use "sass:map";

@mixin colors($lacuna-theme) {
	$theme-palette: (
		"primary": mat.m2-get-color-from-palette(map.get($lacuna-theme, "primary"), 500),
		"accent": mat.m2-get-color-from-palette(map.get($lacuna-theme, "accent"), 500),
		"warn": mat.m2-get-color-from-palette(map.get($lacuna-theme, "warn"), 500),
		"success": map.get($lacuna-theme, "success"),
		"glow": map.get($lacuna-theme, "glow"),
		"light": map.get($lacuna-theme, "light"),
		"dark": map.get($lacuna-theme, "dark"),
		"white": #fff
	);

	@each $text, $color in $theme-palette {
		.text-#{$text} {
			color: $color !important;
		}
	}

	@each $bg, $color in $theme-palette {
		.bg-#{$bg} {
			background-color: $color !important;
		}
	}

	@each $border, $color in $theme-palette {
		.theme-border-#{$border} {
			border-radius: .25rem;
			border: 1px solid $color;
		}
	}

	@each $snackbar, $color in $theme-palette {
		.snackbar-#{"" + $snackbar} {
			--mdc-snackbar-container-color: #{"" + $color} !important;
		}
	}

	.spa-nav-menu {
		mat-list-item:hover {

			mat-icon {
				color: mat.m2-get-color-from-palette(map.get($lacuna-theme, accent), 500) !important;
			}

			span .mat-mdc-list-item-title {
				color: mat.m2-get-color-from-palette(map.get($lacuna-theme, accent), 500) !important;
			}
		}
	}

	.mdc-list-item:focus .mdc-list-item__primary-text {
		color: mat.m2-get-color-from-palette(map.get($lacuna-theme, accent), 500) !important;
	}
}

// box variants
@mixin boxes($lacuna-theme) {
	.box-light {
		border-radius: .25rem;
		border: 1px solid map.get($lacuna-theme, "light");
		padding: 1.25em 1.75em;
		margin-bottom: 1em;
	}

	.bg-light {
		.box-light {
			border-radius: .25rem; //sdfsdf
			background-color: #fff;
			padding: 1.25em 1.75em;
			margin-bottom: 1em !important;
			@include mat.elevation(2);
		}
	}

	.mat-sidenav-container.bg-admin {
		background-color: #bdbdbd;

		.box-light {
			border-radius: .25rem;
			background-color: #fff;
			padding: 1.25em 1.75em;
			margin-bottom: 1em;
			@include mat.elevation(2);
		}
	}
}

@mixin table($lacuna-theme) {
	$cellSize: ( "sm": 0.25, "md": 0.5, "lg": 0.75 );

	@each $size, $flex in $cellSize {
		.cell-#{$size} {
			flex: $flex;
		}
	}
}

@mixin legacy-bootstrap($spacers) {
	.mr-1 {
		margin-right: map.get($spacers, 1) !important;
	}

	.mr-2 {
		margin-right: map.get($spacers, 2) !important;
	}

	.mr-3 {
		margin-right: map.get($spacers, 3) !important;
	}

	.mr-4 {
		margin-right: map.get($spacers, 4) !important;
	}

	.mr-5 {
		margin-right: map.get($spacers, 5) !important;
	}

	.pr-1 {
		padding-right: map.get($spacers, 1) !important;
	}

	.pr-2 {
		padding-right: map.get($spacers, 2) !important;
	}

	.pr-3 {
		padding-right: map.get($spacers, 3) !important;
	}

	.pr-4 {
		padding-right: map.get($spacers, 4) !important;
	}

	.pr-5 {
		padding-right: map.get($spacers, 5) !important;
	}

	.ml-1 {
		margin-left: map.get($spacers, 1) !important;
	}

	.ml-2 {
		margin-left: map.get($spacers, 2) !important;
	}

	.ml-3 {
		margin-left: map.get($spacers, 3) !important;
	}

	.ml-4 {
		margin-left: map.get($spacers, 4) !important;
	}

	.ml-5 {
		margin-left: map.get($spacers, 5) !important;
	}

	.pl-1 {
		padding-left: map.get($spacers, 1) !important;
	}

	.pl-2 {
		padding-left: map.get($spacers, 2) !important;
	}

	.pl-3 {
		padding-left: map.get($spacers, 3) !important;
	}

	.pl-4 {
		padding-left: map.get($spacers, 4) !important;
	}

	.pl-5 {
		padding-left: map.get($spacers, 5) !important;
	}
}