//  Foundation for Sites Settings
//  -----------------------------
//
//  Table of Contents:
//
//   1. Global
//   2. Breakpoints
//   3. The Grid
//   4. Base Typography
//   5. Typography Helpers
//   6. Abide
//   7. Accordion
//   8. Accordion Menu
//   9. Badge
//  10. Breadcrumbs
//  11. Button
//  12. Button Group
//  13. Callout
//  14. Card
//  15. Close Button
//  16. Drilldown
//  17. Dropdown
//  18. Dropdown Menu
//  19. Forms
//  20. Label
//  21. Media Object
//  22. Menu
//  23. Meter
//  24. Off-canvas
//  25. Orbit
//  26. Pagination
//  27. Progress Bar
//  28. Responsive Embed
//  29. Reveal
//  30. Slider
//  31. Switch
//  32. Table
//  33. Tabs
//  34. Thumbnail
//  35. Title Bar
//  36. Tooltip
//  37. Top Bar

@import '~foundation-sites/scss/util/util';

// 0. UI-Components globals
// ---------
@import '../variables';

// 1. Global
// ---------
$global-font-size: 1rem;
$global-width: rem-calc(1920);
$global-lineheight: 1.5;
$foundation-palette: (
  primary: $i400,
  secondary: $b400,
  success: $g400,
  warning: $o400,
  alert: $r400,
);
$light-gray: $n200;
$medium-gray: $n400;
$dark-gray: $n700;
$black: $n800;
$white: $n100;

$body-background: $n100;
$body-font-color: $n800;
$body-font-family: 'Roboto Flex', Arial, sans-serif;
$body-antialiased: true;

$global-margin: 1rem;
$global-padding: 1rem;
$global-weight-normal: normal;
$global-weight-bold: bold;
$global-radius: $border-radius;
$global-text-direction: ltr;
$global-flexbox: false;
$print-transparent-backgrounds: false;
$print-hrefs: false;

@include add-foundation-colors;

// 2. Breakpoints
// --------------
//
// Foundation breakpoints define the minimum screen width for that value
// eg. given the following values: medium = 640 and large = 1024
// the medium breakpoint will be a range from 640 to 1023
//
$print-breakpoint: large;
$breakpoints: (
  small: $breakpoint-min, //deprecated
  min: $breakpoint-min,
  medium: $breakpoint-tablet, //deprecated
  tablet: $breakpoint-tablet,
  large: $breakpoint-desktop, //deprecated
  desktop: $breakpoint-desktop,
  big-desktop: $breakpoint-big-desktop
);
$breakpoint-classes: (small medium large min tablet desktop big-desktop);

// 3. The Grid
// -----------

$grid-row-width: $global-width;
$grid-column-count: 12;
$grid-column-gutter: (
  small: 16,
  medium: 24
);
$grid-column-align-edge: true;
$grid-column-alias: 'columns';
$block-grid-max: 8;

// XY grid
$xy-grid: true;
$grid-container: $global-width;
$grid-columns: 12;
$grid-margin-gutters: (
  small: 16,
  medium: 24,
  min: 16,
  tablet: 24
);
$grid-padding-gutters: $grid-margin-gutters;
$grid-container-padding: $grid-padding-gutters;
$grid-container-max: $global-width;

// 4. Base Typography
// ------------------

