@import "./breakpoints";
$m: !important;

//Width
.ek-align-slim {
	max-width: 500px $m;
	margin-left: auto;
	margin-right: auto;
}

//Padding
.ek-padding--sm {
	padding: 14px $m;
}

.ek-padding--md {
	padding: 24px $m;
}

.ek-padding--lg {
	padding: 34px $m;
}

.ek-padding--xl {
	padding: 60px $m;
}

//Border Radius
.ek-rounded-none {
	border-radius: 0 $m;
}

.ek-rounded-sm {
	border-radius: 0.125rem $m;
}

.ek-rounded-md {
	border-radius: 0.25rem $m;
}

.ek-rounded-lg {
	border-radius: 0.5rem $m;
}

.ek-rounded-xl {
	border-radius: 0.9rem $m;
}

.ek-rounded-full {
	border-radius: 9999px $m;
}

.ek-rounded-sm,
.ek-rounded-md,
.ek-rounded-lg,
.ek-rounded-xl,
.ek-rounded-full {
	overflow: hidden;
}

@include break-large() {

	.lg\:ek-padding--sm {
		padding: 14px $m;
	}

	.lg\:ek-padding--md {
		padding: 24px $m;
	}

	.lg\:ek-padding--lg {
		padding: 34px $m;
	}

	.lg\:ek-padding--xl {
		padding: 60px $m;
	}
}

@include break-medium() {

	.md\:ek-padding--sm {
		padding: 14px $m;
	}

	.md\:ek-padding--md {
		padding: 24px $m;
	}

	.md\:ek-padding--lg {
		padding: 34px $m;
	}

	.md\:ek-padding--xl {
		padding: 60px $m;
	}
}

@include break-small() {

	.sm\:ek-padding--sm {
		padding: 14px $m;
	}

	.sm\:ek-padding--md {
		padding: 24px $m;
	}

	.sm\:ek-padding--lg {
		padding: 34px $m;
	}

	.sm\:ek-padding--xl {
		padding: 60px $m;
	}
}

//margin
.ek-margin--sm {
	margin: 14px $m;
}

.ek-margin--md {
	margin: 24px $m;
}

.ek-margin--lg {
	margin: 34px $m;
}

.ek-margin--xl {
	margin: 60px $m;
}

@include break-large() {

	.lg\:ek-margin--sm {
		margin: 14px $m;
	}

	.lg\:ek-margin--md {
		margin: 24px $m;
	}

	.lg\:ek-margin--lg {
		margin: 34px $m;
	}

	.lg\:ek-margin--xl {
		margin: 60px $m;
	}
}

@include break-medium() {

	.md\:ek-margin--sm {
		margin: 14px $m;
	}

	.md\:ek-margin--md {
		margin: 24px $m;
	}

	.md\:ek-margin--lg {
		margin: 34px $m;
	}

	.md\:ek-margin--xl {
		margin: 60px $m;
	}
}

@include break-small() {

	.sm\:ek-margin--sm {
		margin: 14px $m;
	}

	.sm\:ek-margin--md {
		margin: 24px $m;
	}

	.sm\:ek-margin--lg {
		margin: 34px $m;
	}

	.sm\:ek-margin--xl {
		margin: 60px $m;
	}
}

