@import '../node_modules/bootstrap/scss/functions';

// override variables

@import './bootstrap/variables';
@import '../node_modules/bootstrap/scss/variables';
@import '../node_modules/bootstrap/scss/variables-dark';

// override maps
@import './bootstrap/maps';

@import '../node_modules/bootstrap/scss/maps';
@import '../node_modules/bootstrap/scss/mixins';
@import '../node_modules/bootstrap/scss/root';

@import '../node_modules/bootstrap/scss/utilities';
@import '../node_modules/bootstrap/scss/reboot';

// override typography

@import './bootstrap/typography';
@import '../node_modules/bootstrap/scss/type';
@import './bootstrap/accordion';
@import '../node_modules/bootstrap/scss/transitions';
@import '../node_modules/bootstrap/scss/badge';
@import '../node_modules/bootstrap/scss/card';
@import '../node_modules/bootstrap/scss/grid';
@import '../node_modules/bootstrap/scss/containers';
@import '../node_modules/bootstrap/scss/helpers';
@import '../node_modules/bootstrap/scss/buttons';
@import './bootstrap/utilities';

@function contrast-ratio($color1, $color2) {
	// Calculate the relative luminance for each color
	$luminance1: luminance($color1);
	$luminance2: luminance($color2);

	// Calculate the contrast ratio
	$contrastRatio: if(
		$luminance1 > $luminance2,
		calc(($luminance1 + 0.05) / ($luminance2 + 0.05)),
		calc(($luminance2 + 0.05) / ($luminance1 + 0.05))
	);

	// Return the contrast ratio
	@return $contrastRatio;
}

@function get-contrasting-text-color($background-color, $min-contrast-ratio: 4.5) {
	// Calculate relative luminance
	$rel-lum: luminance($background-color);
	$bg-lum: if($rel-lum > 0.5, $rel-lum, 1 - $rel-lum);
	// Calculate contrast ratio
	$light-contrast: contrast-ratio($light, $background-color);
	$dark-contrast: contrast-ratio($dark, $background-color);

	// Determine the text color based on contrast ratio and minimum threshold
	@if (calc($bg-lum * $dark-contrast) >= $min-contrast-ratio) {
		@return $dark;
	} @else if (calc($bg-lum * $light-contrast) >= $min-contrast-ratio) {
		@return $light;
	} @else {
		@return if($light-contrast > $dark-contrast, $light, $dark);
	}
}

@each $color, $hex in $all-colors {
	.bg-#{$color} {
		background-color: $hex;
		color: get-contrasting-text-color($hex);
	}
	.bg-gradient-#{$color} {
		--#{$prefix}gradient-start:0%;
		--#{$prefix}gradient-end:100%;
		--#{$prefix}gradient-to: transparent;
	
		@include gradient-x($start-color: $hex, $end-color: var(--#{$prefix}gradient-to), $start-percent: var(--#{$prefix}gradient-start), $end-percent: var(--#{$prefix}gradient-end));
	}
}

@each $color, $hex in $theme-colors {
	.bg-gradient-#{$color} {
		--#{$prefix}gradient-start:0%;
		--#{$prefix}gradient-end:100%;
		--#{$prefix}gradient-to: transparent;
		
		@include gradient-x($start-color: $hex, $end-color: var(--#{$prefix}gradient-to), $start-percent: var(--#{$prefix}gradient-start), $end-percent: var(--#{$prefix}gradient-end));
	}
}

@each $color, $hex in $all-colors {
	.border-#{$color} {
		--#{$prefix}border-color: #{$hex};
	}
}

@import '../node_modules/bootstrap/scss/utilities/api';

* {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

html,
body {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
}