@import "foundation-sites/scss/util/unit";
@import "foundation-sites/scss/util/color";

/***
 Foundation overrides

 $bonsai-variable: some-value !default;
 $some-foundation-setting: $bonsai-variable;

 All consumers of bonsai can override `bonsai` variables.
 ***/

/// Flag whether or not you want to include all bonsai components
/// @type bool
$bonsai-include-components: true !default;

/// Base spacing value
/// @type number
$bonsai-spacing-base: 4px !default;

/// Global width to determine row width
/// @type number
$bonsai-global-width: rem-calc(1120px) !default;

/// Global border radius value
/// @type number
$bonsai-global-radius: 3px !default;

/// Global margin value around elements
/// @type number
$bonsai-global-margin: 0.875rem !default;

/// Global padding value around elements
/// @type number
$bonsai-global-padding: 0.875rem !default;

/// Flag whether or not to include flex-grid
/// @type bool
$bonsai-include-flex-grid: true !default;

/// Definitions of the spacing between columns on different screen sizes
/// @type map
$bonsai-column-gutter: (
  small: $bonsai-spacing-base * 2,
  medium: $bonsai-spacing-base * 3,
  large: $bonsai-spacing-base * 4,
  xlarge: $bonsai-spacing-base * 8,
) !default;

// Foundation Configuration
$global-flexbox: true;
$global-width: $bonsai-global-width;
$global-radius: $bonsai-global-radius;
$global-margin: $bonsai-global-margin;
$global-padding: $bonsai-global-padding;
$grid-column-gutter: $bonsai-column-gutter;

/* --- Icons --- */

/// Path to font awesome
/// @type String
$bonsai-font-path: "~font-awesome/fonts" !default;

// Foundation Configuration
$fa-font-path: $bonsai-font-path;

/* --- Colors --- */

// Color palette
$bonsai-dark-blue: #006179 !default;
$bonsai-blue: #1291ae !default;
$bonsai-blue-gray: #d9e7eb !default;
$bonsai-light-blue: #b4e5f9 !default;
$bonsai-very-dark-blue: #005266 !default;
$bonsai-light-green: #e2eed7 !default;
$bonsai-light-yellow: #ffefc2 !default;
$bonsai-red: #dc2a2a !default;
$bonsai-yellow-green: #6eb032 !default;
$bonsai-maroon: #900 !default;
$bonsai-dark-green: #538329 !default;
$bonsai-dark-purple: #646779 !default;
$bonsai-true-black: #000;

// Gray palette
$bonsai-white: #fff !default;
$bonsai-very-light-blue-gray: #f6f9fc !default;
$bonsai-very-light-gray: #e8e8e8 !default;
$bonsai-light-gray: #ccc !default;
$bonsai-medium-gray: #9b9b9b !default;
$bonsai-dark-gray: #696969 !default;
$bonsai-very-dark-gray: #4b5555 !default;
$bonsai-black: #333 !default;

// Social Sharing palette
$bonsai-facebook-blue: #4267b2 !default;
$bonsai-twitter-blue: #1b95e0 !default;
$bonsai-tumblr-blue: #36465b !default;

// Primary actions
$bonsai-primary: $bonsai-dark-blue !default;
$bonsai-secondary: $bonsai-white !default;
$bonsai-success: $bonsai-light-green !default;
$bonsai-warning: $bonsai-light-yellow !default;
$bonsai-alert: $bonsai-red !default;
$bonsai-information: $bonsai-light-blue !default;

// Secondary actions
$bonsai-hover: $bonsai-blue !default;
$bonsai-focus: $bonsai-blue !default;
$bonsai-hover-border: $bonsai-blue !default;
$bonsai-hover-background: $bonsai-blue-gray !default;
$bonsai-active: $bonsai-very-dark-blue !default;
$bonsai-disabled-text: $bonsai-very-dark-gray !default;

