// -----------------------------------------------------------------------------
// Grid Functions

// scss-lint:disable PropertySpelling

@mixin clearfix {
  &::after {
    clear: both;
    content: "";
    display: block;
  }
}

@mixin fsa-grid-row() {
  letter-spacing: -.31em;
  *letter-spacing: normal;
  *word-spacing: -.43em;
  text-rendering: optimizespeed;
  font-family: $font-base;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin-left: -$fsa-grid-gutter;
  @supports (display:flex) {
    letter-spacing: normal;
    word-spacing: normal;
  }
}

@mixin fsa-grid-column() {

  display: inline-block;
  *display: inline;
  zoom: 1;
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
  text-rendering: auto;
  padding-left: $fsa-grid-gutter;

  // scss-lint:disable SelectorFormat
  .fsa-grid--no-gutter & {
    padding-left: 0;
  }

}

@mixin fsa-grid-column-width($numerator, $denominator: $fsa-grid-columns) {
  width: calc( math.div($numerator, $denominator) * 100%);
}

@mixin fsa-grid($namespace: '') {

  .fsa-grid__grow#{$namespace},
  .fsa-grid__auto#{$namespace} {
    @include fsa-grid-column();
    flex: 1;
  }

  .fsa-grid__shrink#{$namespace} {
    @include fsa-grid-column();
    flex: 0;
  }

  .fsa-grid__1#{$namespace},
  .fsa-grid__1\/1#{$namespace},
  .fsa-grid__1\/12#{$namespace},
  .fsa-grid__1\/2#{$namespace},
  .fsa-grid__1\/3#{$namespace},
  .fsa-grid__1\/4#{$namespace},
  .fsa-grid__1\/6#{$namespace},
  .fsa-grid__10\/12#{$namespace},
  .fsa-grid__11\/12#{$namespace},
  .fsa-grid__12\/12#{$namespace},
  .fsa-grid__2\/12#{$namespace},
  .fsa-grid__2\/3#{$namespace},
  .fsa-grid__3\/12#{$namespace},
  .fsa-grid__3\/4#{$namespace},
  .fsa-grid__4\/12#{$namespace},
  .fsa-grid__5\/12#{$namespace},
  .fsa-grid__5\/6#{$namespace},
  .fsa-grid__6\/12#{$namespace},
  .fsa-grid__7\/12#{$namespace},
  .fsa-grid__8\/12#{$namespace},
  .fsa-grid__9\/12#{$namespace} {
    @include fsa-grid-column();
  }

  .fsa-grid__1\/12#{$namespace} {
    @include fsa-grid-column-width(1);
  }

  .fsa-grid__1\/6#{$namespace},
  .fsa-grid__2\/12#{$namespace} {
    @include fsa-grid-column-width(2);
  }

  .fsa-grid__1\/4#{$namespace},
  .fsa-grid__3\/12#{$namespace} {
    @include fsa-grid-column-width(3);
  }

  .fsa-grid__1\/3#{$namespace},
  .fsa-grid__4\/12#{$namespace} {
    @include fsa-grid-column-width(4);
  }

  .fsa-grid__5\/12#{$namespace} {
    @include fsa-grid-column-width(5);
  }

  .fsa-grid__1\/2#{$namespace},
  .fsa-grid__6\/12#{$namespace} {
    @include fsa-grid-column-width(6);
  }

  .fsa-grid__7\/12#{$namespace} {
    @include fsa-grid-column-width(7);
  }

  .fsa-grid__2\/3#{$namespace},
  .fsa-grid__8\/12#{$namespace} {
    @include fsa-grid-column-width(8);
  }

  .fsa-grid__3\/4#{$namespace},
  .fsa-grid__9\/12#{$namespace} {
    @include fsa-grid-column-width(9);
  }

  .fsa-grid__10\/12#{$namespace},
  .fsa-grid__5\/6#{$namespace} {
    @include fsa-grid-column-width(10);
  }
  .fsa-grid__11\/12#{$namespace} {
    @include fsa-grid-column-width(11);
  }

  .fsa-grid__1#{$namespace},
  .fsa-grid__1\/1#{$namespace},
  .fsa-grid__12\/12#{$namespace} {
    @include fsa-grid-column-width(12);
  }

}

