@import '../../core/shevy';

$breakpoints: (
  'alpha-prime': 478px,
  'alpha': 520px,
  'bravo': 769px,
  'charlie': 1025px,
  'delta': 1350px,
);

$large: (
  base-font-size: 15px,
  base-line-height: 2,
  base-font-scale: (6, 5, 4, 3, 2, 1),
  proximity: true,
  proximity-factor: .7
);

@mixin bp($bp, $min_max: 'min') {
  $value: map-get($breakpoints, $bp);

  @if $value != null {
    @media only screen and (#{$min_max}-width: $value) {
      @content;
    }
  } @else {
    @warn "Unfortunately, `#{bp}` wasn't found in $breakpoints.";
  }
}

//////////////////////////////
// Base
//////////////////////////////
*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
  font-size: 100%;
}

body {
  font-family: sans-serif;
}

.container {
  width: 90%;
  margin: 1em auto;

  @include bp(alpha) {
    width: 67%;
  }

  @include bp(charlie) {
    width: 50%;
  }
}

.footer {
  margin-bottom: bs(2);
}

//////////////////////////////
// Typography
//////////////////////////////
@include headings;
@include body;
@include content;

//////////////////////////////
// Shevy Block
//////////////////////////////
.shevy {
  @include headings;
  @include body;
  @include content;
}

//////////////////////////////
// Large Block
//////////////////////////////

.large {
  @include headings($large);
  @include body($large);
  @include content($large);

  h6 {
    margin-bottom: bs(1.5, $large);

    @include bp(alpha-prime) {
      margin-bottom: bs(1, $large);
    }
  }
}

//////////////////////////////
// Responsive Block
//////////////////////////////
$responsive: (
  base-font-size: 14px,
  base-font-scale: (2, 1.75, 1.5, 1.25, 1, .75),
  proximity: true
);

$responsive-alpha: (
  base-font-size: 16px,
  base-font-scale: (2, 1.75, 1.5, 1.25, 1, .75),
  proximity: true
);

$responsive-bravo: (
  base-font-size: 1.5em,
  base-font-scale: (2.5, 2.2, 2, 1.75, 1.25, 1),
  proximity: true
);

$responsive-charlie: (
  base-font-size: 36px,
  base-font-scale: (2.5, 2.2, 2, 1.75, 1.25, 1),
  proximity: true
);

$responsive-delta: (
  base-font-size: 48px,
  base-font-scale: (3, 2.5, 2, 1.75, 1.25, 1),
  proximity: true
);

.responsive {
  @include headings($responsive);
  @include body($responsive);
  @include content($responsive);

  @include bp(alpha) {
    @include headings($responsive-alpha);
    @include body($responsive-alpha);
    @include content($responsive-alpha);
  }

  @include bp(bravo) {
    @include headings($responsive-bravo);
    @include body($responsive-bravo);
    @include content($responsive-bravo);
  }

  @include bp(charlie) {
    @include headings($responsive-charlie);
    @include body($responsive-charlie);
    @include content($responsive-charlie);
  }

  @include bp(delta) {
    @include headings($responsive-delta);
    @include body($responsive-delta);
    @include content($responsive-delta);
  }

  p:first-child {

    @include bp(bravo) {
      margin-bottom: bs(.5, $responsive-bravo);
    }

    @include bp(charlie) {
      margin-bottom: bs(.5, $responsive-charlie);
    }

    @include bp(delta) {
      margin-bottom: bs(.5, $responsive-delta);
    }
  }
}

.box {
  background: red;
  padding: bs(2);
  margin-bottom: bs();

  .responsive & {
    padding: bs(2, $responsive);

    @include bp(alpha) {
      padding: bs(2, $responsive-alpha);
    }

    @include bp(bravo) {
      padding: bs(2, $responsive-bravo);
    }

    @include bp(charlie) {
      padding: bs(2, $responsive-charlie);
    }

    @include bp(delta) {
      padding: bs(2, $responsive-delta);
    }
  }
}