@import '../override-function';
@charset "UTF-8";

/// Returns a media context (media query / grid context) that can be stored in a variable and passed to `media()` as a single-keyword argument. Media contexts defined using `new-breakpoint` are used by the visual grid, as long as they are defined before importing Neat.
///
/// @param {List} $query
///   A list of media query features and values. Each `$feature` should have a corresponding `$value`.
///
///   If there is only a single `$value` in `$query`, `$default-feature` is going to be used.
///
///   The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1).
///
/// @param {Number (unitless)} $total-columns [$grid-columns]
///   - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.
///
/// @example scss - Usage
///   $mobile: new-breakpoint(max-width 480px 4);
///
///   .element {
///     @include media($mobile) {
///       @include span-columns(4);
///     }
///   }
///
/// @example css - CSS Output
///   @media screen and (max-width: 480px) {
///     .element {
///       display: block;
///       float: left;
///       margin-right: 7.42297%;
///       width: 100%;
///     }
///     .element:last-child {
///       margin-right: 0;
///     }
///   }

@function new-breakpoint($query: $feature $value $columns, $total-columns: $grid-columns) {
  @if length($query) == 1 {
    $query: $default-feature nth($query, 1) $total-columns;
  } @else if is-even(length($query)) {
    $query: append($query, $total-columns);
  }

  @if is-not(belongs-to($query, $visual-grid-breakpoints)) {
    $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global;
  }

  @return $query;
}


// Not function for Libsass compatibility
// https://github.com/sass/libsass/issues/368
@function is-not($value) {
  @return if($value, false, true);
}

// Checks if a number is even
@function is-even($int) {
  @return $int % 2 == 0;
}

// Checks if an element belongs to a list or not
@function belongs-to($tested-item, $list) {
  @return is-not(not-belongs-to($tested-item, $list));
}

@function not-belongs-to($tested-item, $list) {
  @return is-not(index($list, $tested-item));
}

// Contains display value
@function contains-display-value($query) {
  @return belongs-to(table, $query)
       or belongs-to(block, $query)
       or belongs-to(inline-block, $query)
       or belongs-to(inline, $query);
}

// Parses the first argument of span-columns()
@function container-span($span: $span) {
  @if length($span) == 3 {
    $container-columns: nth($span, 3);
    @return $container-columns;
  } @else if length($span) == 2 {
    $container-columns: nth($span, 2);
    @return $container-columns;
  }

  @return $grid-columns;
}

@function container-shift($shift: $shift) {
  $parent-columns: $grid-columns !default !global;

  @if length($shift) == 3 {
    $container-columns: nth($shift, 3);
    @return $container-columns;
  } @else if length($shift) == 2 {
    $container-columns: nth($shift, 2);
    @return $container-columns;
  }

  @return $parent-columns;
}

// Generates a striped background
@function gradient-stops($grid-columns, $color: $visual-grid-color) {
  $transparent: transparent;

  $column-width: flex-grid(1, $grid-columns);
  $gutter-width: flex-gutter($grid-columns);
  $column-offset: $column-width;

  $values: ($transparent 0, $color 0);

  @for $i from 1 to ($grid-columns * 2) {
    @if is-even($i) {
      $values: append($values, $transparent $column-offset, comma);
      $values: append($values, $color $column-offset, comma);
      $column-offset: $column-offset + $column-width;
    } @else {
      $values: append($values, $color $column-offset, comma);
      $values: append($values, $transparent $column-offset, comma);
      $column-offset: $column-offset + $gutter-width;
    }
  }

  @return $values;
}

// Layout direction
@function get-direction($layout, $default) {
  $direction: null;

  @if to-upper-case($layout) == "LTR" or to-upper-case($layout) == "RTL" {
    $direction: direction-from-layout($layout);
  } @else {
    $direction: direction-from-layout($default);
  }

  @return $direction;
}

@function direction-from-layout($layout) {
  $direction: null;

  @if to-upper-case($layout) == "LTR" {
    $direction: right;
  } @else {
    $direction: left;
  }

  @return $direction;
}

@function get-opposite-direction($direction) {
  $opposite-direction: left;

  @if $direction == "left" {
    $opposite-direction: right;
  }

  @return $opposite-direction;
}

// Spacing Units
@function units($unit) {
  //$name: nth($flex-names, $i);

  @if not map-has-key($units, $unit) {
    @error '`#{$unit}` is not a valid spacing unit token. '
      + 'Valid spacing unit tokens: '
      + '#{map-keys($units)}';
  }

  $val: map-get($units, $unit) ;
  $remVal: $val + rem;
  @return scale-rem($remVal);
}

@function units-px($unit) {
  //$name: nth($flex-names, $i);

  @if not map-has-key($units, $unit) {
    @error '`#{$unit}` is not a valid spacing unit token. '
      + 'Valid spacing unit tokens: '
      + '#{map-keys($units)}';
  }

  $val: map-get($units, $unit) ;
  @return ($val * 10) + px;
}