// Creates a map that will be used both on lacuna mixin and on material mixins
@use '@angular/material' as mat;
@use "sass:map";

// import SPA definitions of styles
@use "./styles/utilities" as spaUtilities;
@use "./styles/layout" as spaLayout;
@use "./styles/mixins" as spaMixins;
@use "./styles/override" as spaOverride;
@use "./styles/buttons" as spaButtons;
@use "./styles/text" as spaText;
@use "./styles/custom" as spaCustom;

// import SPA themes
@use "./themes/themes.scss" as *;

@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';

@function lacuna-spa-theme($primary, $accent, $warn, $success, $glow, $light, $dark, $isThemeLight: true) {
	$angularMatMap: ();

	@if $isThemeLight {
		$angularMatMap: mat.m2-define-light-theme((
			color: (
				primary: $primary,
				accent: $accent,
				warn: $warn,
			))
		);
	}
	@else {
		$angularMatMap: mat.m2-define-dark-theme((
			color: (
				primary: $primary,
				accent: $accent,
				warn: $warn,
			))
		);
	}

	$lacunaMap: ( success: $success, glow: $glow, light: $light, dark: $dark );

	@return map.merge($lacunaMap, $angularMatMap);
}

// overrides bootstrap $spacer variable, and prevents compatibility issues with angular material
@mixin custom-spacer() {
	$spacer: 1.07143rem !global;

	$spacers: ( 0: 0, 1: $spacer * .25, 2: $spacer * .5, 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 3, ) !global;
}

$spa-theme-success: #73BA64;
$spa-theme-glow: #F9B233;
$spa-theme-light: #cecece;

$dgy-theme: lacuna-spa-theme($dgy-theme-primary, $dgy-theme-accent, $dgy-theme-warn, $dgy-success, $dgy-glow, $dgy-light, $dgy-dark);
$clg-theme: lacuna-spa-theme($clg-theme-primary, $clg-theme-accent, $clg-theme-warn, $clg-success, $clg-glow, $clg-light, $clg-dark);
$dcg-theme: lacuna-spa-theme($dcg-theme-primary, $dcg-theme-accent, $dcg-theme-warn, $dcg-success, $dcg-glow, $dcg-light, $dcg-dark);
$alg-theme: lacuna-spa-theme($alg-theme-primary, $alg-theme-accent, $alg-theme-warn, $alg-success, $alg-glow, $alg-light, $alg-dark);
$osg-theme: lacuna-spa-theme($osg-theme-primary, $osg-theme-accent, $osg-theme-warn, $osg-success, $osg-glow, $osg-light, $osg-dark);
$gdc-theme: lacuna-spa-theme($gdc-theme-primary, $gdc-theme-accent, $gdc-theme-warn, $gdc-success, $gdc-glow, $gdc-light, $gdc-dark);
$eva-theme: lacuna-spa-theme($eva-theme-primary, $eva-theme-accent, $eva-theme-warn, $eva-success, $eva-glow, $eva-light, $eva-dark);
$idg-theme: lacuna-spa-theme($idg-theme-primary, $idg-theme-accent, $idg-theme-warn, $idg-success, $idg-glow, $idg-light, $idg-dark);
$dir-theme: lacuna-spa-theme($dir-theme-primary, $dir-theme-accent, $dir-theme-warn, $dir-success, $dir-glow, $dir-light, $dir-dark);
$tbg-theme: lacuna-spa-theme($tbg-theme-primary, $tbg-theme-accent, $tbg-theme-warn, $tbg-success, $tbg-glow, $tbg-light, $tbg-dark);
$qbm-theme: lacuna-spa-theme($qbm-theme-primary, $qbm-theme-accent, $qbm-theme-warn, $qbm-success, $qbm-glow, $qbm-light, $qbm-dark);
$cam-theme: lacuna-spa-theme($cam-theme-primary, $cam-theme-accent, $cam-theme-warn, $cam-success, $cam-glow, $cam-light, $cam-dark);
$acr-theme: lacuna-spa-theme($acr-theme-primary, $acr-theme-accent, $acr-theme-warn, $acr-success, $acr-glow, $acr-light, $acr-dark);
$clc-theme: lacuna-spa-theme($clc-theme-primary, $clc-theme-accent, $clc-theme-warn, $clc-success, $clc-glow, $clc-light, $clc-dark);
$apb-theme: lacuna-spa-theme($apb-theme-primary, $apb-theme-accent, $apb-theme-warn, $apb-success, $apb-glow, $apb-light, $apb-dark);
$mse-theme: lacuna-spa-theme($mse-theme-primary, $mse-theme-accent, $mse-theme-warn, $mse-success, $mse-glow, $mse-light, $mse-dark);
$obg-theme: lacuna-spa-theme($obg-theme-primary, $obg-theme-accent, $obg-theme-warn, $obg-success, $obg-glow, $obg-light, $obg-dark);
$cgo-theme: lacuna-spa-theme($cgo-theme-primary, $cgo-theme-accent, $cgo-theme-warn, $cgo-success, $cgo-glow, $cgo-light, $cgo-dark);
$vgy-theme: lacuna-spa-theme($vgy-theme-primary, $vgy-theme-accent, $vgy-theme-warn, $vgy-success, $vgy-glow, $vgy-light, $vgy-dark);
$pps-theme: lacuna-spa-theme($pps-theme-primary, $pps-theme-accent, $pps-theme-warn, $pps-success, $pps-glow, $pps-light, $pps-dark);
$cof-theme: lacuna-spa-theme($cof-theme-primary, $cof-theme-accent, $cof-theme-warn, $cof-success, $cof-glow, $cof-light, $cof-dark);
$cpg-theme: lacuna-spa-theme($cpg-theme-primary, $cpg-theme-accent, $cpg-theme-warn, $cpg-success, $cpg-glow, $cpg-light, $cpg-dark);
$sgy-theme: lacuna-spa-theme($sgy-theme-primary, $sgy-theme-accent, $sgy-theme-warn, $sgy-success, $sgy-glow, $sgy-light, $sgy-dark);
$frv-theme: lacuna-spa-theme($frv-theme-primary, $frv-theme-accent, $frv-theme-warn, $frv-success, $frv-glow, $frv-light, $frv-dark);
$hid-theme: lacuna-spa-theme($hid-theme-primary, $hid-theme-accent, $hid-theme-warn, $hid-success, $hid-glow, $hid-light, $hid-dark);

