/*  ========================================================================== */
/*  @group State (& Helpers) */
/*  ========================================================================== */

    /*
    * Image replacement
    */
    .ir {
        background-color: transparent;
        border: 0;
        overflow: hidden;
        // IE 6/7 fallback
        *text-indent: -9999px;
        &:before {
            content: "";
            display: block;
            width: 0;
            height: 150%;
        }
    }

    /*
    * Hide from both screenreaders and browsers: h5bp.com/u
    */
    .hidden,
    .is-hidden {
        display: none !important;
        visibility: hidden;
    }

    /*
    * Hide only visually, but have it available for screenreaders: h5bp.com/v
    *
    * .focassable Extends the .visuallyhidden class to allow the element to be focusable
    * when navigated to via the keyboard: h5bp.com/p
    */
    .visuallyhidden,
    .is-visuallyhidden {

        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;

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

    }

    /*
    * Hide visually and from screenreaders, but maintain layout
    */
    .invisible,
    .is-invisible {
        visibility: hidden;
    }

    /*
    * Clearfix: contain floats
    */
    .group,
    .l-constrained,
    .cf, .clearfix {
        &:before, &:after {
            content: " ";
            display: table;
        }
        &:after {
            clear: both;
        }
        *zoom: 1;
    }

    .clear { clear: both; }
