/**
 * Layout Utility classes
 *
 * Description: Classes to reset/change margin/paddings.
 * Version: 1.0.3
 * -----------------------------------------------------------------------------
 */

/**
 * Table of Contents: 
 *
 * 1.0 - Margin
 * 2.0 - Padding
 * 3.0 - Responsive
 * 4.0 - Layout seperators
 * -----------------------------------------------------------------------------
 */



/**
 * 1.0 - Margin
 * -----------------------------------------------------------------------------
 */

/*.margin-all-0 { margin: 0 !important; }
.margin-top-0 { margin-top: 0 !important; }
.margin-right-0 { margin-right: 0 !important; }
.margin-bottom-0 { margin-bottom: 0 !important; }
.margin-left-0 { margin-left: 0 !important; }
.margin-horizontal-0 { margin-right: 0 !important; margin-left: 0 !important; }
.margin-vertical-0 { margin-top: 0 !important; margin-bottom: 0 !important; }*/

.margin-top-0 { margin-top: 0; }
.margin-top-standard { margin-top: $margin-standard; }
.margin-top-double { margin-top: $margin-standard * 2; }
.margin-bottom-0 { margin-bottom: 0; }
.margin-top-half { margin-top: $margin-standard / 2; }
.margin-bottom-standard { margin-bottom: $margin-standard; }
.margin-bottom-1-and-half { margin-bottom: $margin-standard * 1.5; }
.margin-bottom-half { margin-bottom: $margin-standard / 2; }
.margin-bottom-double { margin-bottom: $margin-standard * 2; }
.margin-all-double { margin: $margin-standard * 2; }
.margin-vertical-0 { margin-top: 0; margin-bottom: 0; }
.margin-top-2-third { margin-top: $margin-standard * 0.66; }
.margin-top-3-quarter { margin-top: $margin-standard * 0.75; }
.margin-vertical-half { margin-top: $margin-standard / 2; margin-bottom: $margin-standard / 2; }
.margin-left-standard { margin-left: $margin-standard; }
.margin-left-half { margin-left: $margin-standard / 2; }

.margin-top-reset-double { margin-top: -$margin-standard * 2; }



/**
 * 2.0 - Padding
 * -----------------------------------------------------------------------------
 */

/*.padding-all-0 { padding: 0 !important; }
.padding-top-0 { padding-top: 0 !important; }
.padding-right-0 { padding-right: 0 !important; }
.padding-bottom-0 { padding-bottom: 0 !important; }
.padding-left-0 { padding-left: 0 !important; }
.padding-horizontal-0 { padding-left: 0 !important; padding-right: 0 !important; }*/
.padding-vertical-0 { padding-top: 0; padding-bottom: 0; }
.padding-all-double { padding: $margin-standard * 2; }
.padding-right-standard { padding-right: $margin-standard; }
.padding-right-half { padding-right: $margin-standard / 2; }
.padding-right-half { padding-right: $margin-standard / 2; }
.padding-left-standard { padding-left: $margin-standard; }
.padding-left-1of4 { padding-left: 25%; }
.padding-left-quarter { padding-left: $margin-standard / 4; }
.padding-right-quarter { padding-right: $margin-standard / 4; }
.padding-left-half { padding-left: $margin-standard / 2; }
.padding-top-0 { padding-top: 0 !important; }
.padding-top-standard { padding-top: $margin-standard; }
.padding-top-2-third { padding-top: em(40px); }
.padding-top-half { padding-top: $margin-standard / 2; }
.padding-bottom-0 { padding-bottom: 0; }
.padding-bottom-half { padding-bottom: $margin-standard / 2; }
.padding-bottom-2-third { padding-top: em(40px); }
.padding-top-3-quarter { padding-top: $margin-standard * 0.75; }



/**
 * 3.0 - Responsive
 * -----------------------------------------------------------------------------
 */

// Grid for medium devices
@media (max-width: $device-medium-max) {
	.padding-all-double { padding: $margin-standard; }
	.margin-all-double { margin: $margin-standard; }
	.margin-top-double { margin-top: $margin-standard; }
	.margin-bottom-double { margin-bottom: $margin-standard; }
}

// Grid for small devices
@media (max-width: $device-small-max) {
	.padding-all-double { padding: $margin-standard / 2; }
	.margin-all-double { margin: $margin-standard / 2; }
	.margin-top-double { margin-top: $margin-standard / 2; }
	.margin-bottom-double { margin-bottom: $margin-standard; }
	.margin-top-3-quarter { margin-top: $margin-standard / 2; }
	.margin-top-standard { margin-top: $margin-standard / 2; }
	.margin-left-standard { margin-left: $margin-standard / 2; }
	.margin-top-reset-double { margin-top: -$margin-standard / 2; }

	.padding-right-standard { padding-right: $margin-standard / 2; }
	.padding-left-standard { padding-left: $margin-standard / 2; }
	.padding-top-standard { padding-top: $margin-standard / 2; }
	.padding-top-3-quarter { padding-top: $margin-standard / 2; }

	.padding-left-quarter { padding-left: 0; }
	.padding-right-quarter { padding-right: 0; }
}



/**
 * 4.0 - Layout seperators
 * -----------------------------------------------------------------------------
 */

.seperator {
	position: relative;

	&:before {
		border-left: 1px solid $grey-light;
		content: " ";
		position: absolute;
		left: 50%;
		top: $margin-standard * 2;
		bottom: $margin-standard * 2;
	}

	@media (max-width: $device-small-max) {
		&:before {
			display: none;
		}

		.layout-size1of2:first-child {
			margin-bottom: 0;
			border-bottom: em(30px) solid $grey-lighter;
			padding-bottom: $margin-standard / 2;
		}
	}
}

.has-border {
	border-bottom: 1px solid $grey-light;
	padding-bottom: $margin-standard;
}

@media (max-width: $device-small-max) {
	.mobile-seperator {
		margin-bottom: 0;
		border-top: em(30px) solid $grey-lighter;
		padding-top: $margin-standard / 2;

		&.layout-flipped {
			border-top: 0;
			padding-top: $margin-standard / 2;
			border-bottom: em(4px) solid $grey-lighter;
			padding-bottom: $margin-standard / 4;
		}
	}

	.mobile-seperator-all {
		border-top: em(30px) solid $grey-lighter;
		padding-top: $margin-standard / 2;
		border-bottom: em(30px) solid $grey-lighter;
		padding-bottom: $margin-standard / 2;
		margin-left: -$margin-standard / 2;
		margin-right: -$margin-standard / 2;
		padding-left: $margin-standard / 2;
		padding-right: $margin-standard / 2;
	}
}