// -----------------------------------------------------------------------------
// This file contains CSS helper classes.
// -----------------------------------------------------------------------------

.u-color-black {
    color: #000 !important;
}

.u-color-white {
    color: #fff !important;
}

.u-color-primary {
    color: $color-primary !important;
}

.u-color-grey {
    color: $color-grey !important;
}
.u-color-error {
    color: $color-error !important;
}
.u-color-success {
    color: $color-success !important;
}

.u-color-grey-dark {
    color: $color-grey-dark !important;
}

.u-color-grey-light {
    color: $color-grey-light !important;
}

.u-bg-black {
    background-color: #000 !important;
}

.u-bg-white {
    background-color: #fff !important;
}

.u-bg-primary {
    background-color: $color-primary !important;
}

.u-bg-grey {
    background-color: $color-grey !important;
}

.u-bg-grey-dark {
    background-color: $color-grey-dark !important;
}

.u-bg-grey-light {
    background-color: $color-grey-light !important;
}

/**
 * Remove padding
 */

.u-no-padding {
    padding: 0 !important;
}

/**
 * Cursors
 */

.u-pointer {
    cursor: pointer;
}

/**
 * Position
 */
.u-relative {
    position: relative;
}
.u-absolute {
    position: absolute;
}
.u-affix {
    position: fixed;
}
/**
 * Clear inner floats
 */
.u-clearfix::after {
    clear: both;
    content: '';
    display: table;
}

/**
 * Hide text while making it readable for screen readers
 * 1. Needed in WebKit-based browsers because of an implementation bug;
 *    See: https://code.google.com/p/chromium/issues/detail?id=457146
 */
.u-hide-text {
    overflow: hidden;
    padding: 0;
    text-indent: 101%;
    white-space: nowrap;
}

/**
 * Hide element while making it readable for screen readers
 * Shamelessly borrowed from HTML5Boilerplate:
 * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
 */
.u-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}


/**
 * Hide from both screenreaders and browsers
 */
.u-hidden {
    display: none;
    visibility: hidden;
}


/**
 * Center a block in the screen
 */
.u-center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.u-pull-right {
    float: right !important;
}

.u-pull-left {
    float: left !important;
}

.u-text-center {
    text-align: center !important;
}

.u-text-right {
    text-align: right !important;
}

.u-text-left {
    text-align: left !important;
}

.u-text-light {
    font-weight: 300 !important;
}

.u-text-regular {
    font-weight: 400 !important;
}

.u-text-medium {
    font-weight: 500 !important;
}

.u-text-semibold {
    font-weight: 600 !important;
}

.u-text-bold, strong {
    font-weight: 700 !important;
}

.u-text-upper {
    text-transform: uppercase;
}

.u-show {
    display: block !important;
}

.u-invisible {
    visibility: hidden;
}

.u-text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

@at-root {
    @-ms-viewport {
        width: device-width;
    }
}

// Visibility utilities
// Note: Deprecated .u-visible-xs, .u-visible-sm, .u-visible-md, and .u-visible-lg as of v3.2.0

@include responsive-invisibility('.u-visible-xxs');
@include responsive-invisibility('.u-visible-xs');
@include responsive-invisibility('.u-visible-sm');
@include responsive-invisibility('.u-visible-md');
@include responsive-invisibility('.u-visible-lg');

.u-visible-xxs-block,
.u-visible-xxs-inline,
.u-visible-xxs-inline-block,,
.u-visible-xs-block,
.u-visible-xs-inline,
.u-visible-xs-inline-block,
.u-visible-sm-block,
.u-visible-sm-inline,
.u-visible-sm-inline-block,
.u-visible-md-block,
.u-visible-md-inline,
.u-visible-md-inline-block,
.u-visible-lg-block,
.u-visible-lg-inline,
.u-visible-lg-inline-block {
    display: none !important;
}

@media (max-width: $screen-xxs-max) {
    @include responsive-visibility('.u-visible-xxs');
}

.u-visible-xxs-block {
    @media (max-width: $screen-xxs-max) {
        display: block !important;
    }
}

.u-visible-xxs-inline {
    @media (max-width: $screen-xxs-max) {
        display: inline !important;
    }
}

.u-visible-xxs-inline-block {
    @media (max-width: $screen-xxs-max) {
        display: inline-block !important;
    }
}

@media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) {
    @include responsive-visibility('.u-visible-xs');
}

.u-visible-xs-block {
    @media (max-width: $screen-xs-max) {
        display: block !important;
    }
}

.u-visible-xs-inline {
    @media (max-width: $screen-xs-max) {
        display: inline !important;
    }
}

.u-visible-xs-inline-block {
    @media (max-width: $screen-xs-max) {
        display: inline-block !important;
    }
}

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    @include responsive-visibility('.u-visible-sm');
}

