// Breakpoints
// ToDo: We have to match these with foundation breakpoints

$mobile-only: max-width 767px;
$tablet: min-width 768px;
$touch: max-width 1024px;
$desktop: 1025px;


/*
Colors

The following colors are supported in sass out of the box:

Markup:
<div class="b-palette">
  <div class="gray-025">$gray-025</div>
  <div class="gray-05">$gray-025</div>
  <div class="gray-10">$gray-10</div>
  <div class="gray-15">$gray-15</div>
  <div class="gray-20">$gray-20</div>
  <div class="gray-30">$gray-30</div>
  <div class="gray-40">$gray-40</div>
  <div class="gray-50">$gray-50</div>
  <div class="gray-60">$gray-60</div>
  <div class="gray-70">$gray-70</div>
  <div class="gray-80">$gray-80</div>
  <div class="gray-90">$gray-90</div>
  <div class="black">$black</div>
</div>
<div class="b-palette m-black">
  <div class="white">$white</div>
  <div class="white-10">$white-10</div>
  <div class="white-20">$white-20</div>
  <div class="white-30">$white-30</div>
  <div class="white-40">$white-40</div>
  <div class="white-50">$white-50</div>
  <div class="white-60">$white-60</div>
  <div class="white-70">$white-70</div>
  <div class="white-80">$white-80</div>
  <div class="white-90">$white-90</div>
</div>
<div class="b-palette">
  <div class="purple">$purple</div>
  <div class="purple-20k">$purple-20k</div>
  <div class="purple-40k">$purple-40k</div>
  <div class="orange">$orange</div>
  <div class="orange-20k">$orange-20k</div>
  <div class="teal">$teal</div>
  <div class="teal-20k">$teal-20k</div>
  <div class="blue">$blue</div>
  <div class="blue-20k">$blue-20k</div>
  <div class="red">$red</div>
  <div class="green">$green</div>
</div>

Styleguide 1.2
*/
$gray-025: rgba(0,0,0,0.025);
$gray-05: rgba(0,0,0,0.05);
$gray-10: rgba(0,0,0,0.1);
$gray-15: rgba(0,0,0,0.15);
$gray-20: rgba(0,0,0,0.2);
$gray-30: rgba(0,0,0,0.3);
$gray-40: rgba(0,0,0,0.4);
$gray-50: rgba(0,0,0,0.5);
$gray-60: rgba(0,0,0,0.6);
$gray-70: rgba(0,0,0,0.7);
$gray-80: rgba(0,0,0,0.8);
$gray-90: rgba(0,0,0,0.9);

$black: #333;

$white: rgba(255,255,255,1);
$white-10: rgba(255,255,255,0.1);
$white-20: rgba(255,255,255,0.2);
$white-30: rgba(255,255,255,0.3);
$white-40: rgba(255,255,255,0.4);
$white-50: rgba(255,255,255,0.5);
$white-60: rgba(255,255,255,0.6);
$white-70: rgba(255,255,255,0.7);
$white-80: rgba(255,255,255,0.8);
$white-90: rgba(255,255,255,0.9);

$purple: rgba(82,48,128,1);
$purple-20k: #47266f;
$purple-40k: #381759;
$orange: rgba(238,91,67,1);
$orange-20k: #be4936;
$teal: rgba(0,136,149,1);
$teal-20k: #00616b;
$blue: rgba(0,138,179,1);
$blue-20k: #006e8f;

$green: rgba(25,125,50,1);
$red: rgba(195,0,20,1);

.b-palette {
  div {
    display: inline-block;
    padding: 5px;
    margin: 0 -4px -8px 0;
    width: 75px;
    height: 75px;
    overflow: hidden;
    font-weight: 600;
    color: $white;
    text-shadow: 0 0 1px $black;
  }
  &.m-black {
    background-color: $black;
  }
}

.gray-025 { background-color: $gray-025; }
.gray-05 { background-color: $gray-05; }
.gray-10 { background-color: $gray-10; }
.gray-15 { background-color: $gray-15; }
.gray-20 { background-color: $gray-20; }
.gray-30 { background-color: $gray-30; }
.gray-40 { background-color: $gray-40; }
.gray-50 { background-color: $gray-50; }
.gray-60 { background-color: $gray-60; }
.gray-70 { background-color: $gray-70; }
.gray-80 { background-color: $gray-80; }
.gray-90 { background-color: $gray-90; }
.black { background-color: $black; }
.white-10 { background-color: $white-10; }
.white-20 { background-color: $white-20; }
.white-30 { background-color: $white-30; }
.white-40 { background-color: $white-40; }
.white-50 { background-color: $white-50; }
.white-60 { background-color: $white-60; }
.white-70 { background-color: $white-70; }
.white-80 { background-color: $white-80; }
.white-90 { background-color: $white-90; }
.purple { background-color: $purple; }
.purple-20k { background-color: $purple-20k; }
.purple-40k { background-color: $purple-40k; }
.orange { background-color: $orange; }
.orange-20k { background-color: $orange-20k; }
.teal { background-color: $teal; }
.teal-20k { background-color: $teal-20k; }
.blue { background-color: $blue; }
.blue-20k { background-color: $blue-20k; }
.green { background-color: $green; }
.red { background-color: $red; }

// Mixins

@mixin transition {
  transition: all .4s ease;
}

@mixin wrap {
    // max-width: $desktop;
    // margin-left: auto;
    // margin-right: auto;
  }

  @mixin circle {
    overflow: hidden;
    border-radius: 50%;
  }

  @mixin flexbox {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }

  @mixin flex($values) {
    -webkit-box-flex: $values;
    -moz-box-flex:  $values;
    -webkit-flex:  $values;
    -ms-flex:  $values;
    flex:  $values;
  }

  @mixin order($val) {
    -webkit-box-ordinal-group: $val;
    -moz-box-ordinal-group: $val;
    -ms-flex-order: $val;
    -webkit-order: $val;
    order: $val;
  }

  @mixin flex-basis($val) {
    flex-basis: $val;
    -webkit-flex-basis: $val;
  }

  @mixin material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }

  @mixin placeholder {
    &::-webkit-input-placeholder { @content }
    &:-moz-placeholder { @content }
    &::-moz-placeholder { @content }
    &:-ms-input-placeholder { @content }
  }