/**
 *  grid: mixin
 *
 *  
 *  @author Björn Hase, me@herr-hase.wtf
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://gitea.node001.net/tiny-components/plain-ui.git
 *
 */

@mixin grid-make($class) {
    @include grid-loop-columns($grid__columns, $class, width);
}

@mixin grid-calc-columns($index, $class, $type) {
    @if $type == width and $index > 0 {
        .#{$class}#{$index} {
            width: percentage(($index / $grid__columns));
        }
    }
}

@mixin grid-loop-columns($index, $class, $type) {
    @if $index >= 0 {
        @include grid-calc-columns($index, $class, $type);

        // next iteration
        @include grid-loop-columns(($index - 1), $class, $type);
    }
}

// defaults for auto cols
@mixin grid-setup-auto-cols() {
    @include flex(1, 0, 0px); // a unit on last value is required by IE10-11
}

@mixin grid-reset-text-align() {
    //
    // We want to reset any text-align properties set by the grid
    // (required for the inline-block fallback)
    // but we don't want to override any text-align properties
    // set on the individual col-x element
    // or on any of it's child elements
    //
    // 1) set to left by default (works everywhere)
    // 2) set to start (respects right to left text)
    //
    //
    text-align: left;
    text-align: start;
    -moz-text-align-last: left;
    -moz-text-align-last: start;
    text-align-last: left;
    text-align-last: start;
}


/**
 *  order class generation mixins
 *
 */

@mixin order($order: 0) {
    -webkit-order: $order;
    order: $order;
}

@mixin grid-make-order-helpers() {
    @include grid-loop-order-helpers($grid__columns);
}

@mixin grid-loop-order-helpers($index, $breakpoint: null) {
    @if $index >= 0 {
        .order#{$breakpoint}-#{$index} {
            @include order($index);
        }

        // next iteration
        @include grid-loop-order-helpers(($index - 1), $breakpoint);
    }
}


/**
 *  offset class generation mixins
 *
 */

@mixin grid-offset($index: 0) {
    $offset: ($index / $grid__columns);

    // convert to percentage only if not zero
    @if $offset != 0 {
        $offset: percentage($offset);
    }

    margin-left: $offset;
}

@mixin grid-make-offset-helpers() {
    @include grid-loop-offset-helpers($grid__columns - 1);
}

@mixin grid-loop-offset-helpers($index, $breakpoint: null) {
    @if $index > 0 and $breakpoint == null {
        .offset#{$breakpoint}-#{$index} {
            @include grid-offset($index);
        }

        // next iteration
        @include grid-loop-offset-helpers(($index - 1), $breakpoint);

    } @else if $index >= 0 and $breakpoint != null {
        .offset#{$breakpoint}-#{$index} {
            @include grid-offset($index);
        }

        // next iteration
        @include grid-loop-offset-helpers(($index - 1), $breakpoint);
    }
}


/**
 *  modifier mixins
 *
 */

@mixin display-flex() {
    display: -webkit-flex;
    display: flex;
}

@mixin flex($grow: 0, $shrink: 1, $basis: auto) {
    -webkit-flex: $grow $shrink $basis;
    flex: $grow $shrink $basis;
}

@mixin flex-grow($grow:1) {
    -webkit-flex-grow: $grow;
    flex-grow: $grow;
}

@mixin flex-shrink($shrink:1) {
    -webkit-flex-shrink: $shrink;
    flex-shrink: $shrink;
}

@mixin flex-basis($basis:auto) {
    -webkit-flex-basis: $basis;
    flex-basis: $basis;
}

@mixin flex-flow($direction: row, $wrap: nowrap) {
    -webkit-flex-flow: $direction $wrap;
    flex-flow: $direction $wrap;
}

@mixin flex-wrap($wrap: wrap) {
    -webkit-flex-wrap: $wrap;
    flex-wrap: $wrap;
}

@mixin flex-direction($direction: row) {
    -webkit-flex-direction: $direction;
    flex-direction: $direction;
}

@mixin align-items($align: stretch) {
    -webkit-align-items: $align;
    align-items: $align;
}

@mixin align-self($align: stretch) {
    -webkit-align-self: $align;
    align-self: $align;
}

@mixin align-content($align: stretch) {
    -webkit-align-content: $align;
    align-content: $align;
}