@mixin lacuna-spa($lacuna-theme) {
	@include lacuna-spa-core($lacuna-theme);

	.dgy-theme {
		@include mat.all-component-colors($dgy-theme);
		@include lacuna-spa-core($dgy-theme);
	}

	.clg-theme {
		@include mat.all-component-colors($clg-theme);
		@include lacuna-spa-core($clg-theme);
	}

	.dcg-theme {
		@include mat.all-component-colors($dcg-theme);
		@include lacuna-spa-core($dcg-theme);
	}

	.alg-theme {
		@include mat.all-component-colors($alg-theme);
		@include lacuna-spa-core($alg-theme);
	}

	.osg-theme {
		@include mat.all-component-colors($osg-theme);
		@include lacuna-spa-core($osg-theme);
	}

	.gdc-theme {
		@include mat.all-component-colors($gdc-theme);
		@include lacuna-spa-core($gdc-theme);
	}

	.eva-theme {
		@include mat.all-component-colors($eva-theme);
		@include lacuna-spa-core($eva-theme);
	}

	.idg-theme {
		@include mat.all-component-colors($idg-theme);
		@include lacuna-spa-core($idg-theme);
	}

	.dir-theme {
		@include mat.all-component-colors($dir-theme);
		@include lacuna-spa-core($dir-theme);
	}

	.tbg-theme {
		@include mat.all-component-colors($tbg-theme);
		@include lacuna-spa-core($tbg-theme);
	}

	.qbm-theme {
		@include mat.all-component-colors($qbm-theme);
		@include lacuna-spa-core($qbm-theme);
	}

	.cam-theme {
		@include mat.all-component-colors($cam-theme);
		@include lacuna-spa-core($cam-theme);
	}

	.acr-theme {
		@include mat.all-component-colors($acr-theme);
		@include lacuna-spa-core($acr-theme);
	}

	.clc-theme {
		@include mat.all-component-colors($clc-theme);
		@include lacuna-spa-core($clc-theme);
	}

	.apb-theme {
		@include mat.all-component-colors($apb-theme);
		@include lacuna-spa-core($apb-theme);
	}

	.mse-theme {
		@include mat.all-component-colors($mse-theme);
		@include lacuna-spa-core($mse-theme);
	}

	.obg-theme {
		@include mat.all-component-colors($obg-theme);
		@include lacuna-spa-core($obg-theme);
	}

	.cgo-theme {
		@include mat.all-component-colors($cgo-theme);
		@include lacuna-spa-core($cgo-theme);
	}

	.vgy-theme {
		@include mat.all-component-colors($vgy-theme);
		@include lacuna-spa-core($vgy-theme);
	}

	.pps-theme {
		@include mat.all-component-colors($pps-theme);
		@include lacuna-spa-core($pps-theme);
	}

	.cof-theme {
		@include mat.all-component-colors($cof-theme);
		@include lacuna-spa-core($cof-theme);
	}

	.cpg-theme {
		@include mat.all-component-colors($cpg-theme);
		@include lacuna-spa-core($cpg-theme);
	}

	.sgy-theme {
		@include mat.all-component-colors($sgy-theme);
		@include lacuna-spa-core($sgy-theme);
	}

	.frv-theme {
		@include mat.all-component-colors($frv-theme);
		@include lacuna-spa-core($frv-theme);
	}

	.hid-theme {
		@include mat.all-component-colors($hid-theme);
		@include lacuna-spa-core($hid-theme);
	}
}

