/**
 * This is the coupled pair of mixins
 * allows to manipulate properties that affects the element visibility.
 */

/**
 * Visually hides the element. It still present in the document flow.
 *
 * @param    {?number}    $z-index [null]    The value of `z-index` property. Will be omitted if not specified.
 */
@mixin hidden-element($z-index: null) {
	z-index: $z-index;
	visibility: hidden;
	opacity: 0;
}

/**
 * Shows the hidden element.
 * Resets the `hidden-element` mixin usage.
 *
 * @param    {?number}    $z-index [null]    The value of `z-index` property. Will be omitted if not specified.
 */
@mixin hidden-element-active($z-index: null) {
	z-index: $z-index;
	visibility: visible;
	opacity: 1;
}