$header-font-family: 'Poppins', 'Roboto Flex', Arial, sans-serif;
$header-font-weight: $global-weight-normal;
$header-font-style: normal;
$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
$header-color: $n700;
$header-lineheight: 1.25rem;
$header-margin-bottom: .5rem;
$header-styles: (
  small: (
    'h1': ('font-size': 2.25rem   ),
    'h2': ('font-size': 2rem      ),
    'h3': ('font-size': 1.8125rem ),
    'h4': ('font-size': 1.625rem  ),
    'h5': ('font-size': 1.4375rem ),
    'h6': ('font-size': 1rem      , 'letter-spacing': 1px, 'text-transform': uppercase)
  )
);
$header-text-rendering: optimizeLegibility;
$small-font-size: 80%;
$header-small-font-color: $n600;
$paragraph-lineheight: 1.5;
$paragraph-margin-bottom: 1rem;
$paragraph-text-rendering: optimizeLegibility;
$code-color: $n800;
$code-font-family: $font-family-monospace;
$code-font-weight: $global-weight-normal;
$code-background: $n200;
$code-border: 1px solid $n400;
$code-padding: rem-calc(2 5 1);
$anchor-color: $i400;
$anchor-color-hover: $i500;
$anchor-text-decoration: none;
$anchor-text-decoration-hover: none;
$hr-width: $global-width;
$hr-border: 1px solid $n400;
$hr-margin: rem-calc(20) auto;
$list-lineheight: $paragraph-lineheight;
$list-margin-bottom: $paragraph-margin-bottom;
$list-style-type: disc;
$list-style-position: outside;
$list-side-margin: 1.25rem;
$list-nested-side-margin: 1.25rem;
$defnlist-margin-bottom: 0;
$defnlist-term-weight: $global-weight-bold;
$defnlist-term-margin-bottom: 0;
$blockquote-color: $n700;
$blockquote-padding: rem-calc(9 20 0 19);
$blockquote-border: 1px solid $n400;
$cite-font-size: rem-calc(13);
$cite-color: $n700;
$cite-pseudo-content: '\2014 \0020';
$keystroke-font: $font-family-monospace;
$keystroke-color: $n800;
$keystroke-background: $n200;
$keystroke-padding: rem-calc(2 4 0);
$keystroke-radius: $border-radius;
$abbr-underline: 1px dotted $n600;

// 5. Typography Helpers
// ---------------------

$lead-font-size: $global-font-size * 1.25;
$lead-lineheight: 1.6;
$subheader-lineheight: 1.4;
$subheader-color: $n600;
$subheader-font-weight: $global-weight-normal;
$subheader-margin-top: .2rem;
$subheader-margin-bottom: .5rem;
$stat-font-size: 2.5rem;

// 6. Abide
// --------

$abide-inputs: true;
$abide-labels: true;
$input-background-invalid: $r400;
$form-label-color-invalid: $r600;
$input-error-color: $r600;
$input-error-font-size: rem-calc(12);
$input-error-font-weight: $global-weight-bold;

// 8. Accordion Menu
// -----------------

$accordionmenu-arrows: false;
$accordionmenu-arrow-color: $n800;
$accordionmenu-arrow-size: 6px;

// 12. Button Group
// ----------------

$buttongroup-margin: 1rem;
$buttongroup-spacing: 1px;
$buttongroup-child-selector: '.button';
$buttongroup-expand-max: 6;
$buttongroup-radius-on-each: true;

// 15. Close Button
// ----------------

$closebutton-position: right top;
$closebutton-offset-horizontal: 1rem;
$closebutton-offset-vertical: .5rem;
$closebutton-size: 2em;
$closebutton-lineheight: 1;
$closebutton-color: $n600;
$closebutton-color-hover: $n800;

// 18. Dropdown Menu
// -----------------

$dropdownmenu-arrows: false;
$dropdownmenu-arrow-size: 6px;
$dropdownmenu-min-width: 200px;
$dropdownmenu-border: none;

// 19. Forms
// ---------

$fieldset-border: 1px solid $n400;
$fieldset-padding: rem-calc(20);
$fieldset-margin: rem-calc(18 0);
$legend-padding: rem-calc(0 3);
$form-spacing: rem-calc(16);
$helptext-color: $n700;
$helptext-font-size: .6875rem;
$helptext-font-style: normal;
$input-prefix-color: $n700;
$input-prefix-background: $n200;
$input-prefix-border: 1px solid $n400;
$input-prefix-padding: 1rem;
$form-label-color: $n700;
$form-label-font-size: .9375rem;
$form-label-font-weight: $global-weight-normal;
$form-label-line-height: 2.5;
$select-background: $n100;
$select-triangle-color: $n700;
$select-radius: $border-radius;
$input-color: $n700;
$input-placeholder-color: $n400;
$input-font-family: $body-font-family;
$input-font-size: 1rem;
$input-font-weight: $global-weight-normal;
$input-background: $n100;
$input-background-focus: $n100;
$input-background-disabled: $n400;
$input-border: 1px solid $n400;
$input-border-focus: 1px solid $i400;
$input-shadow: none;
$input-shadow-focus: none;
$input-cursor-disabled: default;
$input-transition: border-color .3s ease-in-out, background-color .3s ease;
$input-number-spinners: true;
$input-radius: $border-radius;
$form-button-radius: $border-radius;

