//--Backgrounds
$bg: #f3f3f3 !default;
$bgCard: #fff !default;

$sidebarBg: $bgCard !default;
$sidebarMainBg: $bgCard !default;
$topbarBg: $bgCard !default;

//--Font Colors
$mainFont: #212121 !default;
$subFont: #4f4f4f !default;

$sidebarFont: $mainFont !default;
$sidebarMainFont: $mainFont !default;
$topbarFont: $mainFont !default;

//--Accents
$primaryBase: 242 !default;
$primaryBg: hsla($primaryBase, 70%, 60%, 100%) !default;
$primaryFont: hsla($primaryBase, 100%, 100%, 100%) !default;

$secondaryBase: 360 !default;
$secondaryBg: hsla($secondaryBase, 0%, 45%, 100%) !default;
$secondaryFont: hsla($secondaryBase, 100%, 100%, 100%) !default;

$successBase: 147 !default;
$successBg: hsla($successBase, 80%, 35%, 100%) !default;
$successFont: hsla($successBase, 100%, 100%, 100%) !default;

$warningBase: 45 !default;
$warningBg: hsla($warningBase, 100%, 60%, 100%) !default;
$warningFont: hsla($warningBase, 100%, 0%, 100%) !default;

$dangerBase: 0 !default;
$dangerBg: hsla($dangerBase, 70%, 55%, 100%) !default;
$dangerFont: hsla($dangerBase, 100%, 100%, 100%) !default;

$infoBase: 197 !default;
$infoBg: hsla($infoBase, 70%, 47.5%, 100%) !default;
$infoFont: hsla($infoBase, 100%, 100%, 100%) !default;

$fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
	"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

$fastTransTime: 0.15s !default;
$fastTransEase: ease !default;
$fastTrans: all $fastTransTime $fastTransEase !default;
$normalTransTime: 0.225s !default;
$normalTransEase: ease !default;
$normalTrans: all $normalTransTime $normalTransEase !default;
$slowTransTime: 0.375s !default;
$slowTransEase: ease !default;
$slowTrans: all $slowTransTime $slowTransEase !default;

//Ripple
$rippleTransTime: 0.75s !default;
$rippleTransEase: ease-out !default;

//SIZING
//--Global Font size
$fontSize: 16px !default;

$xsFont: 0.75rem !default;
$smFont: 0.875rem !default;
$mdFont: 1rem !default;
$lgFont: 1.25rem !default;
$xlFont: 1.5rem !default;

//OTHER
$flatBorderRadius: 0 !default;
$xsBorderRadius: 0.15rem !default;
$smBorderRadius: 0.4375rem !default;
$mdBorderRadius: 0.65rem !default;
$lgBorderRadius: 1rem !default;
$xlBorderRadius: 1.45rem !default;
$roundedBorderRadius: 1.875rem !default;
$roundBorderRadius: 50% !default;

//FUNCTIONS
@function rgba-to-rgb($rgba, $background: $bgCard) {
	@return mix(rgb(red($rgba), green($rgba), blue($rgba)), $background, alpha($rgba) * 100%);
}

@function map-deep-get($map, $keys...) {
	@each $key in $keys {
		$map: map-get($map, $key);
	}
	@return $map;
}

//Partials
$headingOptions: (
	"h1": clamp(2.75rem, 6.5vw, 5rem),
	"h2": clamp(2.5rem, 6vw, 4.5rem),
	"h3": clamp(2.25rem, 5.5vw, 4rem),
	"h4": clamp(2rem, 5vw, 3.5rem),
	"h5": clamp(1.75rem, 4.5vw, 3rem),
	"h6": clamp(1.5rem, 4vw, 2.5rem),
) !default;

$backTopPositions: (
	"bottom-left": (
		"name": "bottom-left",
		"bottom": 2rem,
		"left": 2rem,
		"right": unset,
		"transform": unset,
	),
	"bottom": (
		"name": "bottom",
		"bottom": 2rem,
		"left": 50%,
		"right": unset,
		"transform": translateX(-50%),
	),
	"bottom-right": (
		"name": "bottom-right",
		"bottom": 2rem,
		"left": unset,
		"right": 2rem,
		"transform": unset,
	),
) !default;

//--Portals
$drawerSizes: (
	"xs": 12.5rem,
	"sm": 15rem,
	"md": 18rem,
	"lg": 22rem,
	"xl": 28rem,
) !default;

$portalSizes: (
	"xs": 30rem,
	"sm": 35rem,
	"md": 40rem,
	"lg": 50rem,
	"xl": 65rem,
	"fullscreen": 100%,
) !default;