body:not(.wp-admin) {
	//Flexbox
	.ek-flex > div {
		display: flex $m;
	}

	.ek-flex-initial > div {
		flex: 0 1 auto $m;
	}

	.ek-flex-1 > div {
		flex: 1 1 0% $m;
	}

	.ek-flex-auto > div {
		flex: 1 1 auto $m;
	}

	.ek-flex-none > div {
		flex: none $m;
	}

	.ek-flex-no-wrap > div {
		flex-wrap: nowrap $m;
	}

	.ek-flex-wrap > div {
		flex-wrap: wrap $m;
	}

	.ek-flex-wrap-reverse > div {
		flex-wrap: wrap-reverse $m;
	}

	.ek-flex-row > div {
		flex-direction: row $m;
	}

	.ek-flex-row-reverse > div {
		flex-direction: row-reverse $m;
	}

	.ek-flex-col > div {
		flex-direction: column $m;
	}

	.ek-flex-col-reverse > div {
		flex-direction: column-reverse $m;
	}

	.ek-items-stretch > div {
		align-items: stretch $m;
	}

	.ek-items-start > div {
		align-items: flex-start $m;
	}

	.ek-items-center > div {
		align-items: center $m;
	}

	.ek-items-end {

		&.wp-block-cover,
		> div {
			align-items: flex-end $m;
		}
	}

	.ek-items-baseline > div {
		align-items: baseline $m;
	}

	.ek-justify-start > div {
		justify-content: flex-start $m;
	}

	.ek-justify-center > div {
		justify-content: center $m;
	}

	.ek-justify-end > div {
		justify-content: flex-end $m;
	}

	.ek-justify-between > div {
		justify-content: space-between $m;
	}

	.ek-justify-around > div {
		justify-content: space-around $m;
	}

	@include break-large() {

		.lg\:ek-flex > div {
			display: flex $m;
		}

		.lg\:ek-flex-initial > div {
			flex: 0 1 auto $m;
		}

		.lg\:ek-flex-1 > div {
			flex: 1 1 0% $m;
		}

		.lg\:ek-flex-auto > div {
			flex: 1 1 auto $m;
		}

		.lg\:ek-flex-none > div {
			flex: none $m;
		}

		.lg\:ek-flex-no-wrap > div {
			flex-wrap: nowrap $m;
		}

		.lg\:ek-flex-wrap > div {
			flex-wrap: wrap $m;
		}

		.lg\:ek-flex-wrap-reverse > div {
			flex-wrap: wrap-reverse $m;
		}

		.lg\:ek-flex-row > div {
			flex-direction: row $m;
		}

		.lg\:ek-flex-row-reverse > div {
			flex-direction: row-reverse $m;
		}

		.lg\:ek-flex-col > div {
			flex-direction: column $m;
		}

		.lg\:ek-flex-col-reverse > div {
			flex-direction: column-reverse $m;
		}

		.lg\:ek-items-stretch > div {
			align-items: stretch $m;
		}

		.lg\:ek-items-start > div {
			align-items: flex-start $m;
		}

		.lg\:ek-items-center > div {
			align-items: center $m;
		}

		.lg\:ek-items-end > div {
			align-items: flex-end $m;
		}

		.lg\:ek-items-baseline > div {
			align-items: baseline $m;
		}

		.lg\:ek-justify-start > div {
			justify-content: flex-start $m;
		}

		.lg\:ek-justify-center > div {
			justify-content: center $m;
		}

		.lg\:ek-justify-end > div {
			justify-content: flex-end $m;
		}

		.lg\:ek-justify-between > div {
			justify-content: space-between $m;
		}

		.lg\:ek-justify-around > div {
			justify-content: space-around $m;
		}
	}

	@include break-medium() {

		.md\:ek-flex > div {
			display: flex $m;
		}

		.md\:ek-flex-initial > div {
			flex: 0 1 auto $m;
		}

		.md\:ek-flex-1 > div {
			flex: 1 1 0% $m;
		}

		.md\:ek-flex-auto > div {
			flex: 1 1 auto $m;
		}

		.md\:ek-flex-none > div {
			flex: none $m;
		}

		.md\:ek-flex-no-wrap > div {
			flex-wrap: nowrap $m;
		}

		.md\:ek-flex-wrap > div {
			flex-wrap: wrap $m;
		}

		.md\:ek-flex-wrap-reverse > div {
			flex-wrap: wrap-reverse $m;
		}

		.md\:ek-flex-row > div {
			flex-direction: row $m;
		}

		.md\:ek-flex-row-reverse > div {
			flex-direction: row-reverse $m;
		}

		.md\:ek-flex-col > div {
			flex-direction: column $m;
		}

		.md\:ek-flex-col-reverse > div {
			flex-direction: column-reverse $m;
		}

		.md\:ek-items-stretch > div {
			align-items: stretch $m;
		}

		.md\:ek-items-start > div {
			align-items: flex-start $m;
		}

		.md\:ek-items-center > div {
			align-items: center $m;
		}

		.md\:ek-items-end > div {
			align-items: flex-end $m;
		}

		.md\:ek-items-baseline > div {
			align-items: baseline $m;
		}

		.md\:ek-justify-start > div {
			justify-content: flex-start $m;
		}

		.md\:ek-justify-center > div {
			justify-content: center $m;
		}

		.md\:ek-justify-end > div {
			justify-content: flex-end $m;
		}

		.md\:ek-justify-between > div {
			justify-content: space-between $m;
		}

		.md\:ek-justify-around > div {
			justify-content: space-around $m;
		}
	}

	@include break-small() {

		.sm\:ek-flex > div {
			display: flex $m;
		}

		.sm\:ek-flex-initial > div {
			flex: 0 1 auto $m;
		}

		.sm\:ek-flex-1 > div {
			flex: 1 1 0% $m;
		}

		.sm\:ek-flex-auto > div {
			flex: 1 1 auto $m;
		}

		.sm\:ek-flex-none > div {
			flex: none $m;
		}

		.sm\:ek-flex-no-wrap > div {
			flex-wrap: nowrap $m;
		}

		.sm\:ek-flex-wrap > div {
			flex-wrap: wrap $m;
		}

		.sm\:ek-flex-wrap-reverse > div {
			flex-wrap: wrap-reverse $m;
		}

		.sm\:ek-flex-row > div {
			flex-direction: row $m;
		}

		.sm\:ek-flex-row-reverse > div {
			flex-direction: row-reverse $m;
		}

		.sm\:ek-flex-col > div {
			flex-direction: column $m;
		}

		.sm\:ek-flex-col-reverse > div {
			flex-direction: column-reverse $m;
		}

		.sm\:ek-items-stretch > div {
			align-items: stretch $m;
		}

		.sm\:ek-items-start > div {
			align-items: flex-start $m;
		}

		.sm\:ek-items-center > div {
			align-items: center $m;
		}

		.sm\:ek-items-end > div {
			align-items: flex-end $m;
		}

		.sm\:ek-items-baseline > div {
			align-items: baseline $m;
		}

		.sm\:ek-justify-start > div {
			justify-content: flex-start $m;
		}

		.sm\:ek-justify-center > div {
			justify-content: center $m;
		}

		.sm\:ek-justify-end > div {
			justify-content: flex-end $m;
		}

		.sm\:ek-justify-between > div {
			justify-content: space-between $m;
		}

		.sm\:ek-justify-around > div {
			justify-content: space-around $m;
		}
	}
}

// Fullwidth display.
.ek-w-full {

	&,
	> .wp-block-button__link {
		max-width: 100% $m;
	}
}

@include break-medium() {

	.md\:ek-w-full {

		&,
		> .wp-block-button__link {
			max-width: 100% $m;
		}
	}
}

@include break-small() {

	.sm\:ek-w-full {

		&,
		> .wp-block-button__link {
			max-width: 100% $m;
		}
	}
}