// Clearing and floating
// ------------------------------------------------------------------------------

.clear {
	clear: both;
	&::before,
	&::after {
		clear: both;
	}
}

.float_left {
	float: left;
	margin-right: $space_3;
}

.overflow {
	overflow: auto;
}



// General positioning attributes
// ------------------------------------------------------------------------------

.center_50 {
	margin-right: 25%;
	margin-left: 25%;
}
.center_25 {
	margin-right: 37.5%;
	margin-left: 37.5%;
}

.width_full {
	width: 100%;
	margin-right: 0;
	margin-left: 0;
}

%size_content {
	box-sizing: content-box;
}

%size_content_solo {
	@extend %size_content;

	*,
	::before,
	::after {
		box-sizing: $box_sizing;
	}
}



// Structure attributes
// ------------------------------------------------------------------------------

%full_viewport {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}

// Fixed elements
.relative {
	position: relative;
}
.div_fix {
	position: fixed;
}
.bottom {
	bottom: 0;
}

// Absolute elements
.viewport-full-body {
	@extend %full_viewport;
	background-color: transparentize($alpha_color, .5);
}

.hover_background_change {
	background-color: darken($basic_background_color, 20%);
	transition: background-color .2s ease-in-out;
	&:hover {
		background-color: $basic_background_color;
	}
}


// Space and placeholders
.space_box {
	float: left;
	display: table;
	width: $space_4;
	text-align: center;
	vertical-align: middle;
	span {
		display: table-cell;
	}
}

.div_placeholder {
	width: 100%;
	height: $space_4;
	border: $border_width_4 solid rgba($black,.1);
	border-radius: $basic_corner;
	padding: $basic_space;
	background-color: rgba($black,.1);
	svg {
		vertical-align: top;
	}
}
.div_placeholder_bkg {
	width: 100%;
	height: $space_4;
	border: $border_width_4 solid rgba($black,.1);
	border-radius: $basic_corner;
	padding: $basic_space;
	/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
	background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='2%' y1='2%' x2='98%' y2='98%' stroke='#000' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/></svg>") no-repeat;
	background-color: rgba($black,.1);
}

.div_info {
	padding: $space_2 $basic_indent;
	border-right: $basic_space solid rgba($echo_color, .6);
	background-color: rgba($echo_color, .1) !important;
}