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

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

	$border-radius: calc(var(global.$spacing) * 2);
	$background-color: if($-theme == "dark", themes.dark-color-overlay(2), themes.light-color-overlay(2));
	$hover-background-color: if($-theme == "dark", themes.dark-color-overlay(6), themes.light-color-overlay(6));
	$thumb-color: map.get($primary-palette, default);
	$thumb-hover-color: map.get($primary-palette, A700);

	* {
		scrollbar-color: #{$thumb-color} #{$background-color};
		scrollbar-width: thin;
		&:hover{
			scrollbar-color: #{$thumb-hover-color} #{$hover-background-color};
		}
	}

	::-webkit-scrollbar-track {
		border-radius: #{$border-radius};
		background-color: #{$background-color};

		&:hover {
			background-color: #{$hover-background-color};
		}
	}

	::-webkit-scrollbar-thumb{
		border-radius: #{$border-radius};
		background-color: #{$thumb-color};

		&:hover {
			background-color: #{$thumb-hover-color};
		}
	}

	::-webkit-scrollbar {
		display: inline;
		width: global.$spacing;
		height: global.$spacing;
	}
}

@mixin override-theme($theme) {
	$color-config: mat.get-color-config($theme);
	@if $color-config != null {
		@include override-color($theme);
	}
}