/*------------------------------------*\
    # DISPLAY
\*------------------------------------*/

/**
 * A utility for applying common box rendering.
 *
 * Can also be used using responsive prefixes
 *
    .gs-u-display-none
    .gs-u-display-block@m
 *
 */

$gs-display-switch-breakpoint-names: $gel-grid-breakpoints !default;
$gs-display-switch-breakpoint-names--1280: $gel-grid-breakpoints--1280 !default;

@mixin display-switch($suffix: null) {
    $breakpoint-suffix: '';

    @if $suffix != null {
        $breakpoint-suffix: \@#{$suffix};
    }

    .gs-u-display-none#{$breakpoint-suffix} {
        display: none !important;
        visibility: hidden !important;
    }

    .gs-u-display-inline#{$breakpoint-suffix} {
        display: inline !important;
        visibility: visible !important;
    }

    .gs-u-display-inline-block#{$breakpoint-suffix} {
        display: inline-block !important;
        visibility: visible !important;
    }

    .gs-u-display-block#{$breakpoint-suffix} {
        display: block !important;
        visibility: visible !important;
    }

    .gs-u-display-table-cell#{$breakpoint-suffix} {
        display: table-cell !important;
        visibility: visible !important;
    }

    .gs-u-display-table-row#{$breakpoint-suffix} {
        display: table-row !important;
        visibility: visible !important;
    }

    .gs-u-display-flex#{$breakpoint-suffix} {
        display: -moz-box !important;
        display: -ms-flexbox !important;
        display: -webkit-flex !important;
        display: flex !important;
        visibility: visible !important;
    }
}

// Output the unsuffixed version
@include display-switch();

@if $enhanced {
    @each $breakpoint in $gs-display-switch-breakpoint-names {
        @include mq($from: '#{$gel-grid-breakpoint-namespace}#{$breakpoint}') {
            @include display-switch($breakpoint);
        }
    }

    .#{$gel-grid-1280-toggle-class} {
        @each $breakpoint in $gs-display-switch-breakpoint-names--1280 {
            @include mq($from: '#{$gel-grid-breakpoint-namespace}#{$breakpoint}') {
                @include display-switch($breakpoint);
            }
        }
    }
}