.u-visible-sm-block {
    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
        display: block !important;
    }
}

.u-visible-sm-inline {
    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
        display: inline !important;
    }
}

.u-visible-sm-inline-block {
    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
        display: inline-block !important;
    }
}

@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
    @include responsive-visibility('.u-visible-md');
}

.u-visible-md-block {
    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
        display: block !important;
    }
}

.u-visible-md-inline {
    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
        display: inline !important;
    }
}

.u-visible-md-inline-block {
    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
        display: inline-block !important;
    }
}

@media (min-width: $screen-lg-min) {
    @include responsive-visibility('.u-visible-lg');
}

.u-visible-lg-block {
    @media (min-width: $screen-lg-min) {
        display: block !important;
    }
}

.u-visible-lg-inline {
    @media (min-width: $screen-lg-min) {
        display: inline !important;
    }
}

.u-visible-lg-inline-block {
    @media (min-width: $screen-lg-min) {
    display: inline-block !important;
    }
}

@media (max-width: $screen-xxs-max) {
    @include responsive-invisibility('.u-hidden-xxs');
}

@media (min-width: $screen-xs-min) and (max-width: $screen-xs-max ) {
    @include responsive-invisibility('.u-hidden-xs');
}

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    @include responsive-invisibility('.u-hidden-sm');
}

@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
    @include responsive-invisibility('.u-hidden-md');
}

@media (min-width: $screen-lg-min) {
    @include responsive-invisibility('.u-hidden-lg');
}


/**
 * Hide SVG sprites
 */
.svg-sprite {
    position: absolute;
    display: none;
    width: 0;
    height: 0;
    visibility: hidden;
}

.u-loading {
    display: inline-block;
}

.u-animation-spin {
    animation: spin-circle 0.65s infinite linear;
}

.backdrop {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: -1;
    background: transparent;
}

/**
 * Padding and margin
 */
@for $i from 0 through 50 {
    @if ($i % 2 == 0 or $i == 1) {
        .u-pt#{$i} { padding-top: #{$i}px !important; }
        .u-pl#{$i} { padding-left: #{$i}px !important; }
        .u-pb#{$i} { padding-bottom: #{$i}px !important; }
        .u-pr#{$i} { padding-right: #{$i}px !important; }

        .u-mt#{$i} { margin-top: #{$i}px !important; }
        .u-ml#{$i} { margin-left: #{$i}px !important; }
        .u-mb#{$i} { margin-bottom: #{$i}px !important; }
        .u-mr#{$i} { margin-right: #{$i}px !important; }
    }
    @else if ($i % 5 == 0) {
        .u-pt#{$i} { padding-top: #{$i}px !important; }
        .u-pl#{$i} { padding-left: #{$i}px !important; }
        .u-pb#{$i} { padding-bottom: #{$i}px !important; }
        .u-pr#{$i} { padding-right: #{$i}px !important; }

        .u-mt#{$i} { margin-top: #{$i}px !important; }
        .u-ml#{$i} { margin-left: #{$i}px !important; }
        .u-mb#{$i} { margin-bottom: #{$i}px !important; }
        .u-mr#{$i} { margin-right: #{$i}px !important; }
    }
}

.u-pt { padding-top: $basic-padding !important; }
.u-pl { padding-left: $basic-padding !important; }
.u-pb { padding-bottom: $basic-padding !important; }
.u-pr { padding-right: $basic-padding !important; }

.u-mt { margin-top: $basic-padding !important; }
.u-ml { margin-left: $basic-padding !important; }
.u-mb { margin-bottom: $basic-padding !important; }
.u-mr { margin-right: $basic-padding !important; }

/**
 * Borders
 */

.u-b0 {border: 0 !important;}
.u-bb0 {border-bottom: 0 !important;}
.u-bt0 {border-top: 0 !important;}
.u-bl0 {border-left: 0 !important;}
.u-br0 {border-right: 0 !important;}


.u-text-lowercase {
    text-transform: lowercase;
}

.u-overflow-hidden {
    overflow: hidden;
}

.u-text-underline {
    text-decoration: underline;
}
/**
 * Float
 */

.u-fl {
    float: left;
}
.u-fr {
    float: right;
}

/**
 * Flex
 */


.u-flex {
    display: flex;
}
.u-flex1 {
    flex: 1;
}
.u-flex2 {
    flex: 2;
}
.u-flex3 {
    flex: 3;
}
.u-flex-a-end {
    align-items: flex-end;
}
.u-flex-a-start {
    align-items: flex-start;
}
.u-flex-a-center {
    align-items: center;
}
.u-flex-j-end {
    justify-content: flex-end;
}
.u-flex-j-start {
    justify-content: flex-start;
}
.u-flex-j-center {
    justify-content: center;
}