// ----
// libsass (v3.2.5)
// ----

/**
 * Functions and mixins
*/
@function get-accent-color($color, $accent){
  @if type-of($accent) == 'color' {
    @return $accent;
  }
  @if type-of($accent) == 'number' {
    $mixWith: if(lightness($color) > 40%, black, white);
    @return mix($mixWith, $color, $accent);
  }
  @return $color;
}

@function get-text-color($color, $default){
  @if type-of($default) == 'color' {
    @return $default;
  }
  $luminosity: lightness($color);
  @if $luminosity < 70% {
    @return #ffffff;
  }
  @return rgba(0, 0, 0, 0.5);
}

/**
 * Colors
*/
$colors: (
  brand: (
    color: #ec5d4a,
    accent: #dc5745
  ),
  light: (
    color: #F6F6F1,
    accent: #606B70,
    fill-color: #606B70,
    fill-color-accent: #F6F6F1
  ),
  gray: (
    color: #99A0A0,
    accent: 10%
  ),
  green: (
    color: #26ba9e,
    accent: 10%
  ),
  asphalt: (
    color: #606b70,
    accent: 10%
  ),
  facebook: (
    color: #3b5998,
    accent: 20%
  ),
  twitter: (
    color: #55acee,
    accent: 20%
  ),
  google: (
    color: #dc4e41,
    accent: 10%
  ),
  white: (
    color: #ffffff,
    accent: 5%
  ),
  black: (
    color: #000000,
    accent: 30%
  ),
);

$mqs: (
  sm: only screen and (max-width: 40em),
  md\+: only screen and (min-width: 40.063em),
  md: only screen and (min-width: 40.063em) and (max-width: 64em),
  lg\+: only screen and (min-width: 64.063em),
  lg: only screen and (min-width: 64.063em) and (max-width: 90em),
  xl\+: only screen and (min-width: 90.063em),
  xl: only screen and (min-width: 90.063em) and (max-width: 120em)
);

/**
 * Button variations
 */
.btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  color: inherit;
  vertical-align: middle;
  border-radius: 2px;
  transition: color 0.2s, background-color 0.2s;
}

.btn--underline {
  padding: 0.125rem 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0px;
}

.btn--fill, .btn--pill, .btn--outline, .btn--large {
  border-bottom: 0;
}

.btn.is-active,
.btn--fill,
.btn--pill,
.btn--outline {
  padding: 0.5rem 0.75rem;
}

.btn--block {
  display: block;
  margin-bottom: 1rem;
}

.btn--large {
  padding: 0.75rem 1.25rem;
  font-size: 1.25rem;
}

.btn--small, .btn--small.is-active {
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
}

.btn--outline {
  box-shadow: inset 0px 0px 0 2px currentColor;
}

.btn--squared {
  border-radius: 0px;
}

.btn--pill {
  border-radius: 100em;
}

.btn--uppercase {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn.is-active {
  box-shadow: 0px 0px 5px currentColor;
}

.btn.is-disabled, .btn[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

@each $key, $obj in $colors {
  $color: map_get($obj, "color");
  $accent: get-accent-color($color, map_get($obj, "accent"));
  $fill-color: get-text-color($color, map_get($obj, "fill-color"));
  $fill-color-accent: get-text-color($accent, map_get($obj, "fill-color-accent"));
  
  .btn--#{$key} {
    color: $color;
    
    &:not([disabled]):not(.is-disabled):not(.is-active):hover {
      color: $accent;
    }
    
    &.btn--fill {
      color: $fill-color;
      background-color: $color;
      
      &:not([disabled]):not(.is-disabled):not(.is-active):hover {
        color: $fill-color-accent;
        background-color: $accent;
      }
    }
    
    &.is-active, &.is-active:hover {
      color: $fill-color-accent;
      box-shadow: 0px 0px 4px transparentize($accent, 0.7);
      background-color: $accent;
    }
  }
}

/**
 * Default styles
 */
*, *:before, *:after {
  box-sizing: border-box;
}
html, body {
  padding: 0;
  margin: 0;
}
html {
  font-family: -apple-system , '.SFNSText-Regular' , 'Helvetica Neue' , 'Roboto' , 'Segoe UI' , sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #222;
  background-color: #fdfdfd;
}
.group {
  width: 100%;
  padding: 2rem;
  &:not(:first-child) {
    border-top: 1px solid #eee;
  }
  h2 {
    margin: 0 0 0.5rem 0;
    span {
      font-weight: 100;
      font-size: 1rem;
      color: #ec5d4a;
      &:before {
        content: "\2015";
        margin-right: 5px;
        display: inline-block;
        transform: rotate(-60deg);
      }
    }
  }
  p {
    color: #999;
    font-size: 0.88rem;
    margin: 0;
    &:last-of-type {
      margin: 0 0 1.5rem 0;
    }
    span {
      border-bottom: 1px dotted currentColor;
      &:hover {
        color: #666;
      }
    }
  }
}