//  From HugoG: http://hugogiraudel.com/2014/01/13/sass-string-replacement-function/
// http://sassmeister.com/gist/1b4f2da5527830088e4d
// Replace `$search` with `$replace` in `$string`
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

// -----------------------------------------------------------------------------
// Breakpoints
// scss-lint:disable SpaceAfterComma

$breakpoints: (
  '(min-width: #{$screen-s})' 'S',
  '(min-width: #{$screen-m})' 'M',
  '(min-width: #{$screen-l})' 'L',
  '(min-width: #{$screen-xl})' 'XL'
);

// -----------------------------------------------------------------------------
// Breakpoints: Primary collection of available media query breakpoints
@mixin breakpoint($point, $direction: 'up') {
  @each $breakpoint in $breakpoints {
    $query: nth($breakpoint, 1);
    $name: nth($breakpoint, 2);

    @if $direction == up {
      @if ($name == $point) {
        @media #{$query} { @content }
      }
    } @else {
      @if ($name == $point) {
        @media #{str-replace($query, "min", "max")} {
          @content
        }
      }
    }
  }
}

// -----------------------------------------------------------------------------
// Typography: Progressive font-size scale
//
// Example usage: @include font-size(0); is SMALLEST available size
// Example usage: @include font-size(9); is LARGEST available size
@mixin font-size($scale: 3) {
  @if $scale == 0 { font-size: $font-size-0; line-height: $base-line-height; }
  @if $scale == 1 { font-size: $font-size-1; line-height: $base-line-height; }
  @if $scale == 2 { font-size: $font-size-2; line-height: $base-line-height; }
  @if $scale == 3 { font-size: $font-size-3; line-height: $line-height-medium; }
  @if $scale == 4 { font-size: $font-size-4; line-height: $line-height-large; }
  @if $scale == 5 { font-size: $font-size-5; line-height: $line-height-large; }
  @if $scale == 6 { font-size: $font-size-6; line-height: $line-height-extra-large; }
  @if $scale == 7 { font-size: $font-size-7; line-height: $line-height-extra-extra-large; }
}

// -----------------------------------------------------------------------------
// CSS Triangles
// We use this to create equilateral triangles
// $triangle-size - Used to set border-size. No default, set a px or em size.
// $triangle-color - Used to set border-color which makes up triangle. No default
// $triangle-direction - Used to determine which direction triangle points. Options: top, bottom, left, right
// Sourced from foundation.zurb.com
//
// Example usage:
// @include css-triangle(10px, #fff, top);
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {

  content: '';
  display: block;
  width: 0;
  height: 0;
  border: inset $triangle-size;

  @if ($triangle-direction == top) {
    border-color: $triangle-color transparent transparent;
    border-top-style: solid;
  }

  @if ($triangle-direction == bottom) {
    border-color: transparent transparent $triangle-color;
    border-bottom-style: solid;
  }

  @if ($triangle-direction == left) {
    border-color: transparent transparent transparent $triangle-color;
    border-left-style: solid;
  }

  @if ($triangle-direction == right) {
    border-color: transparent $triangle-color transparent transparent;
    border-right-style: solid;
  }
}

// -----------------------------------------------------------------------------
// Positioning
// If one of "$coordinates" is unitless, it omits the prop/val pair,
// e.g. '0' instead of '0px'
//
// Example usage:
// @include position(absolute, 0px 0px 0px 0); (note last 0 has no
// unit, e.g. 'px')
@mixin position($position: relative, $coordinates: 0 0 0 0) {

  @if type-of($position) == list {
    $coordinates: $position;
    $position: relative;
  }

  $top: nth($coordinates, 1);
  $right: nth($coordinates, 2);
  $bottom: nth($coordinates, 3);
  $left: nth($coordinates, 4);

  position: $position;

  @if $top == auto {
    top: $top;
  }
  @else if not(unitless($top)) {
    top: $top;
  }

  @if $right == auto {
    right: $right;
  }
  @else if not(unitless($right)) {
    right: $right;
  }

  @if $bottom == auto {
    bottom: $bottom;
  }
  @else if not(unitless($bottom)) {
    bottom: $bottom;
  }

  @if $left == auto {
    left: $left;
  }
  @else if not(unitless($left)) {
    left: $left;
  }
}