// https://developers.google.com/fonts/docs/material_icons#setup_method_2_self_hosting with a twist (see README.md)
@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: local('Material Icons'), local('MaterialIcons-Regular'), url('/assets/fonts/MaterialIcons-Regular.ttf') format('truetype');
}

@mixin lacuna-spa-core($lacuna-theme) {
	@include spaUtilities.utilities($lacuna-theme);

	@include spaLayout.layout;
	@include spaLayout.nav-menu($lacuna-theme);

	@include spaMixins.colors($lacuna-theme);
	@include spaMixins.boxes($lacuna-theme);
	@include spaMixins.table($lacuna-theme);

	@include spaOverride.text-override($lacuna-theme);
	@include spaOverride.link-override($lacuna-theme);
	@include spaOverride.card-override($lacuna-theme);
	@include spaOverride.layout-override($lacuna-theme);

	@include spaButtons.buttons($lacuna-theme);

	@include spaText.prop($lacuna-theme);
	@include spaText.text-styles($lacuna-theme);

	@include spaCustom.breadcrumb($lacuna-theme);
	@include spaCustom.dnd($lacuna-theme);
	@include spaCustom.notification($lacuna-theme);
	@include spaCustom.lang($lacuna-theme);

	// typography
	html {
		@extend .mat-typography;
	}

	// https://developers.google.com/fonts/docs/material_icons#setup_method_2_self_hosting
	.material-icons {
		display: inline-block;
		font-family: 'Material Icons';
		font-size: 24px; /* Preferred icon size */
		font-weight: normal;
		line-height: 1;
		font-style: normal;
		text-transform: none;
		letter-spacing: normal;
		word-wrap: normal;
		white-space: nowrap;
		direction: ltr;
		/* Support for all WebKit browsers. */
		-webkit-font-smoothing: antialiased;
		/* Support for Safari and Chrome. */
		text-rendering: optimizeLegibility;
		/* Support for Firefox. */
		-moz-osx-font-smoothing: grayscale;
		/* Support for IE. */
		font-feature-settings: 'liga';
	}

	.component-title {
		font-weight: 700 !important;
		color: mat.m2-get-color-from-palette(map.get($lacuna-theme, primary));

		.mat-icon {
			vertical-align: middle;
			color: mat.m2-get-color-from-palette(map.get($lacuna-theme, accent));
		}
	}

	.mat-sidenav-container {
		min-height: calc(100vh - 70px);
	}
	/*.mat-sidenav-content {
		width: auto !important;
	}*/
	.mat-sidenav {
		--mat-sidenav-container-width: 200px;

		.mat-mdc-list {

			.mat-mdc-list-item-title {
				color: #fff;
			}

			.mat-mdc-list-item-icon {
				color: #fff;
			}
		}
	}

	.mat-mdc-menu-panel > * {
		z-index: 3000 !important;
		min-width: 200px;
	}

	.mat-drawer-container {
		background-color: rgba(255,255,255,1);
	}

	.mat-mdc-checkbox {
		margin-top: 15px;
	}

	.bg-welcome {
		background-position: center;
		background-repeat: no-repeat;
		background-size: auto;
		background-color: #fff;
		position: absolute;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		z-index: -1;
	}
	/*.box-dark {
		border-radius: .25rem;
		background-color: #fff;
		padding: 1.75em;
		margin-bottom: 1em;
		@include mat-elevation(2);
	}*/
	.area-title {
		font-weight: 700;
		font-size: 14px;
		margin-bottom: 0 !important;
	}

	.full-height {
		min-height: 100vh;
	}

	.rounded-sm {
		border-radius: 5px;
	}

	.mat-expansion-panel-header-title {
		h3 {
			font-weight: 500;
		}
	}
	//Snackbar
	.mat-mdc-snack-bar-container {
		@include media-breakpoint-only(xs) {
			width: 100% !important;
		}
	}

	.snackbar-margin {
		margin-top: 80px !important;
	}

	.icon-btn-sm {
		height: 36px;
		width: 36px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		line-height: 0;
		border: none;
		background-color: transparent;
		transition: .3s;

		&:hover {
			color: #ffffff;
			background-color: #e8e8e8;
		}

		.mat-icon {
			font-size: 20px;
			height: 20px;
			width: 20px;
		}
	}
	//positive response
	.success-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #ececec;
		border-radius: 10px;
	}

	.success-title {
		color: map.get($lacuna-theme, success) !important;
		text-align: center;
		margin-bottom: 0 !important;
		margin-top: .5em;
	}

	.success-actions {
		display: flex;
		justify-content: center;
		border-radius: 10px;
		padding: 1rem 1rem 0 1rem;
		margin-top: .7em;
	}

	.agent-locked {
		color: red !important;
	}

	.mat-mdc-list-item-title {
		white-space: pre-wrap;
	}

	.mat-mdc-dialog-actions {
		padding: 8px 24px !important;
	}

	.dialog-close {
		float: right;
	}

	.spa-nav-menu {
		mat-icon {
			margin-right: 16px !important;
		}

		mat-list-item {
			cursor: pointer !important;
		}
	}

	.w-100 {
		width: 100%;
	}

	.mat-mdc-form-field {
		height: fit-content;
		// Since we are not using mat-error/mat-hint spacement after mat-form-fields anymore adding a margin-bottom to detach inputs
		margin-bottom: 1.5rem;
	}

	.mat-form-field-appearance-outline .date-icons {
		margin-top: calc(-1 * var(--mat-form-field-container-vertical-padding));
	}

	.mat-mdc-button, .mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button {
		letter-spacing: 0.5px !important;

		&>.mat-icon {
			font-size: 24px !important;
			height: 24px !important;
			width: 24px !important;
		}
	}

	.mat-icon {
		overflow: visible !important;
	}

	.mat-mdc-checkbox, .mat-mdc-radio-button {
		.mdc-label {
			margin-bottom: 0px;
		}
	}

	.mdc-button {
		height: fit-content !important;
	}

	.mat-mdc-button {
		min-height: var(--mdc-text-button-container-height);
	}

	.mat-mdc-raised-button {
		min-height: var(--mdc-protected-button-container-height);
	}

	.mat-mdc-outlined-button {
		min-height: var(--mdc-outlined-button-container-height);
	}

	.mat-mdc-unelevated-button {
		min-height: var(--mdc-filled-button-container-height);
	}

	.mat-mdc-extended-fab {
		height: fit-content;
		min-height: var(--mdc-extended-fab-container-height);
	}

	.mat-mdc-dialog-container spa-dialog-title+.mat-mdc-dialog-content {
		padding-top: 0px !important;
	}

	.mat-mdc-dialog-container {
		--mat-dialog-with-actions-content-padding: 20px 24px 0;
	}

	.clean-button {
		background: none;
		border: none;
		letter-spacing: inherit;
		padding: 0;
		font: inherit;
		text-align: inherit;
	}

	// TODO review later
	// bootstrap-reboot.scss is applying some unwanted styles that interfere with mdc-icon-button
	.mdc-icon-button {
		line-height: normal;
		font-family: 'Material Icons';
	}

	lacm-table {
		.mat-mdc-form-field {
			// Removing custom margin-bottom added on mat-mdc-form-field since lacm-table does not need it
			margin-bottom: 0;
		}
	}

	.mat-mdc-slide-toggle {
		label {
			margin-bottom: 0;
		}
	}
}