// 22. Menu
// --------

$menu-margin: 0;
$menu-margin-nested: 0;
$menu-item-padding: .7rem 1rem;
$menu-icon-spacing: .25rem;
$menu-expand-max: 6;

// 24. Off-canvas
// --------------

$offcanvas-push-zindex: 1;
$offcanvas-overlap-zindex: 10;
$offcanvas-reveal-zindex: 1;
$offcanvas-zindex: -1;
$offcanvas-transition-length: .5s;
$offcanvas-transition-timing: ease;
$offcanvas-fixed-reveal: false;
$offcanvas-exit-background: rgba($n100, .25);
$offcanvas-background: $n200;
$offcanvas-shadow: false;
$offcanvas-inner-shadow-size: false;
$maincontent-class: 'off-canvas-content';
$maincontent-shadow: 0 0 10px rgba($n800, .5);
$offcanvas-inner-shadow-color: rgba($n800, .1);

// 26. Pagination
// --------------

$pagination-font-size: rem-calc(14);
$pagination-margin-bottom: $global-margin;
$pagination-item-color: $n800;
$pagination-item-padding: rem-calc(3 10);
$pagination-item-spacing: rem-calc(1);
$pagination-radius: $border-radius;
$pagination-item-background-hover: $n300;
$pagination-item-background-current: $i400;
$pagination-item-color-current: $n100;
$pagination-item-color-disabled: $n400;
$pagination-ellipsis-color: $n800;
$pagination-mobile-items: false;
$pagination-mobile-current-item: false;
$pagination-arrows: true;

// 29. Reveal
// ----------

$reveal-background: $n100;
$reveal-width: 600px;
$reveal-max-width: $global-width;
$reveal-offset: rem-calc(100);
$reveal-padding: $global-padding;
$reveal-border: 1px solid $n400;
$reveal-radius: $border-radius;
$reveal-zindex: $z-index-modal;
$reveal-overlay-background: rgba($n800, .45);

// 31. Switch
// ----------

$switch-background: $n500;
$switch-background-active: $i400;
$switch-height: 2rem;
$switch-height-tiny: 1.5rem;
$switch-height-small: 1.75rem;
$switch-height-large: 2.5rem;
$switch-radius: $border-radius;
$switch-margin: $global-margin;
$switch-paddle-background: $n100;
$switch-paddle-offset: .25rem;
$switch-paddle-radius: $border-radius;
$switch-paddle-transition: all .25s ease-out;

// 32. Table
// ---------

$table-background: $n100;
$table-color-scale: 5%;
$table-padding: rem-calc(8 10 10);
$table-hover-scale: 2%;
$table-row-hover: $n200;
$table-row-stripe-hover: $n300;
$table-is-striped: false;
$table-stripe: even;
$table-head-background: $n200;
$table-head-row-hover: $n300;
$table-foot-background: $n300;
$table-foot-row-hover: $n400;
$table-head-font-color: $n800;
$table-foot-font-color: $n800;
$show-header-for-stacked: false;

// 35. Title Bar
// -------------

$titlebar-padding: 0;
$titlebar-text-font-weight: bold;
$titlebar-background: $n200;
$titlebar-color: $n700;
$titlebar-icon-color: $n700;
$titlebar-icon-color-hover: $n800;
$titlebar-icon-spacing: .25rem;

// 36. Tooltip
// -----------

$has-tip-cursor: pointer;
$has-tip-font-weight: $global-weight-bold;
$has-tip-border-bottom: 0;
$tooltip-background-color: $n800;
$tooltip-color: $n100;
$tooltip-padding: .75rem;
$tooltip-max-width: 10rem;
$tooltip-font-size: $small-font-size;
$tooltip-pip-width: .5rem;
$tooltip-pip-height: $tooltip-pip-width * .866;
$tooltip-pip-offset: .25rem;
$tooltip-radius: $border-radius;