// Position utilities
// -------------------------------------------------------------------
.relative              { position: relative; }
.absolute              { position: absolute; }
.fixed                 { position: fixed; }

.top--0                { top: 0; }
.right--0              { right: 0; }
.bottom--0             { bottom: 0; }
.left--0               { left: 0; }

.z1                    { z-index: 1; }
.z2                    { z-index: 2; }
.z3                    { z-index: 3; }
.z4                    { z-index: 4; }
.z5                    { z-index: 5; }

.vertical--top         { vertical-align: top; }
.vertical--middle      { vertical-align: middle; }
.vertical--bottom      { vertical-align: bottom; }


// Display utilities
// -------------------------------------------------------------------
.block                 { display: block; }
.inline-block          { display: inline-block; }
.inline                { display: inline; }

.flex                  { display: flex; }

// Overflow
.overflow--scroll      { overflow: scroll; }
.overflow--hidden      { overflow: hidden; }
.overflow--visible     { overflow: visible; }
.overflow--auto        { overflow: auto; }

// Some mobile utilities
// `show-on-mobile` displays the element only on mobile devices
// `mobile-block` makes the element go display block on mobile devices
.show-on-mobile { display: none !important; }
@media screen and (max-width: $breakpoint--sm) {
    .show-on-mobile,
    .block-on-mobile {
        display: block !important;
    }

    .hide-on-mobile {
        display: none !important;
    }
}


// Layout utilities
// -------------------------------------------------------------------
.float--left           { float: left; }
.float--right          { float: right; }
.float--none           { float: none; }

.full-width            { width: 100%; }
.half-width            { width: 50%; }
.full-height           { height: 100%; }
.fit                   { max-width: 100%; }

.clearfix {
    *zoom:1;

    &:before,
    &:after {
        content: "";
        display: table;
    }

    &:after {
        clear: both;
    }
}
