//------------------------------------------------------------------------------
// @setting: Default
//------------------------------------------------------------------------------
// @description
//
//------------------------------------------------------------------------------

//
// @settings

$mode: dark;

$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;

// Grid
$sm: 540px !default;
$md: 720px !default;
$lg: 960px !default;
$xl: 1140px !default;

$bp-sm: 576px !default;
$bp-md: 768px !default;
$bp-lg: 992px !default;
$bp-xl: 1200px !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-900,
			'alt': $gray-800,
			'item': $gray-50
		),
		'light': (
			'color': $gray-50,
			'alt': $gray-100,
			'item':  $gray-800
		)
	),
	'surface': (
		'dark': (
			'color': $gray-800,
			'color-hover': $gray-700,
			'alt': $gray-700,
			'alt-hover': $gray-800,
			'item': $gray-500
		),
		'light': (
			'color': $gray-100,
			'color-hover': $gray-300,
			'alt': $gray-200,
			'alt-hover': $gray-400,
			'item': $gray-700
		)
	),
	'border': (
		'dark': (
			'color': $gray-700,
			'color-hover': $gray-700
		),
		'light': (
			'color': $gray-400,
			'color-hover': $gray-400
		)
	)
);

@if $mode == dark {
	// color scheme Background
	$default-background-color:                 mode('background', 'dark', 'color');
	$default-background-alt-color:             mode('background', 'dark', 'alt');
	$default-background-item-color:            mode('background', 'dark', 'item');

	$default-background-color-inverted:        mode('background', 'light', 'color');
	$default-background-alt-color-inverted:    mode('background', 'light', 'alt');
	$default-background-item-color-inverted:   mode('background', 'light', 'item');

	// color scheme Surface
	$default-surface-color:                    mode('surface', 'dark', 'color');
	$default-surface-hover-color:              mode('surface', 'dark', 'color-hover');
	$default-surface-alt-color:                mode('surface', 'dark', 'alt');
	$default-surface-alt-hover-color:          mode('surface', 'dark', 'alt-hover');
	$default-surface-item-color:               mode('surface', 'dark', 'item');

	$default-surface-color-inverted:           mode('surface', 'light', 'color');
	$default-surface-hover-color-inverted:     mode('surface', 'light', 'color-hover');
	$default-surface-alt-color-inverted:       mode('surface', 'light', 'alt');
	$default-surface-alt-hover-color-inverted: mode('surface', 'light', 'alt-hover');
	$default-surface-item-color-inverted:      mode('surface', 'light', 'item');

	// color scheme Border
	$default-border-color:                     mode('border', 'dark', 'color');
	$default-border-hover-color:               mode('border', 'dark', 'color-hover');
	$default-border-color-inverted:            mode('border', 'light', 'color');
	$default-border-hover-color-inverted:      mode('border', 'light', 'color-hover');

	// other
	$default-page-color:                       $gray-1000;
} @else if $mode == light {
	// color scheme Background
	$default-background-color:                 mode('background', 'light', 'color');
	$default-background-alt-color:             mode('background', 'light', 'alt');
	$default-background-item-color:            mode('background', 'light', 'item');

	$default-background-color-inverted:        mode('background', 'dark', 'color');
	$default-background-alt-color-inverted:    mode('background', 'dark', 'alt');
	$default-background-item-color-inverted:   mode('background', 'dark', 'item');

	// color scheme Surface
	$default-surface-color:                    mode('surface', 'light', 'color');
	$default-surface-hover-color:              mode('surface', 'light', 'color-hover');
	$default-surface-alt-color:                mode('surface', 'light', 'alt');
	$default-surface-alt-hover-color:          mode('surface', 'light', 'alt-hover');
	$default-surface-item-color:               mode('surface', 'light', 'item');

	$default-surface-color-inverted:           mode('surface', 'dark', 'color');
	$default-surface-hover-color-inverted:     mode('surface', 'dark', 'color-hover');
	$default-surface-alt-color-inverted:       mode('surface', 'dark', 'alt');
	$default-surface-alt-hover-color-inverted: mode('surface', 'dark', 'alt-hover');
	$default-surface-item-color-inverted:      mode('surface', 'dark', 'item');

	// color scheme Border
	$default-border-color:                     mode('border', 'light', 'color');
	$default-border-hover-color:               mode('border', 'light', 'color-hover');
	$default-border-color-inverted:            mode('border', 'dark', 'color');
	$default-border-hover-color-inverted:      mode('border', 'dark', 'color-hover');

	// other
	$default-page-color:					 $white;
} @else if $mode == null {
	// color scheme Background
	$default-background-color:                 mode('background', 'light', 'color');
	$default-background-alt-color:             mode('background', 'light', 'alt');
	$default-background-item-color:            mode('background', 'light', 'item');

	$default-background-color-inverted:        mode('background', 'dark', 'color');
	$default-background-alt-color-inverted:    mode('background', 'dark', 'alt');
	$default-background-item-color-inverted:   mode('background', 'dark', 'item');

	// color scheme Surface
	$default-surface-color:                    mode('surface', 'light', 'color');
	$default-surface-hover-color:              mode('surface', 'light', 'color-hover');
	$default-surface-alt-color:                mode('surface', 'light', 'alt');
	$default-surface-alt-hover-color:          mode('surface', 'light', 'alt-hover');
	$default-surface-item-color:               mode('surface', 'light', 'item');

	$default-surface-color-inverted:           mode('surface', 'dark', 'color');
	$default-surface-hover-color-inverted:     mode('surface', 'dark', 'color-hover');
	$default-surface-alt-color-inverted:       mode('surface', 'dark', 'alt');
	$default-surface-alt-hover-color-inverted: mode('surface', 'dark', 'alt-hover');
	$default-surface-item-color-inverted:      mode('surface', 'dark', 'item');

	// color scheme Border
	$default-border-color:                     mode('border', 'light', 'color');
	$default-border-hover-color:               mode('border', 'light', 'color-hover');
	$default-border-color-inverted:            mode('border', 'dark', 'color');
	$default-border-hover-color-inverted:      mode('border', 'dark', 'color-hover');

	// other
	$default-page-color:					 $white;
}

