// Mixins

// Breakpoint gutters mixin
@mixin breakpoint-gutters {
  width: calc(100% - (8 * #{gutter()}) );
  @include breakpoint($screen-md) {
    width: calc(100% - (4 * #{gutter()}) );
  }
  @include breakpoint($screen-md-max) {
    max-width: calc(#{$max-width} - (1 * #{gutter()}) );
  }
}

/** Button mixin, used by $buttonList in _buttons.scss
 *
 * Parameters:
 * $button[1] = name
 * $button[2] = background-color
 * $button[3] = background-color for hover & focus
 * $button[4] = text color
 */

@mixin btn-variation($button){
  // Makes .btn-green etc
  .btn--#{nth($button, 1)} {
    // Applies $colour-green etc.
    background-color: nth($button, 2);
    color: nth($button, 4);
    transition-property: background-color;
    transition-duration: 300ms;
    &:hover,
    &:focus {
      outline: none;
      // Applies $green-v-dark etc.
      background-color: nth($button, 3);
      color: nth($button, 4);
      transition-property: background-color;
      transition-duration: 600ms;
    }
    &:active {
      transition-property: background-color;
      transition-duration: 600ms;
    }
  }
}

/***********************************
 *  Link colour
 */

/**
 * Parameters
 * $link[1] = name
 * $link[2] = border-color and text
 * $link[3] = border-color text for hover & focus
 */

@mixin link-variation($link) {
  .link--#{nth($link, 1)} {
    border-bottom: 4px solid nth($link, 2);
    &:hover,
    &:focus,
    &:active {
      border-bottom: 4px solid nth($link, 3);
    }
  }
}

/**
 * Parameters
 * $color[1] = name
 * $color[2] = background colour
 */

@mixin bg-variation($color) {
  .bg--#{nth($color, 1)} {
    background-color: nth($color, 2);
  }
}

/**
 * Parameters
 * $color[1] = name
 * $color[2] = font colour
 */

@mixin font-variation($color) {
  .font--#{nth($color, 1)} {
    color: nth($color, 2);
  }
}
// Make inline classes stronger
@mixin font-variation-inline($color) {
  &.font--#{nth($color, 1)} {
    color: nth($color, 2);
  }
}

/**
 * Font sizes
 * $fs-map = font size maps in typography vars
 */

@mixin font-size($fs-map) {
  @each $fs-breakpoint, $p-font-size in $fs-map {
    @if $fs-breakpoint == null {
      @include make-font-size($p-font-size);
    }
    @else {
      @include breakpoint($fs-breakpoint) {
        @include make-font-size($p-font-size);
      }
    }
  }
}

// walks through the $fs-map, adding in line-heights
@mixin make-font-size($p-font-size) {
  @if type-of($p-font-size) == "list" {
    font-size: nth($p-font-size, 1);
    @if (length($p-font-size) > 1) {
      line-height: nth($p-font-size, 2);
    }
  }
  @else {
    font-size: $p-font-size;
  }
}

/* Helper function for multi-dimensional arrays */
@function multimap-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;
}

/* Crops 4:3 or 16:9 images to 1:1, using container width as basis */
@mixin square-img-ratio($width, $ratio) {

  // Values associated with each 'ratio' key passed in along with the container width
  $ratio-map: (
    '16:9' : (height: 0, padding-bottom : $width, offset : -39%, width : 178%),
    '4:3' : (height: 0, padding-bottom  : $width, offset: -16%, width : 134%),
    'reset': (height: auto, padding-bottom  : 0, offset: 0, width : 100%)
  );

  padding-bottom: multimap-get($ratio-map, $ratio, "padding-bottom");
  height: multimap-get($ratio-map, $ratio, "height");
  overflow:hidden;

   img {
    margin-left: multimap-get( $ratio-map, $ratio, "offset");
    width: multimap-get( $ratio-map, $ratio, "width");
    height: auto;
  }
}

// Visually hidden

@mixin visuallyhidden {
  position: absolute;
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  word-wrap: normal;
}

.visuallyhidden,
.visually-hidden {
  @include visuallyhidden;
}

.hide {
  display: none;
}

//no objectfit
 @mixin no-objectfit {
  .no-objectfit & {
    position: absolute;
    top: -100%;
    right: -100%;
    bottom: -100%;
    left: -100%;
    overflow: hidden;
    width: auto;
    max-width: none;
    height: 100%!important;
    max-height: none;
    margin: auto;
  }
}
/* Not all of these options and additional rules are provided by PostCSS Autoprefix, so am leaving this in */
@mixin border-radius( $radius: $default-border-radius, $vertical-radius: false ) {
  @if $vertical-radius {
     -webkit-border-radius: $radius $vertical-radius;
    -moz-border-radius: $radius / $vertical-radius;
    border-radius: $radius / $vertical-radius;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  } @else {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  }
}

@mixin clearfix {
  overflow: hidden;
}

/* Opacity prefixes not supported by PostCSS */
@mixin opacity( $arg ) {
  filter: alpha(opacity=($arg * 100));
  -moz-opacity: $arg;
  -khtml-opacity: $arg;
  -webkit-opacity: $arg;
  opacity: $arg;
}

@mixin linear-gradient( $color1, $color2 ) {
  background-color: $color2;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($color1), to($color2));
  background-image: -webkit-linear-gradient(left, $color1, $color2);
  background-image:    -moz-linear-gradient(right, $color2, $color1);
  background-image:     -ms-linear-gradient(left, $color1, $color2);
  background-image:      -o-linear-gradient(left, $color1, $color2);
  background-image:         linear-gradient(to left, $color1, $color2);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#{$color1}', EndColorStr='#{$color2}');
}

@mixin nowrap() {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Additional rules not supplied by PostCSS, so leaving this in */
@mixin breakword-hyphenated() {
  -ms-word-break: break-all;
    word-break: break-all;
    // Non standard for webkit
    word-break: break-word;

  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

@mixin retina {
  @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx) {
    @content;
  }
}


@mixin optional-at-root($sel) {
  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
    @content;
  }
}

@mixin placeholder($color, $font-size, $body-font, $line-height:"normal", $font-weight:"normal", $font-size--md: $font-size, $line-height--md:"normal") {
  @include optional-at-root('::placeholder') {
    color: $color;
    font-size: $font-size;
    line-height: $line-height;
    font-family: $body-font;
    opacity:  1;
    overflow: visible;
    font-weight: $font-weight;
    
    @include breakpoint($screen-md) {
      font-size: $font-size--md;
      line-height: $line-height--md;
    }
  }
  @include optional-at-root('::-webkit-input-placeholder') {
    color: $color;
    font-size: $font-size;
    line-height: $line-height;
    font-family: $body-font;
    opacity:  1;
    overflow: visible;
    font-weight: $font-weight;
    @include breakpoint($screen-md) {
      font-size: $font-size--md;
      line-height: $line-height--md;
    }
  }
  
  @include optional-at-root(':-ms-input-placeholder') {
    color: $color;
    font-size: $font-size;
    line-height: $line-height;
    font-family: $body-font;
    opacity:  1;
    overflow: visible;
    font-weight: $font-weight;
    @include breakpoint($screen-md) {
      font-size: $font-size--md;
      line-height: $line-height--md;
    }
  }

  // safari only hack
  @media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) {
    @include optional-at-root('::-webkit-input-placeholder') {
      opacity:  0.7;
    }
  }
}