/**
 * Mixins
 *
 * @package amberbody
 * @since 1.0.0
 */

// Media up
@mixin media-up($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    $breakpoint-value: map-get($breakpoints, $breakpoint);
    @media (min-width: $breakpoint-value) {
      @content;
    }
  } @else {
    @warn 'Invalid breakpoint: #{$breakpoint}.';
  }
}



// Media down
@mixin media-down($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    $breakpoint-value: map-get($breakpoints, $breakpoint);
    @media (max-width: ($breakpoint-value - 1)) {
      @content;
    }
  } @else {
    @warn 'Invalid breakpoint: #{$breakpoint}.';
  }
}



// Media between (lower resolution, upper resolution)
@mixin media-between($lower, $upper) {
  @if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) {
    $lower-breakpoint: map-get($breakpoints, $lower);
    $upper-breakpoint: map-get($breakpoints, $upper);
    @media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
      @content;
    }
  } @else {
    @if (map-has-key($breakpoints, $lower) == false) {
      @warn 'Your lower breakpoint was invalid: #{$lower}.';
    }
    @if (map-has-key($breakpoints, $upper) == false) {
      @warn 'Your upper breakpoint was invalid: #{$upper}.';
    }
  }
}



// Container max widths
@mixin container-max-widths($width: 'standard') {
	@if $width == 'narrow' {
		@each $breakpoint, $narrow-container-max-widths in $narrow-container-max-widths {
			@include media-up($breakpoint) {
			  max-width: $narrow-container-max-widths !important;
			}
		}
	} @else {
		@each $breakpoint, $container-max-width in $container-max-widths {
			@include media-up($breakpoint) {
			  max-width: $container-max-width !important;
			}
		}
	}
}



// Make container
@mixin make_container($width: 'standard') {
	@include container-max-widths($width);
	box-sizing: border-box;
	margin-left: auto; 
	margin-right: auto;
	width: 100%;
}



// Font
$font-weight: (
  thin: 100,
  extralight: 200,
  light: 300, 
  regular: 400,
  medium: 500,
  bold: 700,
  extrabold: 800,
  black: 900
);



// Disable user selection
@mixin nonselect {
  user-select: none;
}



// Row
@mixin row() {
  display: flex;
  flex-flow: row wrap;
}



// Column
@mixin col($sizes...) {
  display: flex;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 100%;
  @each $size in $sizes {
    @if map-has-key($breakpoints, nth($size,1)) {
      @include media-up(nth($size,1)) {
        $width: ((100% / $grid-columns) * nth($size,2));
        flex-basis: $width;
        max-width: $width;
      }
    }
  }
}