/* Accessible hidden content.
   ========================================================================== */

%u-h,
.u-h {
    @include u-h;
}

// Hide until

.hide-until-mobile {
    @include mq($until: mobile) {
        display: none !important;
    }
}

.hide-until-mobile-landscape {
    @include mq($until: mobileLandscape) {
        display: none !important;
    }
}

.hide-until-tablet {
    @include mq($until: tablet) {
        display: none !important;
    }
}

.hide-until-phablet {
    @include mq($until: phablet) {
        display: none !important;
    }
}

.hide-until-leftcol {
    @include mq($until: leftCol) {
        display: none !important;
    }
}

.hide-until-wide {
    @include mq($until: wide) {
        display: none !important;
    }
}

.hide-until-desktop {
    @include mq($until: desktop) {
        display: none !important;
    }
}

// Hide from

.hide-from-mobile-landscape {
    @include mq(mobileLandscape) {
        display: none !important;
    }
}

.hide-from-tablet {
    @include mq(tablet) {
        display: none !important;
    }
}

.hide-from-desktop {
    @include mq(desktop) {
        display: none !important;
    }
}

.hide-from-leftcol {
    @include mq(leftCol) {
        display: none !important;
    }
}

.hide-from-wide {
    @include mq(wide) {
        display: none !important;
    }
}

// Other

.is-hidden,
[hidden] {
    display: none !important;
}

.mobile-only {
    @include mq(tablet) {
        display: none !important;
    }
}

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

    @include mq(tablet) {
        display: block !important;
    }
}

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

    @include mq(tablet) {
        display: inline !important;
    }
}

.hide-on-tablet {
    @include mq(mobile, desktop) {
        display: none !important;
    }
}

.u-cf {
    @include clearfix;
}

.u-baseline-top {
    margin-top: $gs-baseline;
}

// To show skip links when user tabs over
.skip:focus,
.skip:active {
    font-size: 80%;
    display: block;
    color: $brand-dark;
    text-decoration: none;

    position: static !important;
    width: 100% !important;
    height: $gs-row-height / 2 !important;
    text-align: center;
}


/**
 * Responsive media (images, videos…)
 *
 * 1. Give the block an initial ratio of 5/3 to avoid FOUC
 * 2. Stretch the contained media to the dimensions of its container
 */

.u-responsive-ratio {
    @include fix-aspect-ratio(5, 3); // 1

    img,
    object,
    embed,
    iframe,
    svg,
    video { // 2
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
}

.u-responsive-aligner {
    // to be overidden by inline max-width style for center-aligning
    margin: 0 auto;
    width: 100%;
}

.u-responsive-ratio--hd {
    padding-bottom: aspect-ratio-height(16, 9);
}

.u-responsive-ratio--vertical {
    @include mq($from: phablet) {
        padding-bottom: aspect-ratio-height(9, 16);
    }
    @include mq($until: phablet) {
        padding-bottom: aspect-ratio-height(9, 16, 85%);
    }
}

.u-responsive-ratio--letterbox {
    padding-bottom: aspect-ratio-height(5, 2);
}


/**
 * Text hyphenation
 *
 * Break strings when their length exceeds the width of their container
 * and hyphenate words at the end of lines using the `hyphens` property.
 * Browser support for hyphenation: http://caniuse.com/#search=hyphenation
 */

.u-text-hyphenate {
    word-wrap: break-word;
    hyphens: auto;
}

.u-test-ellipsis {
    @include ellipsis();
}


/**
 * Reset button styles
 */

.u-button-reset {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    background: transparent;

    &:focus {
        outline: 0;
    }
}


/**
 * Fakes text underline with a border
 */

.u-underline,
%u-underline {
    text-decoration: none !important;
    border-bottom: 1px solid $brightness-86;
    transition: border-color .15s ease-out;

    &:hover,
    &:focus {
        border-color: mix($sport-dark, $brightness-86, 50%);
    }
    &:active {
        border-color: $sport-bright;
    }
}


/**
 * Prevent line breaks
 */

.u-nobr {
    white-space: nowrap;
}

/**
 * Add/Remove padding
 *
 * Modification of Harry Roberts's
 * https://github.com/csswizardry/inuit.css/blob/master/generic/_helper.scss
 */

.flushp {
    padding: 0!important;
}

.flushp--top {
    padding-top: 0!important;
}

.meta-button { // unstyles button elements (so they can be used for semantics)
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
}

.u-font-weight-normal {
    font-weight: normal;
}

.u-vertical-align-middle-icon {
    svg {
        vertical-align: middle;
    }
}
