@use "sass:math";
@import './tools/functions';
@import './tools/colors';
@import './tools/elevation';

$primary-color: #6200ee !default;
$secondary-color: #1976d2 !default;
$success-color: #4caf50 !default;
$info-color: #00bcd4 !default;
$warning-color: #fb8c00 !default;
$error-color: #f44336 !default;

$font-size-root: 16px !default;
$border-radius-root: 4px !default;
$line-height-root: 1.5 !default;

$rounded: () !default;

$blockquote-font-size: 18px !default;
$blockquote-font-weight: 300 !default;

$code-color: #c0341d !default;
$code-padding: 0 0.4rem !default;
$code-background-color: #fbe5e1 !default;

$kbd-color: #ffffff !default;
$kbd-padding: 0.2rem 0.4rem !default;
$kbd-background-color: #212529 !default;

$code-kbd-font-size: 85% !default;
$code-kbd-border-radius: 3px !default;
$code-kbd-font-weight: 900 !default;

$spacer: 4px !default;

$body-font-family: 'Roboto', 'Segoe UI', sans-serif !default;

$font-weights: () !default;
$heading-font-family: $body-font-family !default;
$headings: () !default;

$grid-columns: 12 !default;
$grid-gutter: $spacer * 6 !default;
$form-grid-gutter: $spacer * 2 !default;
$grid-gutters: () !default;
$grid-breakpoints: () !default;
$display-breakpoints: () !default;

$container-max-widths: () !default;
$container-padding-x: math.div($grid-gutter, 2) !default; //$grid-gutter / 2 ;

$transitions: () !default;

$material-light-theme: () !default;
$material-dark-elevation-colors: () !default;
$material-dark-theme: () !default;

// Importing user defined variables
@import 'material-theme';

$rounded: map-deep-merge(
	(
		0: 0,
		'sm': math.div($border-radius-root, 2),
		//$border-radius-root / 2
		null: $border-radius-root,
		'lg': $border-radius-root * 2,
		'xl': $border-radius-root * 6,
		'pill': 9999px,
		'circle': 50%
	),
	$rounded
);

$font-weights: map-merge(
	(
		'thin': 100,
		'light': 300,
		'regular': 400,
		'medium': 500,
		'bold': 700,
		'black': 900
	),
	$font-weights
);

$headings: map-deep-merge(
	(
		'h1': (
			'size': 6rem,
			'weight': 300,
			'line-height': 6rem,
			'letter-spacing': -0.015625em,
			'font-family': $heading-font-family,
			'text-transform': false
		),
		'h2': (
			'size': 3.75rem,
			'weight': 300,
			'line-height': 3.75rem,
			'letter-spacing': -0.0083333333em,
			'font-family': $heading-font-family,
			'text-transform': false
		),
		'h3': (
			'size': 3rem,
			'weight': 400,
			'line-height': 3.125rem,
			'letter-spacing': normal,
			'font-family': $heading-font-family,
			'text-transform': false
		),
		'h4': (
			'size': 2.125rem,
			'weight': 400,
			'line-height': 2.5rem,
			'letter-spacing': 0.0073529412em,
			'font-family': $heading-font-family,
			'text-transform': false
		),
		'h5': (
			'size': 1.5rem,
			'weight': 400,
			'line-height': 2rem,
			'letter-spacing': normal,
			'font-family': $heading-font-family,
			'text-transform': false
		),
		'h6': (
			'size': 1.25rem,
			'weight': 500,
			'line-height': 2rem,
			'letter-spacing': 0.0125em,
			'font-family': $heading-font-family,
			'text-transform': false
		),
		'subtitle-1': (
			'size': 1rem,
			'weight': normal,
			'line-height': 1.75rem,
			'letter-spacing': 0.009375em,
			'font-family': $body-font-family,
			'text-transform': false
		),
		'subtitle-2': (
			'size': 0.875rem,
			'weight': 500,
			'line-height': 1.375rem,
			'letter-spacing': 0.0071428571em,
			'font-family': $body-font-family,
			'text-transform': false
		),
		'body-1': (
			'size': 1rem,
			'weight': 400,
			'line-height': 1.5rem,
			'letter-spacing': 0.03125em,
			'font-family': $body-font-family,
			'text-transform': false
		),
		'body-2': (
			'size': 0.875rem,
			'weight': 400,
			'line-height': 1.25rem,
			'letter-spacing': 0.0178571429em,
			'font-family': $body-font-family,
			'text-transform': false
		),
		'button': (
			'size': 0.875rem,
			'weight': 500,
			'line-height': 2.25rem,
			'letter-spacing': 0.0892857143em,
			'font-family': $body-font-family,
			'text-transform': uppercase
		),
		'caption': (
			'size': 0.75rem,
			'weight': 400,
			'line-height': 1.25rem,
			'letter-spacing': 0.0333333333em,
			'font-family': $body-font-family,
			'text-transform': false
		),
		'overline': (
			'size': 0.75rem,
			'weight': 500,
			'line-height': 2rem,
			'letter-spacing': 0.1666666667em,
			'font-family': $body-font-family,
			'text-transform': uppercase
		)
	),
	$headings
);