// -----------------------------------------------------------------------------
// Reset <ul> (note, you'll likely want to reset-li() too
@mixin reset-ul() {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

// -----------------------------------------------------------------------------
// Reset <li>
@mixin reset-li() {

  display: list-item;
  margin: 0;
  padding: 0;

}

// -----------------------------------------------------------------------------
// Lists

@mixin fsa-list-shared {
  margin-bottom: $size-small;
  margin-top: $size-small;
  padding-left: 1.4em; // MAGIC NUMBER: Approximately 24px left padding at default font size. Must be in **em** units to avoid 2-digit <ol> rendered numbers receding too far on left for bigger text. For example, here's what happens when using px or rem unit: https://cloud.githubusercontent.com/assets/1165933/18491589/b149cec6-79cc-11e6-9280-936838977b64.png
}

@mixin fsa-list-bullet {
  @include fsa-list-shared();
  list-style-type: disc;
  > * { display: list-item; }
}

@mixin fsa-list-number {
  @include fsa-list-shared();
  list-style-type: decimal;
  > * { display: list-item; }
}

@mixin fsa-list-unstyled {
  @include reset-ul();
  > * {
    @include reset-li();
  }
}

@mixin fsa-list-inline {

  @include reset-ul();
  display: flex;
  margin-bottom: $size-small;

  > * {

    @include reset-li();
    margin-right: $size-small;

    &:last-child {
      margin-right: 0;
    }

  }
}


// -----------------------------------------------------------------------------
// Reset <button>
@mixin reset-button() {
  text-align: left;
  appearance: none;
  margin: 0;
  padding: 0;
  border-width: 0;
  background: transparent;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  user-select: text;

  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }
}

// -----------------------------------------------------------------------------
// Font Smoothing
@mixin font-smoothing($value: on) {
  @if $value == on {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  } @else {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
  }
}

// -----------------------------------------------------------------------------
// Space between form elements
@mixin fsa-space-between() {
  // Deprecated
}

// -----------------------------------------------------------------------------
// Shared properties between select and input text elements
@mixin fsa-shared-form-properties() {

  & {
    vertical-align: middle;
    appearance: none;
    display: inline-block;
    height: $button-height;
    border: 1px solid $form-outline-color;
    max-width: 100%;
    margin: 0;
    border-radius: $form-border-radius;
    box-shadow: none;
    font-family: $form-font;
    font-size: $form-text-size;
    color: $form-text-color;
    line-height: $line-height-flat;
    background-color: $color-white;
  }

  &[disabled] {
    background-color: $form-disabled-bg-color;
    color: $form-text-color-disabled;
  }

  &[readonly] {

    background-color: $color-fsa-base-bg;
    cursor: default;

    &:focus {
      border-color: inherit;
      box-shadow: none;
      // outline: 0;
    }

  }

}

// -----------------------------------------------------------------------------
// Background pattern to denote "transparent"; think Photoshop

// @mixin checkerboard($color: rgba(0, 0, 0, .10)) {
//   background-color: $color;
//   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAvSURBVHgBvY4xDQAACMMAWdOAXDRMFy/Zw0FCvy096iTTBgBq7rCFu+B6aNNDQwMyswata817IAAAAABJRU5ErkJggg==)
// }

@mixin checkerboard($color: rgba(0, 0, 0, .10)) {

  background-color: $color;
  overflow: auto;

  // scss-lint:disable TrailingSemicolon SpaceAfterPropertyColon
  background-image:
    linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%, $color),
    linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%, $color)
  ;
  background-size: 2rem 2rem;
  background-position: 0 0, 5rem 5rem;

}

