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

/**
 * Prevent display, both visually and from screen-readers.
 *
 * Some screen readers will still access elements that have "display: none".
 * Using "display: none" AND "visibility: hidden" avoids this problem. More
 * information at: http://juicystudio.com/article/screen-readers-display-none.php
 * Hat tip: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
 **/

$sagovau-enable-display-helpers-responsive: false !default; // Generate mobile-first helper classes

.#{$sagovau-namespace}u-hidden,
%#{$sagovau-namespace}u-hidden {
    display: none !important;
    visibility: hidden !important;
}


// Generate mobile-first helper classes to display hidden elements.

@if $sagovau-enable-display-helpers-responsive == true {

    @each $media-query in $sagovau-media-queries {

        $alias: nth($media-query, 1);

        @include media-query($alias) {

            .#{$sagovau-namespace}u-hidden-#{$alias} {
                display: none !important;
                visibility: hidden !important;
            }

            .#{$sagovau-namespace}u-display-block-#{$alias} {
                display: block !important;
                visibility: visible !important;
            }


            .#{$sagovau-namespace}u-display-inline-block-#{$alias} {
                display: inline-block !important;
                visibility: visible !important;
            }

        }

    }

}


/*
 * Hide visually, but have it available for screen readers: * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 * Hat tip: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
 */

.#{$sagovau-namespace}u-visually-hidden,
%#{$sagovau-namespace}u-visually-hidden {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
}





 /**
 * Selectively display or hide content depending on the browser's capabilities.
 * Requires Modernizr.
 *
 * Note: in order for these classes to work properly when JavaScript is
 * disabled, the html element must include the exclusion classes (eg "no-*")
 * used below. These must be removed using JavaScript prior to running Modernizr
*  (with the exception of "no-js" which Modernizr removes already).
 */

.js .#{$sagovau-namespace}u-no-js,
.js %#{$sagovau-namespace}u-no-js { // Hide anything with the no-js class when JavaScript is enabled
    @extend %#{$sagovau-namespace}u-hidden;
}

.no-js .#{$sagovau-namespace}u-js-only,
.no-js %#{$sagovau-namespace}u-js-only {  // Hide anything with the js-only class when JavaScript is disabled
    @extend %#{$sagovau-namespace}u-hidden;
}





/**
 * Hide elements from print
 */

.#{$sagovau-namespace}u-no-print,
%#{$sagovau-namespace}u-no-print {

    @media print {
        display: none !important;
    }

}


/**
 * Hide elements except in print
 */

.#{$sagovau-namespace}u-print-only,
%#{$sagovau-namespace}u-print-only {

    @media not print {
        display: none !important;
        visibility: hidden !important;
    }

}