/// variables.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-

// Include rem function from angular-material/src/core/style/variables.scss
// ------------------------------------------------------------------------
@function rem($multiplier) {
  $font-size: 10px;
  @return $multiplier * $font-size;
}

// Path variables for seamless imports
// ----------------------------------------------------------------------------
$version: '3.0.0';


// palettes import -
// ------------------------------------------------------------------------------
// fixme : consolidate all settings and imports in a decent 'settings' file
//@import '../themes/color-palette'; // fixme : clarify if it is needed or assure by javascript
@import 'components/palette';        // fixme : The maps in color-palettes are more js then scss

$primary-color:            sg-color($sogoBlue, 300) !default;
//$foreground-primary-color: rgba($foreground-base-color, 0.73) !default;
$foreground-primary-color: rgba($primary-color, 0.87);//override
$background-base-color:    sg-color($sogoPaper, 200);

// Typography
// ------------------------------
$font-family: 'Fira sans', 'Helvetica Neue', sans-serif !default;
$font-size:   10px;

$display-4-font-size-base: rem(11.20) !default;
$display-3-font-size-base: rem(5.600) !default;
$display-2-font-size-base: rem(4.500) !default;
$display-1-font-size-base: rem(3.400) !default;
$headline-font-size-base:  rem(2.400) !default;
$title-font-size-base:     rem(2.000) !default;
$subhead-font-size-base:   rem(1.600) !default;

$body-font-size-base:      rem(1.400) !default;
$caption-font-size-base:   rem(1.200) !default;

// Layout
// ------------------------------

$baseline-grid:            8px !default;
// shortcut aliases for $baseline-grid
$bl:                       $baseline-grid;
$line:                     $baseline-grid;

$sg-md-grid-pitch:         8 * $baseline-grid;
// shortcut alias for $sg-md-grid-pitch
$pitch:                    $sg-md-grid-pitch;

// touch and pointers
// ----------------------------------------------------------------------------
$touch-zone-width: 36px;
// shortcut alias for $touch-zone-width
$touch-zone: $touch-zone-width;

// Google specifies dimensions in grid pitch
// This is a small utility function
// Return dimension in px
@function grid-step($nb) {
  @return ($pitch * $nb)
}

// angular-material share breakpoint values between sass and js files (/core/constant.js)
// we might consider using a sass library to import values as json single source for both

$layout-breakpoint-sm:     600px !default;
$layout-breakpoint-md:     960px !default;
$layout-breakpoint-lg:     1200px !default;
$layout-gutter-width:      ($baseline-grid * 2) !default;

// Margins
$md-base-margin:           $layout-gutter-width;
// alias
$mg:                       $layout-gutter-width;

// Redefinitions
// $layout-breakpoint-sm:     360px;
$layout-breakpoint-md:     1024px;
$layout-breakpoint-lg:     1280px;

// We use column-based responsive grids inspired by Google's Material design metrics
// ----------------------------------------------------------------------------

$base-grid-total-columns: (
  'sm': 1,
  'md': 16,
  'lg': 20,
);

// Passing to breakpoint-slicer
$slicer-breakpoints: 0 $layout-breakpoint-sm $layout-breakpoint-md $layout-breakpoint-lg;
// todo: ? 'md' name is error prone because of possible confusion with the 'md-' prefix
$slicer-breakpoint-names: 'sm' 'md' 'lg' 'xl';

$media-pointer: (pointer fine);


// App bar variables
$app-bar-height: $sg-md-grid-pitch;

// Views widths
$listView-width: grid-step(6);
$detailView-width: grid-step(8);

$toast-height: $baseline-grid * 3 !default;
$toast-margin: $baseline-grid * 1 !default;

// Whiteframes

$shadow-multiplier: 0.7;
$shadow-key-umbra-opacity:      $shadow-multiplier * 0.2;
$shadow-key-penumbra-opacity:   $shadow-multiplier * 0.14;
$shadow-ambient-shadow-opacity: $shadow-multiplier * 0.12;

// NOTE(shyndman): gulp-sass seems to be failing if I split the shadow defs across
//    multiple lines. Ugly. Sorry.
$whiteframe-shadow-z1: 0px 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 2px 2px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 5px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
$sidenav-shadow-z1: 2px 0px 5px 0 rgba(0,0,0,0.26) !default;
$whiteframe-zindex-z1: 1 !default;
$whiteframe-shadow-z2: 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
$sidenav-shadow-z2: 8px 0px 17px 0 rgba(0,0,0,0.2) !default;
$whiteframe-zindex-z2: 2 !default;
$whiteframe-shadow-z3: 0px 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 6px 10px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 18px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
$sidenav-shadow-z3: 17px 0px 50px 0 rgba(0,0,0,0.19) !default;
$whiteframe-zindex-z3: 3 !default;
$whiteframe-shadow-z4: 0px 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
$sidenav-shadow-z4: 16px 0px 28px 0 rgba(0,0,0,0.22) !default;
$whiteframe-zindex-z4: 4 !default;
$whiteframe-shadow-z5: 0px 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
$sidenav-shadow-z5: 27px 0px 24px 0 rgba(0,0,0,0.22) !default;
$whiteframe-zindex-z5: 5 !default;


// Z-indexes
//--------------------------------------------

$z-index-tooltip: 100 !default;
$z-index-menu: 99 !default;
$z-index-select: 99 !default;
$z-index-dialog: 80 !default;
$z-index-toast: 90 !default;
$z-index-bottom-sheet: 70 !default;
$z-index-scroll-mask: 65 !default;
$z-index-sidenav: 60 !default;
$z-index-backdrop: 50 !default;
$z-index-fab: 20 !default;
$z-index-toolbar: 10 !default;
$z-index-view: 9;

// Easing Curves
//--------------------------------------------

$swift-ease-out-duration: 0.4s !default;
$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;

$swift-ease-in-duration: 0.3s !default;
$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;

$swift-ease-in-out-duration: 0.5s !default;
$swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;