/* https://responsivedesign.is/develop/getting-started-with-sass-and-breakpoint-mixin/ */

// NOTE: breakpoints set to be consistent with flexboxgrid
@mixin breakpoint($point) {
    @if $point==lg {
        @media (min-width: minWidthVisibility(lg)) {  
            @content ;
        }
    }
    @else if $point==md {
        @media (min-width: minWidthVisibility(md)) {
            @content ;
        }
    }
    @else if $point==sm {
        @media (min-width: minWidthVisibility(sm)) {
            @content ;
        }
    }
    @else if $point==xs {
        @content ;
    }
}

// Responsiveness
//
// <code class="block">@mixin container($size:optional)</code>
// Wrap content into containers to make it responsive
// Default containers max-width: 1200px
//
// <ul>
// <li>.container--small: max-width: 800px </li>
// <li>.container--medium: max-width: 1000px </li>
// </ul>
//
// Markup:
// <div class="container bg-white">
//  <h2>Nice container u got there</h2>
// </div>
// <div class="container container--small bg-white">
//  <h2>Nice small container u got there</h2>
// </div>
//
//
// Styleguide Responsiveness
@mixin container($size: null) {
    max-width: 100%;
    
    @include breakpoint(xs) { // < 768px
        width: 100%;
    }
    @include breakpoint(sm) { // 1024px >= 768px 
        width: 750px;
    }
    @include breakpoint(md) { // 1200px >= 1024px
        width: 1000px;
    }
    @include breakpoint(lg) { // >= 1200px
        width: 1200px;
    }

    @if $size {
        @include containerSize($size);
    }
}
.container {
    @include container();
}

@mixin containerSize($size){
    @if $size == 'small' {
        @include breakpoint(md) { // 1200px >= 1024px
            width: 750px;
        }
        @include breakpoint(lg) { // >= 1200px
            width: 750px;
        }
    }
    @if $size == 'medium' {
        @include breakpoint(lg) { // >= 1200px
            width: 1000px;
        }
    }
}
.container--small {
    @include containerSize('small');
}
.container--medium {
    @include containerSize('medium');
}
.container--large { 
    // @include containerSize('large');
}

// Visibility
//
// <code class="block">@mixin show($size) -- and below</code>
// <code class="block">@mixin hide($size) -- and below</code>
// <code class="block">@mixin hideOnly($size)</code>
// <code class="block">@mixin showOnly($size)</code>
// <p>&lt;show/hide&gt;-&lt;x&gt;(-and_below)</p>
// <span class="note">Made with flexboxgrid compatibility</span>
// <table class="table table--bordered">
//  <tr><th></th>               <th>&lt; 768px</th>         <th>&lt; 1024px</th>        <th>&lt; 1200px</th>        <th>&gt; 1200px</th></tr>
//  <tr><th>.hide-xs<br/>
//          .hide-xs-only</th>  <td></td>                   <td class="bg-green"></td>  <td class="bg-green"></td>  <td class="bg-green"></td></tr>
//  <tr><th>.hide-sm</th>       <td></td>                   <td></td>                   <td class="bg-green"></td>  <td class="bg-green"></td></tr>
//  <tr><th>.hide-md</th>       <td></td>                   <td></td>                   <td></td>                   <td class="bg-green"></td></tr>
//
//  <tr><th>.hide-sm-only</th>  <td class="bg-green"></td>  <td></td>                   <td class="bg-green"></td>  <td class="bg-green"></td></tr>
//  <tr><th>.hide-md-only</th>  <td class="bg-green"></td>  <td class="bg-green"></td>  <td></td>                   <td class="bg-green"></td></tr>
//  <tr><th>.hide-lg-only</th>  <td class="bg-green"></td>  <td class="bg-green"></td>  <td class="bg-green"></td>  <td></td></tr>
//
//  <tr><th>.show-xs</th>       <td class="bg-green"></td>  <td></td>                   <td></td>                   <td></td></tr>
//  <tr><th>.show-sm</th>       <td class="bg-green"></td>  <td class="bg-green"></td>  <td></td>                   <td></td></tr>
//  <tr><th>.show-md</th>       <td class="bg-green"></td>  <td class="bg-green"></td>  <td class="bg-green"></td>  <td></td></tr>
//
//  <tr><th>.show-xs-only</th>  <td class="bg-green"></td>  <td></td>                   <td></td>                   <td></td></tr>
//  <tr><th>.show-sm-only</th>  <td></td>                   <td class="bg-green"></td>  <td></td>                   <td></td></tr>
//  <tr><th>.show-md-only</th>  <td></td>                   <td></td>                   <td class="bg-green"></td>  <td></td></tr>
//  <tr><th>.show-lg-only</th>  <td></td>                   <td></td>                   <td></td>                   <td class="bg-green"></td></tr>
// </table>
//
// Markup:
// <div class="bg-red show-sm">Small screens</div>
// <div class="bg-blue hide-sm">Big screens</div>
// <div class="bg-purple show-lg-only">lg only</div>
// <div class="bg-white show-sm-only">Sm only</div>
//
//
// Styleguide Responsiveness.visibilty
@mixin hideOnly($screenSize) {
    @media (min-width: minWidthVisibility($screenSize)) and (max-width: maxWidthVisibility($screenSize)){
        display: none !important;
    }
}
@mixin showOnly($screenSize) {
    @media (max-width: minWidthVisibility($screenSize) - 0.001 ){ // hide everything below current screensize
        display: none !important;
    }
    @media (min-width: maxWidthVisibility($screenSize) + 0.001 ) { // hide from next screensize onwards
        display: none !important;
    }
}
@mixin hide($screenSize) {
    @media (max-width: maxWidthVisibility($screenSize)) {
        display: none !important;
    }
}
@mixin show($screenSize) {
    @media (min-width: maxWidthVisibility($screenSize) + 0.001 ){ // hide from next screensize onwards
        display: none !important;
    }
}

@each $screenSize in ('sm', 'md', 'lg') { // cannot hide-xs and below (hide all)
    .hide-#{$screenSize} {
        @include hide($screenSize);
    }
}
@each $screenSize in ('xs', 'sm', 'md', 'lg') {
    .hide-#{$screenSize}-only {
        @include hideOnly($screenSize);
    }
}
@each $screenSize in ('xs', 'sm', 'md') { // cannot show-lg and below (show all)
    .show-#{$screenSize} {
        @include show($screenSize);
    }
}
@each $screenSize in ('xs', 'sm', 'md', 'lg') {
    .show-#{$screenSize}-only {
        @include showOnly($screenSize);
    }
}