///
// @package   Zhong (free) - accessibletemplate
// @version   3.0.0
// @author    Francesco Zaniol, accessibletemplate - http://www.accessibletemplate.com
// @copyright Copyright (C) 2011-Present Francesco Zaniol
// @license   http://ec.europa.eu/idabc/eupl.html EUPL v1.1 only
///

/*==========================================================================
   HELPER CLASSES
==========================================================================*/

// --------- Resetters --------- //

// Reset the most common CSS style properties
.style-reset, %style-reset{
    padding:0 !important;
    margin:0 !important;
    height:auto !important;
    width:auto !important;
    max-width:none !important;
    max-height:none !important;
    min-width:0 !important;
    min-height:0 !important;
    background:none !important;
    color:inherit !important;
    border:0 !important;
    outline:0 !important;
}

// Resets margin and padding
.spacing-reset, %spacing-reset{padding:0 !important;margin:0 !important;}
.margin-reset, %margin-reset{margin:0 !important;}
.padding-reset, %padding-reset{padding:0 !important;}

// Resets margin and padding from lists; for example, this class is useful for making a menu */
.list-style-reset, %list-style-reset{
    &, & li,& ul,& ol{display:block;list-style:none;padding:0;margin:0;}
}

// --------- Visual --------- //

// Hidden to "normal users", but still readable by screen readers and bots
.visually-hidden, %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;
    outline:0 !important;
    white-space:nowrap !important;

    &.focusable:active,
    &.focusable:focus{
        clip:auto !important;
        height:auto !important;
        margin:0 !important;
        overflow:visible !important;
        position:static !important;
        width:auto !important;
    }

}

// Hidden element to everyone
.removed, %removed{display:none !important;visibility:hidden !important;}

// Hidden element, but only if javascript is enabled
html.js .js-removed{display:none !important;visibility:hidden !important;}

// Hidden element, but only if javascript is disabled
html.no-js .no-js-removed{display:none !important;visibility:hidden !important;}

// Hide the text of an element
.text-hidden, %text-hidden{text-indent:100% !important;white-space:nowrap !important;overflow:hidden !important;}

// --------- Clearfix --------- //

.clearfix, %clearfix{
    &:before, &:after{ content:" "; display:table; width:100%; } // width:100% is needed if flexbox is used
    &:after{ clear:both; }
}

// --------- "Boring" classes --------- //

.display-block{display:block !important}
.display-none{display:none !important}
.display-inline{display:inline !important}
.display-inline-block{display:inline-block !important}

.clear-both{clear:both !important}
.clear-none{clear:none !important}
.clear-left{clear:left !important}
.clear-right{clear:right !important}

.float-left{float:left !important;display:block !important;}
.float-right{float:right !important;display:block !important;}

.visibility-hidden{visibility:hidden !important;}

.overflow-hidden{overflow:hidden !important;}

.no-padding{ padding:0 !important; }
.no-side-padding{ padding-left:0 !important; padding-right:0 !important; }
.no-left-padding{ padding-left:0 !important; }
.no-right-padding{ padding-right:0 !important; }
.no-top-padding{ padding-top:0 !important; }
.no-bottom-padding{ padding-bottom:0 !important; }

.no-margin{ margin:0 !important; }
.no-side-margin{ margin-left:0 !important; margin-right:0 !important; }
.no-left-margin{ margin-left:0 !important; }
.no-right-margin{ margin-right:0 !important; }
.no-top-margin{ margin-top:0 !important; }
.no-bottom-margin{ margin-bottom:0 !important; }

.full-height{ height:100% !important; }

// --------- Vertical alignment --------- //

// Note: those classes are better used on a div and its child(ren). Example:
// <div class="disaply-table">
//     <div class="display-cell-align-mid"> [...] </div>
// </div>

.display-table, %display-table{
    display:table !important;
}
.display-cell-align-mid, %display-cell-align-mid{
    display:table-cell !important;
    vertical-align:middle !important;
}

// --------- CSS3 transition classes --------- //

// General
.css3-transition, %css3-transition,
.css3-transition *, %css3-transition *
    { @include transition(all .3s ease-out); }

// All
.transition_fast-all, %transition_fast-all,
.transition_fast-all_deep, %transition_fast-all_deep,
.transition_fast-all_deep *, %transition_fast-all_deep *
    { @include transition(all .4s ease-out); }
.transition_medium-all, %transition_medium-all,
.transition_medium-all_deep, %transition_medium-all_deep,
.transition_medium-all_deep *, %transition_medium-all_deep *
    { @include transition(all .8s ease-out); }
.transition_slow-all, %transition_slow-all,
.transition_slow-all_deep, %transition_slow-all_deep,
.transition_slow-all_deep *, %transition_slow-all_deep *
    { @include transition(all 1.4s ease-out); }

// Opacity
.transition_fast-opacity, %transition_fast-opacity
    { @include transition(opacity .4s ease-out); }
.transition_medium-opacity, %transition_medium-opacity
    { @include transition(opacity .8s ease-out); }
.transition_slow-opacity, %transition_slow-opacity
    { @include transition(opacity 1.4s ease-out); }

// Bg
.transition_fast-bg, %transition_fast-bg
    { @include transition(background-color .4s ease-out); }
.transition_medium-bg, %transition_medium-bg
    { @include transition(background-color .8s ease-out); }
.transition_slow-bg, %transition_slow-bg
    { @include transition(background-color 1.4s ease-out); }

// Color
.transition_fast-color, %transition_fast-color
    { @include transition(color .4s ease-out); }
.transition_medium-color, %transition_medium-color
    { @include transition(color .8s ease-out); }
.transition_slow-color, %transition_slow-color
    { @include transition(color 1.4s ease-out); }

// Position
.transition_fast-position, %transition_fast-position
    { @include transition(top .4s ease-out,right .4s ease-out,bottom .4s ease-out,left .4s ease-out); }
.transition_medium-position, %transition_medium-position
    { @include transition(top .8s ease-out,right .8s ease-out,bottom .8s ease-out,left .8s ease-out); }
.transition_slow-position, %transition_slow-position
    { @include transition(top 1.4s ease-out,right 1.4s ease-out,bottom 1.4s ease-out,left 1.4s ease-out); }

// Dimension
.transition_fast-dimension, %transition_fast-dimension
    { @include transition(width .4s ease-out,height .4s ease-out); }
.transition_medium-dimension, %transition_medium-dimension
    { @include transition(width .8s ease-out,height .8s ease-out); }
.transition_slow-dimension, %transition_slow-dimension
    { @include transition(width 1.4s ease-out,height 1.4s ease-out); }