// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

/// Hide an element by default, only displaying it above a certain screen size.
/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
/// @group visibility
@mixin show-for($size) {
    $size: map-get($breakpoints, $size);

    @include breakpoint($size down) {
        display: none !important;
    }
}

/// Hide an element by default, only displaying it within a certain breakpoint.
///
/// Removed unnecessary `media query` if value is 0.
/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
/// @group visibility
@mixin show-for-only($size) {
    $lower-bound-size: map-get($breakpoints, $size);
    $upper-bound-size: -zf-map-next($breakpoints, $size);

    @if $upper-bound-size == null {
        @media only screen and (max-width: $lower-bound-size) {
            display: none !important;
        }
	} @else {
        @if strip-unit($lower-bound-size) == 0 {
            @media only screen and (min-width: $upper-bound-size + 1) {
                display: none !important;
            }
		} @else {
            @media only screen and (max-width: $lower-bound-size), only screen and (min-width: $upper-bound-size + 1) {
                display: none !important;
			}
		}
	}
}

/// Show an element by default, and hide it above a certain screen size.
/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
/// @group visibility
@mixin hide-for($size) {
    @include breakpoint($size) {
        display: none !important;
    }
}

/// Show an element by default, and hide it above a certain screen size.
/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
/// @group visibility
@mixin hide-for-only($size) {
    @include breakpoint($size only) {
        display: none !important;
    }
}

/// Foundation visibilty clasess.
/// @link https://foundation.zurb.com/sites/docs/visibility.html
/// @group _global renderkit
@mixin foundation-visibility-classes {
    @each $size in $breakpoint-classes {
        @if $size != $-zf-zero-breakpoint {
            .hide-for-#{$size} {
                @include hide-for($size);
            }

            .show-for-#{$size} {
                @include show-for($size);
            }
        }

        .hide-for-#{$size}-only {
            @include hide-for-only($size);
        }

        .show-for-#{$size}-only {
            @include show-for-only($size);
        }
    }

    .show-for-sr,
    .show-on-focus {
        @extend .visuallyhidden;
    }

    .show-on-focus {
        &:active,
        &:focus {
            @extend .visuallyhidden-off;
		}
	}

    .show-for-landscape,
    .hide-for-portrait {
        display: block !important;

        @include breakpoint(landscape) {
            display: block !important;
        }

        @include breakpoint(portrait) {
            display: none !important;
        }
    }

    .hide-for-landscape,
    .show-for-portrait {
        display: none;

        @include breakpoint(landscape) {
            display: none !important;
        }

        @include breakpoint(portrait) {
            display: block !important;
        }
    }
}