/**
 * Name: Box
 * Description: Defines baseline box style
 *
 * Block: .box
 *
 * Elements: .box__title
 *           .box__content
 *           .box__toggle
 *
 * Modifiers: .box--closed
 *            .box--draggable
 *
========================================================================== */
.box {
	display: block;
	width: 100%;
	margin: 1em 0 0 0;
	border: 1px solid #e0e0e0;
	border-bottom-width: 4px;
}

/**
 * Elements
========================================================================== */

.box__title {
	margin: 0;
	padding: .25em 1em;
	color: #333;
	background: #e0e0e0;
	overflow: auto;
}
.box__title > div {
	display: flex;
}
.box__content {
	margin: 0;
	padding: 1em;
	overflow-x: auto;
}
.box .show, /*TODO replace legacy show/hide with __toggle*/
.box .hide,
.box__toggle {
	margin-left: auto;
}

/**
 * Modifiers
========================================================================== */

.box--draggable {
	cursor: move;
}
.box--closed .box__content {
	display: none;
}

/**
 * Print style
========================================================================== */

@media Print {
	.box {
		border: 0;
	}
	.box__title,
	.box__content {
		padding-left: 0;
		padding-right: 0;
	}
	.box__toggle {
		display: none;
	}
}