$default-disabled-color: $gray-500 !default;
$default-disabled-stroke: $gray-200 !default;

// color scheme Grays
$default-white:                         $gray-50 !default;
$default-black:                         $gray-1100 !default;

$default-gray:                          $gray-500 !default;
$default-gray-dark:                     $gray-700 !default;
$default-gray-light:                    $gray-300 !default;

// color scheme Primary
$default-primary-color:                 $blue-500 !default;
$default-primary-dark-color:            $blue-700 !default;
$default-primary-light-color:           $blue-300 !default;
$default-primary-item-color:            $gray-50 !default;
$default-primary-item-light-color:      $gray-800 !default;

// color scheme Secondary
$default-secondary-color:               $pink-500 !default;
$default-secondary-dark-color:          $pink-700 !default;
$default-secondary-light-color:         $pink-300 !default;
$default-secondary-item-color:          $gray-50 !default;
$default-secondary-item-light-color:    $gray-800 !default;

// color shceme Error
$default-error-color:                   $red-500 !default;
$default-error-dark-color:              $red-700 !default;
$default-error-light-color:             $red-300 !default;
$default-error-item-color:              $gray-50 !default;
$default-error-item-light-color:        $gray-800 !default;

// color scheme Success
$default-success-color:                 $green-500 !default;
$default-success-dark-color:            $green-700 !default;
$default-success-light-color:           $green-300 !default;
$default-success-item-color:            $gray-50 !default;
$default-success-item-light-color:      $gray-800 !default;

// color scheme Warning
$default-warning-color:                 $amber-500 !default;
$default-warning-dark-color:            $amber-700 !default;
$default-warning-light-color:           $amber-300 !default;
$default-warning-item-color:            $gray-50 !default;
$default-warning-item-light-color:      $gray-800 !default;

// color scheme Info
$default-info-color:                    $blue-gray-500 !default;
$default-info-dark-color:               $blue-gray-700 !default;
$default-info-light-color:              $blue-gray-300 !default;
$default-info-item-color:               $gray-50 !default;
$default-info-item-light-color:         $gray-800 !default;

// color scheme
$default-page-bg:                    	$default-page-color !default;
$default-link-color:                    $default-primary-color !default;
$default-link-color-hover:              $default-primary-dark-color !default;

$default-action-bg:                     $default-surface-color !default;
$default-action-bg-hover:               $default-surface-alt-color !default;
$default-action-color:                  $default-surface-item-color !default;
$default-action-color-hover:            $default-primary-color !default;
$default-action-icon-color:             $default-surface-item-color !default;