<% if(!cuttlefish && !foundation) { %>/**
 * SETTINGS
 * ---------
 * The main sass configuration file for <%= appName %>. You may/should/will
 * modify this file quite a bit. Any additions made to this file should be
 * well documented.
 */

// Overall maximum width. Is used as the "Large Desktop" breakpoint.
$max-width: 1200px;

// Base font size of the project. Is used with the em() and rem() functions
$em-base: 16;

/**
 * Color Maps
 * ---------
 * Set color values you're going to reuse throughout the project here.
 * You can call a color from this map with the color() function.
 * via: color(value)
 * ---------
 * Tips:
 * - Try to avoid naming them after the actual color they are being set to.
 * - Don't throw every variation in here, it gets confusing fast. Utilize
 *   sass's built in lighten(), darken(), hsl(), etc functions to get
 *   different variations of the same color.
 * - Similarly, use lighten(white) and darken(black) to get different shades
 *   of grey throughout the project.
 */
$colors: (
  copy:      #454545,
  primary:   dodgerblue,
  secondary: rebeccapurple,
  tertiary:  #ff0000,
  accent:    green,
);

/**
 * Responsive Breakpoints
 * ---------
 * Set breakpoint values you're going to use throughout your project.
 * You call these with a simple mixin via: @include bp(value)
 * ---------
 * Tips:
 * - Try to avoid bloating this up with a bunch of values. You may have to
 *   adjust the value(s) several times while developing, but you should be
 *   able to get away with just using the six provided breakpoints.
 * - Remember to develop mobile first!
 */
$breakpoints: (
  msm: 520px,
  mlg: 640px,
  tsm: 768px,
  tlg: 840px,
  dsm: 960px,
  dlg: #{$max-width},
);

/**
 * Imported Files
 * ---------
 * Import additional global sass files here to avoid having to import more
 * than just the settings file in your other sass sheets.
 * ---------
 * Tips:
 * - The order in which things are imported is very important. Pay attention
 *   to which files they are/are going to utilize.
 */
// Additional tool imports
@import 'utils';<% } %><% if(foundation){ %>
/**
 * Foundation Settings
 * ---------
 * Overwrite Foundation settings here.
 * ---------
 * Tips:
 * - If you need to reference, the settings file is in the
 *   node_modules/foundation-sites directory. DO NOT MODIFY THAT FILE!
 *   Instead, place just your modifications here.
 */
$button-padding: 0.85em 1em;
$button-fill: solid;

@import 'foundation-sites/scss/normalize';
@import 'foundation-sites/scss/foundation';<% } %><% if(!foundation) { %>
@import 'node.normalize.scss/normalize';<% } %><% if(cuttlefish){ %>
@import 'cuttlefish/sass/cuttlefish/cuttlefish';<% } %>

// Overwrite default browsersync notification center. It's far too intrusive right now.
#__bs_notify__ {
  // Gross Overwrites
  background: #8e44ad !important;
  top: unset !important;
  right: unset !important;
  border-radius: 0 !important;
  font-size: .8rem !important;
  padding: .4rem .8rem !important;

  // New additions
  bottom: 0;
  left: 0;
}