$grid-breakpoints: map-deep-merge(
	(
		'xs': 0,
		'sm': 600px,
		'md': 960px,
		'lg': 1280px - 16px,
		'xl': 1920px - 16px
	),
	$grid-breakpoints
);

$grid-gutters: map-deep-merge(
	(
		'xs': math.div($grid-gutter, 12),
		'sm': math.div($grid-gutter, 6),
		'md': math.div($grid-gutter, 3),
		'lg': math.div($grid-gutter * 2, 3),
		'xl': $grid-gutter
	),
	$grid-gutters
);

/* prettier-ignore */
$display-breakpoints: map-deep-merge(
  (
    'print-only': 'only print',
    'screen-only': 'only screen',
    'xs-only': 'only screen and (max-width: #{map-get($grid-breakpoints, 'sm')-1})',
    'sm-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')}) and (max-width: #{map-get($grid-breakpoints, 'md')-1})',
    'sm-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'md')-1})',
    'sm-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')})',
    'md-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')}) and (max-width: #{map-get($grid-breakpoints, 'lg')-1})',
    'md-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'lg')-1})',
    'md-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')})',
    'lg-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')}) and (max-width: #{map-get($grid-breakpoints, 'xl')-1})',
    'lg-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints,'xl')-1})',
    'lg-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints,'lg')})',
    'xl-only': 'only screen and (min-width: #{map-get($grid-breakpoints,'xl')})',
  ),
  $display-breakpoints
);

$container-max-widths: map-deep-merge(
	(
		'md': map-get($grid-breakpoints, 'md') * 0.9375,
		'lg': map-get($grid-breakpoints, 'lg') * 0.9375,
		'xl': map-get($grid-breakpoints, 'xl') * 0.9375
	),
	$container-max-widths
);

$transitions: map-deep-merge(
	(
		'fast-out-slow-in': cubic-bezier(0.4, 0, 0.2, 1),
		'linear-out-slow-in': cubic-bezier(0, 0, 0.2, 1),
		'fast-out-linear-in': cubic-bezier(0.4, 0, 1, 1),
		'ease-in-out': cubic-bezier(0.4, 0, 0.6, 1),
		'fast-in-fast-out': cubic-bezier(0.25, 0.8, 0.25, 1),
		'swing': cubic-bezier(0.25, 0.8, 0.5, 1)
	),
	$transitions
);