$drawerPositions: (
	"left": (
		"name": "left",
		"left": 0,
		"top": 0,
	),
	"top": (
		"name": "top",
		"left": 0,
		"top": 0,
	),
	"right": (
		"name": "right",
		"right": 0,
		"top": 0,
	),
	"bottom": (
		"name": "bottom",
		"left": 0,
		"bottom": 0,
	),
) !default;

$portalVerticalAlignments: (
	"start": self-start,
	"center": center,
	"end": self-end,
) !default;

// Helpers
//SPACING
$spacingDir: (
	"t": top,
	"r": right,
	"b": bottom,
	"l": left,
) !default;

$marginSpacingSize: (
	"0": 0,
	"1": 0.325rem,
	"2": 0.625rem,
	"3": 1rem,
	"4": 1.5rem,
	"auto": auto,
) !default;

$paddingSpacingSize: (
	"0": 0,
	"1": 0.325rem,
	"2": 0.625rem,
	"3": 1rem,
	"4": 1.5rem,
	"unset": unset,
) !default;

//GRID
$gridColumns: 12 !default;
$gridColumnWidth: 100% / $gridColumns !default;

$breakpoints: (
	"base": 0,
	"xs": 33.75rem,
	//540px
	"sm": 45rem,
	//720px
	"md": 60rem,
	//960px
	"lg": 71.25rem,
	//1,140px
	"xl": 82.5rem,
	//1,320px
	"fhd": 120rem,
	//1,920px
) !default;

$flexAlignOptions: (
	"stretch": stretch,
	"flex-start": flex-start,
	"flex-end": flex-end,
	"center": center,
	"baseline": baseline,
) !default;

$flexJustifyOptions: (
	"flex-start": flex-start,
	"flex-end": flex-end,
	"center": center,
	"space-between": space-between,
	"space-around": space-around,
	"space-evenly": space-evenly,
) !default;

$flexDirectionOptions: (
	"row": row,
	"row-reverse": row-reverse,
	"column": column,
	"column-reverse": column-reverse,
) !default;

$flexWrapOptions: (
	"nowrap": nowrap,
	"wrap": wrap,
	"wrap-reverse": wrap-reverse,
) !default;

//GRID END

$containerSizes: (
	"xs": 33.75rem,
	"sm": 45rem,
	"md": 60rem,
	"lg": 71.25rem,
	"xl": 82.5rem,
	"fhd": 120rem,
	"fluid": unset,
) !default;

$spacingOptions: (
	"xs": 0.15625rem,
	"sm": 0.3125rem,
	"md": 0.5rem,
	"lg": 0.8125rem,
	"xl": 1rem,
) !default;

$sizes: (
	"xs": $xsFont,
	"sm": $smFont,
	"md": $mdFont,
	"lg": $lgFont,
	"xl": $xlFont,
) !default;

$flavors: (
	"default": $smBorderRadius,
	"flat": $flatBorderRadius,
	"rounded": $roundedBorderRadius,
) !default;

$pigments: (
	"none": (
		"name": "none",
		"bgColor": transparent,
		"fontColor": $mainFont,
	),
	"default": (
		"name": "default",
		"bgColor": $bgCard,
		"fontColor": $mainFont,
	),
	"primary": (
		"name": "primary",
		"bgColor": $primaryBg,
		"fontColor": $primaryFont,
	),
	"secondary": (
		"name": "secondary",
		"bgColor": $secondaryBg,
		"fontColor": $secondaryFont,
	),
	"success": (
		"name": "success",
		"bgColor": $successBg,
		"fontColor": $successFont,
	),
	"warning": (
		"name": "warning",
		"bgColor": $warningBg,
		"fontColor": $warningFont,
	),
	"danger": (
		"name": "danger",
		"bgColor": $dangerBg,
		"fontColor": $dangerFont,
	),
	"info": (
		"name": "info",
		"bgColor": $infoBg,
		"fontColor": $infoFont,
	),
) !default;

$elevations: (
	"none": none,
	"subtle": (
		0 0.125rem 0.25rem rgba(0, 0, 0, 0.075),
	),
	"light": (
		0 0.3125rem 0.625rem rgba(0, 0, 0, 0.1125),
	),
	"medium": (
		0 0.5rem 1rem rgba(0, 0, 0, 0.15),
	),
	"strong": (
		0 0.75rem 2rem rgba(0, 0, 0, 0.1625),
	),
	"interstellar": (
		0 1rem 3rem rgba(0, 0, 0, 0.175),
	),
) !default;