/*------------------------------------*\
    # VISIBILITY
\*------------------------------------*/

/**
 * Hide visually and from screen readers: http://bit.ly/1sfdZho
 */
.gs-u-hidden {
    display: none !important;
    visibility: hidden;
}


/**
 * Make a class and placeholder of the visually hidden helper available at all breakpoints
 */
@mixin visibility-hidden($suffix: null) {
    $breakpoint-suffix: '';

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

    .gs-u-vh#{$breakpoint-suffix} {
        @include vh;
    }
}

// Output the unsuffixed version
@include visibility-hidden();

// Output the suffixed version
$gs-visibility-hidden-breakpoint-names: $gel-grid-breakpoints !default;
$gs-visibility-hidden-breakpoint-names--1280: $gel-grid-breakpoints--1280 !default;

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

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


/**
 * Extends the .gs-u-vh class to allow the element
 * to be focusable when navigated to via the keyboard:
 * http://bit.ly/1sfefwH
 */
.gs-u-vh--focusable:active,
.gs-u-vh--focusable:focus {
    @include vh;

    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;

    clip: auto;
}


/**
 * Hide visually and from screen readers, but maintain layout
 */
.gs-u-invisible {
    visibility: hidden;
}