/**
 * Toggle content
 *
 * Description: Styles to visually represent aria collapse/expand states.
 * -----------------------------------------------------------------------------
 */

/**
 * Table of Contents:
 *
 * 1.0 - Toggle
 * -----------------------------------------------------------------------------
 */


/**
 * 1.0 - Toggle
 * -----------------------------------------------------------------------------
 */

.expandable {
	position: absolute;
	height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	visibility: hidden;
	overflow: hidden;
	opacity: 0;
	transition: visibility 0s, opacity 0.5s linear;

	&:focus {
		outline: none;
	}
}
.expandable[aria-hidden="false"] {
	position: relative;
	height: auto;
	visibility: visible;
	opacity: 1;
}

html.no-js {
	.expandable:target {
		position: relative;
		height: auto;
		visibility: visible;
		opacity: 1;
	}
}