@import "../abstracts/variables";

$one-sm: 16/($sm*16);
$one-md: 16/($md*16);
$one-lg: 16/($lg*16);

@mixin breakpoint($point, $point2:false) {
  @if $point == xs-only or $point == sm or $point == sm-only {
    @include _breakpoint($point, $point2) {
      @content;
    }
  } @else if $point !=md and $point !=md-only  and $point !=lg and $point <= 960px {
    @include _breakpoint($point, $point2) {
      @content;
    }
  } @else {
    @include _breakpoint($point, $point2) {
      & {
        @content;
      }
    }
  }
}

@mixin _breakpoint($point, $point2:false) {
  @if $point == xs-only {
    @media only screen and (max-width: #{$sm - $one-sm}em) {
      @content;
    }
  } @else if $point == sm {
    @media only screen and (min-width: $sm-screen) {
      @content;
    }
  } @else if $point == sm-only {
    @media only screen and (min-width: $sm-screen) and (max-width: #{$md - $one-md}em) {
      @content;
    }
  } @else if $point == md {
    @media only screen and (min-width: $md-screen) {
      @content;
    }
  } @else if $point == md-only {
    @media only screen and (min-width: $md-screen) and (max-width:  #{$lg - $one-lg}em) {
      @content;
    }
  } @else if $point == lg {
    @media only screen and (min-width: $lg-screen) {
      @content;
    }
  } @else if $point2 {
    @media only screen and (min-width: $point) and (max-width: $point2) {
      @content;
    }
  } @else {
    @media only screen and (min-width: $point) {
      @content;
    }
  }
}

@mixin set-grid-cols($size) {
  .n-col-#{$size},
  .n-col-#{$size}-1,
  .n-col-#{$size}-2,
  .n-col-#{$size}-3,
  .n-col-#{$size}-4,
  .n-col-#{$size}-5,
  .n-col-#{$size}-6,
  .n-col-#{$size}-7,
  .n-col-#{$size}-8,
  .n-col-#{$size}-9,
  .n-col-#{$size}-10,
  .n-col-#{$size}-11,
  .n-col-#{$size}-12,
  .n-col-#{$size}-offset-0,
  .n-col-#{$size}-offset-1,
  .n-col-#{$size}-offset-2,
  .n-col-#{$size}-offset-3,
  .n-col-#{$size}-offset-4,
  .n-col-#{$size}-offset-5,
  .n-col-#{$size}-offset-6,
  .n-col-#{$size}-offset-7,
  .n-col-#{$size}-offset-8,
  .n-col-#{$size}-offset-9,
  .n-col-#{$size}-offset-10,
  .n-col-#{$size}-offset-11,
  .n-col-#{$size}-offset-12 {
    box-sizing: border-box;
    flex: 0 0 auto;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .n-col-#{$size} {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }

  .n-col-#{$size}-1 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }

  .n-col-#{$size}-2 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }

  .n-col-#{$size}-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .n-col-#{$size}-4 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }

  .n-col-#{$size}-5 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }

  .n-col-#{$size}-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .n-col-#{$size}-7 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }

  .n-col-#{$size}-8 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }

  .n-col-#{$size}-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .n-col-#{$size}-10 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }

  .n-col-#{$size}-11 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }

  .n-col-#{$size}-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .n-col-#{$size}-offset-0 {
    margin-left: 0;
  }

  .n-col-#{$size}-offset-1 {
    margin-left: 8.33333333%;
  }

  .n-col-#{$size}-offset-2 {
    margin-left: 16.66666667%;
  }

  .n-col-#{$size}-offset-3 {
    margin-left: 25%;
  }

  .n-col-#{$size}-offset-4 {
    margin-left: 33.33333333%;
  }

  .n-col-#{$size}-offset-5 {
    margin-left: 41.66666667%;
  }

  .n-col-#{$size}-offset-6 {
    margin-left: 50%;
  }

  .n-col-#{$size}-offset-7 {
    margin-left: 58.33333333%;
  }

  .n-col-#{$size}-offset-8 {
    margin-left: 66.66666667%;
  }

  .n-col-#{$size}-offset-9 {
    margin-left: 75%;
  }

  .n-col-#{$size}-offset-10 {
    margin-left: 83.33333333%;
  }

  .n-col-#{$size}-offset-11 {
    margin-left: 91.66666667%;
  }

  .n-start-#{$size} {
    justify-content: flex-start;
    text-align: start;
  }

  .n-center-#{$size} {
    justify-content: center;
    text-align: center;
  }

  .n-end-#{$size} {
    justify-content: flex-end;
    text-align: end;
  }

  .n-top-#{$size} {
    align-items: flex-start;
  }

  .n-middle-#{$size} {
    align-items: center;
  }

  .n-bottom-#{$size} {
    align-items: flex-end;
  }

  .n-around-#{$size} {
    justify-content: space-around;
  }

  .n-between-#{$size} {
    justify-content: space-between;
  }

  .n-first-#{$size} {
    order: -1;
  }

  .n-last-#{$size} {
    order: 1;
  }

}

@mixin retina($minRatio: 2) {
  $dpi: 96;
  @if $minRatio {
    @media only screen and (min-resolution: #{$minRatio * $dpi}dpi) {
      @content;
    }
  } @else {
    @media only screen and (max-resolution: #{$dpi * 2 - 1}dpi) {
      @content;
    }
  }
}