$material-light-theme: map-deep-merge(
	(
		'surface': #ffffff,
		'text': (
			'primary': rgba(material-color('shades', 'black'), 0.87),
			'secondary': rgba(material-color('shades', 'black'), 0.6),
			'disabled': rgba(material-color('shades', 'black'), 0.38),
			'link': material-color('blue', 'darken-2')
		),
		'icons': (
			'active': rgba(material-color('shades', 'black'), 0.54),
			'inactive': rgba(material-color('shades', 'black'), 0.38)
		),
		'inputs': (
			'box': rgba(material-color('shades', 'black'), 0.04)
		),
		'buttons': (
			'disabled': rgba(material-color('shades', 'black'), 0.26)
		),
		'tabs': rgba(0, 0, 0, 0.54),
		'text-fields': (
			'filled': rgba(material-color('shades', 'black'), 0.06),
			'filled-hover': rgba(material-color('shades', 'black'), 0.12),
			'outlined': rgba(material-color('shades', 'black'), 0.38),
			'outlined-disabled': rgba(material-color('shades', 'black'), 0.26),
			'border': rgba(material-color('shades', 'black'), 0.42)
		),
		'controls': (
			'disabled': rgba(material-color('shades', 'black'), 0.26),
			'thumb': (
				'inactive': material-color('shades', 'white'),
				'disabled': material-color('grey', 'lighten-5')
			),
			'track': (
				'inactive': rgba(material-color('shades', 'black'), 0.38),
				'disabled': rgba(material-color('shades', 'black'), 0.12)
			)
		),
		'tables': (
			'active': material-color('grey', 'lighten-4'),
			'hover': material-color('grey', 'lighten-3'),
			'group': material-color('grey', 'lighten-3')
		),
		'datatables': (
			'row-hover': rgba(material-color('shades', 'black'), 0.04)
		),
		'dividers': rgba(material-color('shades', 'black'), 0.12),
		'chips': #e0e0e0,
		'cards': material-color('shades', 'white'),
		'app-bar': material-color('grey', 'lighten-4'),
		'navigation-drawer': material-color('shades', 'white')
	),
	$material-light-theme
);

$material-dark-elevation-colors: map-merge(
	(
		'0': #000000,
		'1': #1e1e1e,
		'2': #222222,
		'3': #252525,
		'4': #272727,
		'6': #2c2c2c,
		'8': #2e2e2e,
		'12': #333333,
		'16': #363636,
		'24': #373737
	),
	$material-dark-elevation-colors
);

$material-dark-theme: map-deep-merge(
	(
		'surface': #212121,
		'icons': (
			'active': material-color('shades', 'white'),
			'inactive': rgba(material-color('shades', 'white'), 0.5)
		),
		'text': (
			'primary': material-color('shades', 'white'),
			'secondary': rgba(material-color('shades', 'white'), 0.7),
			'disabled': rgba(material-color('shades', 'white'), 0.5),
			'link': material-color('blue', 'accent-1')
		),
		'inputs': (
			'box': material-color('shades', 'white')
		),
		'buttons': (
			'disabled': rgba(material-color('shades', 'white'), 0.3)
		),
		'tabs': rgba(material-color('shades', 'white'), 0.6),
		'text-fields': (
			'filled': rgba(material-color('shades', 'white'), 0.08),
			'filled-hover': rgba(material-color('shades', 'white'), 0.16),
			'outlined': rgba(material-color('shades', 'white'), 0.24),
			'outlined-disabled': rgba(material-color('shades', 'white'), 0.16),
			'border': rgba(material-color('shades', 'white'), 0.7)
		),
		'controls': (
			'disabled': rgba(material-color('shades', 'white'), 0.3),
			'thumb': (
				'inactive': material-color('grey', 'lighten-1'),
				'disabled': material-color('grey', 'darken-3')
			),
			'track': (
				'inactive': rgba(material-color('shades', 'white'), 0.3),
				'disabled': rgba(material-color('shades', 'white'), 0.1)
			)
		),
		'tables': (
			'active': #505050,
			'hover': material-color('grey', 'darken-2'),
			'group': material-color('grey', 'darken-2')
		),
		'datatables': (
			'row-hover': rgba(material-color('shades', 'white'), 0.04)
		),
		'dividers': rgba(material-color('shades', 'white'), 0.12),
		'chips': #555555,
		'cards': map-get($material-dark-elevation-colors, '1'),
		'app-bar': map-get($material-dark-elevation-colors, '4'),
		'navigation-drawer': map-get($material-dark-elevation-colors, '16')
	),
	$material-dark-theme
);

$primary-transition: 0.3s map-get($transitions, 'swing') !default;