/*
===========================================
Additional Breakpoints
===========================================
*/
$grid-columns: 12 !default;
$default-feature: min-width;
$nav-width: 840px;

@mixin flexbox-col($size) {
  flex: 0 0 percentage($size / $grid-columns);
  max-width: percentage($size / $grid-columns); // IE10+ and Firefox
}

@mixin equal-width-flexbox-col() {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

$font-mono: "Roboto Mono Web","Bitstream Vera Sans Mono",Consolas,Courier,monospace;

$breakpoints: (
  xsmall-screen:        $xsmall-screen,
  small-screen:         $small-screen,
  medium-screen:        $medium-screen,
  small-desktop-screen: $small-desktop-screen,
  large-screen:         $large-screen
);


/*
===========================================
Z-indexes
===========================================
*/
$z-index-flyout-menu: 10000;
$z-index-overlay: 8000;


/*
===========================================
Base unit
===========================================
This grid is based on the 8pt grid which helps us
ensure consistent horizontal and vertical rhythm.
We are using pixels rather than relative units to ensure
consistent spacing in the event that the root font size
is not equal 10.
More info: https://spec.fm/specifics/8-pt-grid
*/

// Base unit
$base-unit: 8px;

// Variables based on base units
$units-0_5:   calc($base-unit / 2);
$units-1:     $base-unit;
$units-1_5:   $base-unit * 1.5;
$units-2:     $base-unit * 2;
$units-2_5:   $base-unit * 2.5;
$units-3:     $base-unit * 3;
$units-4:     $base-unit * 4;
$units-5:     $base-unit * 5;
$units-6:     $base-unit * 6;
$units-7:     $base-unit * 7;
$units-8:     $base-unit * 8;
$units-9:     $base-unit * 9;
$units-10:    $base-unit * 10;
$units-15:    $base-unit * 15;
$units-neg-0_25: $base-unit * -.25;
$units-neg-0_5:  $base-unit * -.5;
$units-neg-1:    $base-unit * -1;
$units-neg-1_5:  $base-unit * -1.5;
$units-neg-2:    $base-unit * -2;
$units-neg-2_5:  $base-unit * -2.5;
$units-neg-3:    $base-unit * -3;



/*======================================
clearfix
========================================= */
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}