/*
* Copy this file into your theme to customize the module.
* https://www.phpboost.com/wiki/structure-d-un-theme#paragraph-le-repertoire-modules
*/

/* --- Content --- */
.sandbox-block {
	padding: 0 0 2.618em;
	border-bottom: 1px solid var(--bdr-main);
	margin-bottom: 1.618em;
}

.layout-content-demo {
	border: 1px dashed rgba(var(--darken), 0.4);
	margin-bottom: 1.618em;
}

.cell-grid-demo {
	height: 80px;
	background-color: rgba(var(--main-rgb-l), 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
}

/* --- Source code ---------------------------------------------------------- */
.copy-code {
	position: absolute;
	top: -0.618em;
	right: 0;
}

.formatter-content.formatter-code { margin-bottom: 1.618em; }

.limited-height {
	max-height: 500px;
	overflow-y: auto;
	padding: 1.618em 0;
	margin: 1.618em 0;
    justify-content: space-around;
}
.limited-height .cell {
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}

/* --- lang --- */
#module-sandbox-lang li { padding: 0; }
#module-sandbox-lang .lang-file-name,
#module-sandbox-lang .module-name { padding: 0.618em; }
#module-sandbox-lang .module-file-name { padding: 0.309em 1.618em; }
#module-sandbox-lang .lang-file {
	display: flex;
	flex-direction: column;
}
#module-sandbox-lang .lang-file span { padding: 0.309em 0.618em; }

@media (min-width: 769px) {
	#module-sandbox-lang .lang-file { flex-direction: row; }
	#module-sandbox-lang .lang-file span:first-child { width: calc(100% / 3); }
	#module-sandbox-lang .lang-file span:last-child { width: calc(100% / 3 * 2); }
}

/* icons */
.sandbox-svg-icon img,
.button.image img {
	max-width: 16px;
	vertical-align: sub;
}