$bonsai-palette: (
  dark-blue: $bonsai-dark-blue,
  dark-purple: $bonsai-dark-purple,
  very-dark-blue: $bonsai-very-dark-blue,
  blue-gray: $bonsai-blue-gray,
  "blue": $bonsai-blue,
  light-green: $bonsai-light-green,
  light-yellow: $bonsai-light-yellow,
  "red": $bonsai-red,
  "maroon": $bonsai-maroon,
  light-blue: $bonsai-light-blue,
  active: $bonsai-active,
  alert: $bonsai-alert,
  dark-gray: $bonsai-dark-gray,
  disabled-text: $bonsai-disabled-text,
  focus: $bonsai-focus,
  hover: $bonsai-hover,
  hover-background: $bonsai-hover-background,
  hover-border: $bonsai-hover-border,
  information: $bonsai-information,
  light-gray: $bonsai-light-gray,
  link-active: $bonsai-very-dark-blue,
  link-hover: $bonsai-very-dark-blue,
  medium-gray: $bonsai-medium-gray,
  primary: $bonsai-primary,
  secondary: $bonsai-secondary,
  success: $bonsai-success,
  very-light-gray: $bonsai-very-light-gray,
  warning: $bonsai-warning,
  yellow-green: $bonsai-yellow-green,
  dark-green: $bonsai-dark-green,
  very-light-blue-gray: $bonsai-very-light-blue-gray,
  "white": $bonsai-white,
  "black": $bonsai-black,
  very-dark-gray: $bonsai-very-dark-gray,
  facebook-blue: $bonsai-facebook-blue,
  twitter-blue: $bonsai-twitter-blue,
  tumblr-blue: $bonsai-tumblr-blue,
  true-black: $bonsai-true-black
) !default;

// Foundation Configuration
$light-gray: $bonsai-light-gray;
$medium-gray: $bonsai-medium-gray;
$dark-gray: $bonsai-dark-gray;
$white: $bonsai-white;
$black: $bonsai-black;
$foundation-palette: $bonsai-palette;

/* --- Tooltips --- */

/// Styling for tooltip trigger elements
/// @type String
$bonsai-has-tip-border-bottom: initial !default;

// Foundation Configuration
$has-tip-border-bottom: $bonsai-has-tip-border-bottom;

/* --- Labels --- */

/// Font size for labels
/// @type number
$bonsai-label-font-size: 0.875rem !default;

/// Background color for labels
/// @type color
$bonsai-label-background: $bonsai-very-light-gray !default;

/// Font color for labels
/// @type color
$bonsai-label-color: $bonsai-black !default;

/// Color palette for labels
/// @type map
$bonsai-label-palette: () !default;

// Foundation Configuration
$label-font-size: $bonsai-label-font-size;
$label-background: $bonsai-label-background;
$label-color: $bonsai-label-color;
$label-palette: $bonsai-label-palette;

/* --- Typography --- */

/// Font color for body text
/// @type color
$bonsai-body-font-color: $black !default;

/// Font family for body text
/// @type list
$bonsai-body-font-family: "Arial", "Helvetica Neue", "Helvetica", Arial, sans-serif !default;

/// Font size for <small> elements
/// @type number
$bonsai-small-font-size: 12px !default;

/// Global font size
/// @type number
$bonsai-global-font-size: 14px !default; /// The root font size is 16px - see _typography.scss

/// Global line height
/// @type number
$bonsai-global-lineheight: 20px !default;

/// Default border definition
/// @type number | list
$bonsai-standard-border: 1px solid $bonsai-light-gray !default;

// Foundation Configuration
$body-font-color: $bonsai-body-font-color;
$body-font-family: $bonsai-body-font-family;
$small-font-size: $bonsai-small-font-size;
$global-font-size: $bonsai-global-font-size;
$global-lineheight: $bonsai-global-lineheight;

/// Spacing for extra small screen size
/// @type number
$bonsai-spacing-extra-small: $bonsai-spacing-base;

/// Spacing for small screen size
/// @type number
$bonsai-spacing-small: $bonsai-spacing-base * 2;

/// Spacing for medium screen size
/// @type number
$bonsai-spacing-medium: $bonsai-spacing-base * 4;

/// Spacing for large screen size
/// @type number
$bonsai-spacing-large: $bonsai-spacing-base * 6;

/// Spacing for extra large screen size
/// @type number
$bonsai-spacing-extra-large: $bonsai-spacing-base * 8;

/// Icon sizing
/// @type number
$bonsai-icon-size: ($bonsai-spacing-base * 5) !default;

/// Icon size scale for large and small calculations
/// @type number
$bonsai-icon-scale: 1.4 !default;

/// Close button color
/// @type color
$bonsai-close-button-color: $bonsai-primary !default;

/// Close button color when on-hover
/// @type color
$bonsai-close-button-hover: $bonsai-hover !default;

/// Close button size
/// @type number
$bonsai-close-button-size: 3em !default;

/// Border around magellan component
/// @type number | list
$bonsai-magellan-border: 1px solid $bonsai-primary !default;