/**
 *  justify-content
 *
 *  Uses "text-align" for the fallback inline-block grid
 *  "text-align" is globally supported and works on all rows except the last
 *  "text-align-last", where supported, handles the last line (and, happily, grids with only one row)
 *
 */

@mixin justify-content-start() {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

@mixin justify-content-end() {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

@mixin justify-content-center() {
    -webkit-justify-content: center;
    justify-content: center;
}

@mixin justify-content-space-between() {
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

@mixin justify-content-space-around() {
    -webkit-justify-content: space-around;
    justify-content: space-around;
}


/**
 *  Responsible Visibility
 *
 */

@mixin grid-responsive-visibility-helpers() {

    // We need to handle xxs and xlg breakpoints differently
    $grid__map-breakpoints: map-remove($grid__breakpoints, xxs, xlg);

    .hidden-xxs {
        @include media-breakpoint-only('xxs') {
            display: none;
        }
    }

    @each $bp in map-keys($grid__map-breakpoints)
    {
        .hidden-#{$bp}-up {
            @include media-breakpoint-up($bp) {
                display: none;
            }
        }

        .hidden-#{$bp}-down {
            @include media-breakpoint-down($bp) {
                display: none;
            }
        }

        .hidden-#{$bp} {
            @include media-breakpoint-only($bp) {
                display: none;
            }
        }
    }

    .hidden-xlg {
        @include media-breakpoint-only('xlg') {
            display: none;
        }
    }
}


/**
 *  Breakpoint viewport sizes and media queries
 *
 *  Breakpoints are defined as a map of (name: minimum width), order from small to large:
 *  (xs: 576px, sm: 768px, md: 992px)
 *  The map defined in the `$reflex-breakpoints` global variable is used as the `$breakpoints` argument by default.
 *  Name of the next breakpoint, or null for the last breakpoint.
 *  >> breakpoint-next(sm) -> md
 *  >> breakpoint-next(sm, $breakpoints: (xs: 576px, sm: 768px, md: 992px)) -> md
 *  >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) -> md
 *
 */

@function breakpoint-next($name, $breakpoints: $grid__breakpoints, $breakpoint-names: map-keys($breakpoints)) {
    $n: index($breakpoint-names, $name);
    @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}


/**
 *  Minimum breakpoint width. Null for the smallest (first) breakpoint.
 *  breakpoint-min(sm, (xs: 576px, sm: 768px, md: 992px)) -> 768px
 *
 */

@function breakpoint-min($name, $breakpoints: $grid__breakpoints) {
    $min: map-get($breakpoints, $name);
    @return if($min !=0, $min, null);
}

// Maximum breakpoint width. Null for the largest (last) breakpoint.
// The maximum value is calculated as the minimum of the next one less 0.1.
// >> breakpoint-max(sm, (xs: 576px, sm: 768px, md: 992px)) -> 991px
@function breakpoint-max($name, $breakpoints: $grid__breakpoints) {
    $next: breakpoint-next($name, $breakpoints);
    @return if($next, breakpoint-min($next, $breakpoints) - 1, null);
}

// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid__breakpoints) {
    $min: breakpoint-min($name, $breakpoints);

    @if $min {
        @media (min-width: $min) {
            @content;
        }
    }

    @else {
        @content;
    }
}


/**
 *  Media of at most the maximum breakpoint width. No query for the largest breakpoint.
 *  Makes the @content apply to the given breakpoint and narrower.
 *
 */

@mixin media-breakpoint-down($name, $breakpoints: $grid__breakpoints) {
    $max: breakpoint-max($name, $breakpoints);

    @if $max {
        @media (max-width: $max) {
            @content;
        }
    }

    @else {
        @content;
    }
}


/**
 *  Media between the breakpoint's minimum and maximum widths.
 *  No minimum for the smallest breakpoint, and no maximum for the largest one.
 *  Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
 *
 */

@mixin media-breakpoint-only($name, $breakpoints: $grid__breakpoints) {
    @include media-breakpoint-up($name, $breakpoints) {
        @include media-breakpoint-down($name, $breakpoints) {
            @content;
        }
    }
}

@mixin box-sizing($boxmodel) {
    -webkit-box-sizing: $boxmodel;
    -moz-box-sizing: $boxmodel;
    box-sizing: $boxmodel;
}