// Visibility Utils
// ===
//
// Attribution:
//
// - https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
// - https://github.com/suitcss/utils-state/


// Hide visually and from screen readers.

.u-hidden {
    display: none !important;
    visibility: hidden;
}

// Remove from flow but leave available to screen readers.

.u-visually-hidden {
    position: absolute !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
}

// Visibility Utils
// ===
//
// Attribution:
//
// - https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
// - https://github.com/suitcss/utils-state/

// Hide visually and from screen readers. The html5 `hidden` attribute is
// preferred to the u-hidden class because it exactly matches our intent and
// has machine-readable semantics.

[hidden] {
    display: none !important;
}

// Remove from flow but leave available to screen readers.

.u-visually-hidden {
    position: absolute !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
}

Use the html hidden attribute instead of a class.
Use the html hidden attribute instead of a class.
