// Lightning Design System 2.3.0
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

// TINY - 320px - 20rem
@mixin mq-x-small-min {
  @media (min-width: pem($mq-x-small)) {
    @content;
  }
}

@mixin mq-x-small-max {
  @media (max-width: pem($mq-x-small)) {
    @content;
  }
}



// SMALL - 480px - 30rem
@mixin mq-small-min {
  @media (min-width: pem($mq-small)) {
    @content;
  }
}

@mixin mq-small-max {
  @media (max-width: pem($mq-small)) {
    @content;
  }
}



// MEDIUM - 768px - 48rem
@mixin mq-medium-min {
  @media (min-width: pem($mq-medium)) {
    @content;
  }
}

@mixin mq-medium-max {
  @media (max-width: pem($mq-medium)) {
    @content;
  }
}



// LARGE - 1024px - 64rem
@mixin mq-large-min {
  @media (min-width: pem($mq-large)) {
    @content;
  }
}

@mixin mq-large-max {
  @media (max-width: pem($mq-large)) {
    @content;
  }
}



// HUGE - 1224px - 76.5rem
@mixin mq-huge-min {
  @media (min-width: pem(1224)) {
    @content;
  }
}

@mixin mq-huge-max {
  @media (max-width: pem(1224)) {
    @content;
  }
}



// SUPER - 1824px - 114rem
@mixin mq-super-min {
  @media (min-width: pem(1824)) {
    @content;
  }
}

@mixin mq-super-max {
  @media (max-width: pem(1824)) {
    @content;
  }
}



// Sizing Helper
@mixin width($columns: $grid-columns, $breakpoint: null, $max: false) {
  $breakpoint-string: null;

  // Loop through the number of columns for each denominator of our fractions.
  @each $denominator in $columns {
    @if ($breakpoint != null) {
      $breakpoint-string: if($max, 'max-', '') + $breakpoint + '-';
    }

    @for $i from 1 through $denominator {

      .slds-#{$breakpoint-string}size_#{$i}-of-#{$denominator},
      .slds-#{$breakpoint-string}size--#{$i}-of-#{$denominator} {
        width: ($i / $denominator) * 100%;
      }
    }
  }
}



// Sizing Helper
@mixin flex-size($span: 1, $spread: 12) {
  @if type-of($span) == number and unitless($span) == false {
    flex: 0 0 rem($span);
    max-width: rem($span);
  }

  @else {
    $pct: percentage($span / $spread);
    flex: 0 0 $pct;
    max-width: $pct;
  }
}



// Wrapping Helper
@mixin flex-wrap($wrap: true) {
  @if $wrap {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  @else {
    flex-wrap: nowrap;
    align-items: stretch;
  }
}



// Children - Flexbox Item
@mixin flex-item($size: expand) {
  @if (type-of($size) == 'number') {
    @include flex-size($size, $columns);
  }

  @if ($size == shrink) {
    flex: 0 0 auto;
    overflow: visible;
  }

  @else if ($size == expand) {
    flex: 1 1 auto;
  }
}




// Truncate
@mixin truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Hyphenate
@mixin hyphenate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}



// Clearfix
@mixin clearfix {

  &:after {
    content: '';
    display: table;
    clear: both;
  }
}



// Spacing
@mixin spacing($property) {
  $prop-prefix: null;
  $positions: top right bottom left;

  @if $property == margin {
    $prop-prefix: 'm';
  }

  @else if $property == padding {
    $prop-prefix: 'p';
  }

  @each $token, $size in $force-base-map {
    // Analyze tokens from map
    $token-string: inspect($token);
    // Remove component specific spacing tokens
    $spacing-token: unquote(str-replace($token-string, '-spacing-', ''));
    // Loop through index that matches the substring of "spacing" to all tokens
    // minus the component specific tokens
    @if str-index($spacing-token, spacing) {
      // Strip "spacing" from the matched token names
      $spacing: unquote(str-replace($token, 'spacing-', ''));

      // scss-lint:disable ImportantRule
      @each $position in $positions {
        // Only apply !important to spacing--none utilities
        @if $size == 0 {

          // stylelint-disable max-nesting-depth,declaration-no-important
          .slds-#{$prop-prefix}-#{$position}_#{$spacing},
          .slds-#{$prop-prefix}-#{$position}--#{$spacing} {
            // stylelint-disable
            #{$property}-#{$position}: 0 !important;
          }
          // stylelint-enable max-nesting-depth,declaration-no-important
        }
        // Generate directional spacing utilities
        @else {
          .slds-#{$prop-prefix}-#{$position}_#{$spacing},
          .slds-#{$prop-prefix}-#{$position}--#{$spacing} {
            #{$property}-#{$position}: $size;
          }
        }
      }

      // Generate vertical spacing utilities
      .slds-#{$prop-prefix}-vertical_#{$spacing},
      .slds-#{$prop-prefix}-vertical--#{$spacing} {
        #{$property}-top: $size;
        #{$property}-bottom: $size;
      }
      // Generate horizontal spacing utilities
      .slds-#{$prop-prefix}-horizontal_#{$spacing},
      .slds-#{$prop-prefix}-horizontal--#{$spacing} {
        #{$property}-right: $size;
        #{$property}-left: $size;
      }
      // Generate vertical + horizontal spacing utilities
      .slds-#{$prop-prefix}-around_#{$spacing},
      .slds-#{$prop-prefix}-around--#{$spacing} {
        #{$property}: $size;
      }
    }
  }
}

@mixin square($size) {
  width: $size;
  height: $size;
}


@mixin visibility($class-name, $min: null, $max: null) {

  .slds-#{$class-name} {
    /* Allow class interpolation with parent selector for easier utility class generation */
    /* stylelint-disable selector-class-pattern */
    &-show {
      display: none;

      @if $min {
        @media (min-width: $min) {
          display: block;

          &_inline-block,
          &--inline-block {
            display: inline-block;
          }
          &_inline,
          &--inline {
            display: inline;
          }
        }
      }
    }

    @if $min and $max {

      &-show-only {
        display: none;

        @media (min-width: $min) and (max-width: $max - 1) {
          display: block;

          &_inline-block,
          &--inline-block {
            display: inline-block;
          }
          &_inline,
          &--inline {
            display: inline;
          }
        }
      }
    }
    /* stylelint-enable selector-class-pattern */
  }

  @if $max {

    .slds-max-#{$class-name}-hide {
      @media (max-width: $max - 1) {
        display: none;
      }
    }
  }
}

@mixin align-horizontal($children: null, $fallback: null, $mq: null) {
  display: flex;

  @if $mq != null {
    flex-direction: column;

    @include mq-medium-min {
      flex-direction: row;
    }
  }

  @if $children != null {

    > #{$children} {
      align-self: center;
    }
  }
}

@mixin docked-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: $color-background;
  box-shadow: $shadow-docked;
  z-index: $z-index-overlay; // Better token - more specific to docked stuff
}

@mixin absolute-center {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin: auto;
}