// -----------------------------------------------------------------------------
// Dot dot dot por favor
@mixin fsa-ellipsis {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

@mixin fsa-ellipsis-unset {
  max-width: initial;
  overflow: initial;
  text-overflow: unset;
  text-overflow: initial;
  white-space: normal;
}

// -----------------------------------------------------------------------------
// :focus'ing
@mixin fsa-focus() {
  &:focus {
    outline: 3px solid $color-focus;
  }
  &:focus:not(:focus-visible) {
    outline: 0;
  }
  &:focus-visible {
    outline: 3px solid $color-focus;
  }
}

// -----------------------------------------------------------------------------
// Overflow Gradient: show edge gradient on left or right depending on scroll position

@mixin overflow-gradient(
    // Defaults:
    $bgAll: $color-fsa-base-bg,
    $bgEdge: transparent,
    $bgShadow: $shadow-color,
    $size: $size-large
  ) {

  // scss-lint:disable Indentation SpaceAfterPropertyColon SpaceAfterComma TrailingSemicolon

  overflow: auto;
  overflow-x: auto;
  overflow-y: hidden;
  background-image:
    /* Shadows */
    linear-gradient(to right, $bgAll, $bgAll),
    linear-gradient(to right, $bgAll, $bgAll),
    /* Shadow covers */
    linear-gradient(to right, $bgShadow, $bgEdge),
    linear-gradient(to left, $bgShadow, $bgEdge)
  ;

  background-position:
    left center,
    right center,
    left center,
    right center
  ;
  background-repeat: no-repeat;
  background-color: $bgAll;
  background-size:
    $size 100%,
    $size 100%,
    math.div($size, 2) 100%,
    math.div($size, 2) 100%
  ;

  /* Opera doesn't support this in the shorthand */
  background-attachment: local, local, scroll, scroll;

}

// -----------------------------------------------------------------------------
// button reset ?
@mixin fsa-button-reset {

  & {
    text-align: left;
    appearance: none;
    margin: 0;
    padding: 0;
    border-width: 0;
    background-color: transparent;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
    user-select: text;
  }

  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }

}

@mixin fudgeMargin($fudge-amount: $size-extra-large) {
  // add space above a jump target, e.g. href="#target-id". Helpful when you
  // don't want the top of your target flush with the viewport top
  &:before {
    content: '';
    display: block;
    height: $fudge-amount;
    margin: (-$fudge-amount) 0 0;
  }
}

// ----------------------------------------------------------------------------
// h1 - h6 header elements

@mixin fsa-header($variant: '1') {

  & {
    color: $color-title;
    font-family: $font-sans;
  }

  & + p {
    margin-top: $size-base;
  }

  @if $variant == '1' {

    font-size: $h1-font-size;
    line-height: $line-height-extra-large;

    @include breakpoint(M, down) {
      font-size: $size-large;
    }

    .fsa-breadcrumb + & {
      margin-top: 0;
    }

    font-weight: $font-normal;
    margin-top: $size-medium;
    margin-bottom: 0;

  }

  @else if $variant == '2' {
    font-size: $h2-font-size;
    line-height: $line-height-large;
    margin-top: $size-default;
    margin-bottom: $size-default;
    font-weight: normal;
  }

  @else if $variant == '3' {
    font-size: $h3-font-size;
    font-weight: $font-bold;
    line-height: $line-height-medium;
    margin-top: $size-medium;
    margin-bottom: $size-small;
  }

  @else if $variant == '4' {
    font-size: $h4-font-size;
    font-weight: $font-bold;
    line-height: $line-height-extra-small;
    margin-top: $size-medium;
    margin-bottom: $size-small;
  }

  @else if $variant == '5' {
    font-size: $h5-font-size;
    font-weight: $font-bold;
    line-height: $line-height-extra-small;
    margin-top: $size-medium;
    margin-bottom: $size-small;
  }

  @else if $variant == '6' {
    font-size: $h6-font-size;
    font-weight: $font-normal;
    line-height: $line-height-extra-small;
    text-transform: uppercase;
    margin-top: $size-medium;
    margin-bottom: $size-base;
  }

}