/* ==========================================================================
   States utilities
   ========================================================================== */

/**
 * Global states.
 * JavaScript may add/remove/toggle these classes.
 * All other states are component-scoped and use the `is-` prefix.
 */

/**
 * Completely remove from the flow and screen readers.
 */

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

/**
 * Completely remove from the flow but leave available to screen readers.
 */

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

/**
 * Control visibility without affecting flow.
 */

.u-isVisible {
    visibility: visible;
}

.u-isInvisible {
    visibility: hidden;
}

/**
 * Indicate that interaction will result in an (in)action.
 */

.u-isActionable {
    cursor: pointer;
}

.u-isDraggable {
    cursor: move;
}

.u-isDisabled {
    cursor: default;
}

/* ==========================================================================
   States utilities
   ========================================================================== */

/**
 * Global states.
 * JavaScript may add/remove/toggle these classes.
 * All other states are component-scoped and use the `is-` prefix.
 */

/**
 * Completely remove from the flow and screen readers.
 */

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

/**
 * Completely remove from the flow but leave available to screen readers.
 */

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

/**
 * Control visibility without affecting flow.
 */

.u-isVisible {
    visibility: visible !important;
}

.u-isInvisible {
    visibility: hidden !important;
}

/**
 * Indicate that interaction will result in an (in)action.
 */

.u-isActionable {
    cursor: pointer;
}

.u-isDraggable {
    cursor: move;
}

.u-isDisabled {
    cursor: default;
}

Add `!important` to visibility classes
Add `!important` to visibility classes

These need to be able to override the default visibility of any element,
so that they can be programmatically added/removed using JavaScript.
