//------------------------------------------------------------------------------
// @setting: Default
//------------------------------------------------------------------------------
// @author: hanakin -- midaym
// @version: 1.3.0
// @description
//
//------------------------------------------------------------------------------

//
// @settings

$default-font-size: 16px !default;
$default-line-height: 24px !default;

$default-border-size: 1px !default;
$default-border-radius: 2px !default;

$default-grid-gutter: 16px !default;
$default-grid-gutter-sm: 12px !default;

// Grid Breakpoints
$xxs: 360px !default;
$xs: 411px !default;
$sm: 540px !default;
$md: 770px !default;
$lg: 960px !default;
$xl: 1140px !default;

// Spacing
$default-spacing: 8px !default;

$sp1: $default-spacing; // (1) 8px
$sp1-4: ($sp1 * 0.25); // (1/4) 2px
$sp1-2: ($sp1 * 0.5); // (1/2) 4px
$sp2: ($sp1 * 2); // (2) 16px
$sp3: ($sp1 * 3); // (3) 24px
$sp4: ($sp1 * 4); // (4) 32px
$sp5: ($sp1 * 5); // (5) 40px
$sp6: ($sp1 * 6); // (6) 48px
$sp7: ($sp1 * 7); // (7) 56px
$sp8: ($sp1 * 8); // (8) 64px
$sp9: ($sp1 * 9); // (9) 72px

// Object heights
$default-height: 56px !default;
$default-height-dense: 32px !default;

// icons
$default-icon-sm: 16px !default;
$default-icon-md: 24px !default;
$default-icon-lg: 40px !default;

// Fonts
$default-font: Roboto, Helvetica, Arial, sans-serif !default;
$default-code-font: Monaco, Andale Mono, Courier New, Courier, Mono !default;

// opacity
$default-opacity: 1 !default;
$default-opacity-87: 0.87 !default;
$default-opacity-54: 0.54 !default;
$default-opacity-38: 0.38 !default;
$default-opacity-12: 0.12 !default;

// Map light/dark colors
@function mode($arr: 'background', $key: 'light', $variant: 'color') {
	$map: map-get($defaults, $arr);
	$map: map-get($map, $key);
	@return map-get($map, $variant);
}

// color scheme Light/Dark prestaged
$default-background-color:                 null;
$default-background-alt-color:             null;
$default-background-item-color:            null;
$default-surface-color:                    null;
$default-surface-hover-color:              null;
$default-surface-alt-color:                null;
$default-surface-alt-hover-color:          null;
$default-surface-item-color:               null;
$default-border-color:                     null;
$default-border-hover-color:               null;
$default-page-color:                   	   null;

$default-background-color-inverted:        null;
$default-background-alt-color-inverted:    null;
$default-background-item-color-inverted:   null;
$default-surface-color-inverted:           null;
$default-surface-hover-color-inverted:     null;
$default-surface-alt-color-inverted:       null;
$default-surface-alt-hover-color-inverted: null;
$default-surface-item-color-inverted:      null;
$default-border-color-inverted:            null;
$default-border-hover-color-inverted:      null;

// color scheme Light/Dark variables
$defaults: (
	'background': (
		'dark': (
			'color': $gray-1300,
			'alt': $gray-1100,
			'item': $gray-50
		),
		'light': (
			'color': $gray-50,
			'alt': $gray-400,
			'item':  $gray-1300
		)
	),
	'surface': (
		'dark': (
			'color': $gray-1200,
			'color-hover': $gray-1100,
			'alt': $gray-1000,
			'alt-hover': $gray-900,
			'item': $gray-900
		),
		'light': (
			'color': $gray-100,
			'color-hover': $gray-200,
			'alt': $gray-300,
			'alt-hover': $gray-200,
			'item': $gray-600
		)
	),
	'border': (
		'dark': (
			'color': $gray-1000,
			'color-hover': $gray-1000
		),
		'light': (
			'color': $gray-500,
			'color-hover': $gray-500
		)
	)
);