/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Clearfix */
.clearfix::before,
.clearfix::after {
	display: table;
	content: " ";
}

.clearfix::after {
	clear: both;
}

/* Grouping elements and follow childs height */
* html .group {
	height: 1%;
}

* + html .group {
	display: inline-block;
}

.group::after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Aligning elements Left - Right. */
img.align-left,
img.align-right {
	display: inline;
}

.align-left {
	float: left;
	margin-right: var(--spacer);
}

.align-right {
	float: right;
	margin-left: var(--spacer);
}

/* Aligning elements Left - Right responsive. */
@each $size in sm, md, lg {
@media (--$(size)) {
	.align-left-$(size) {
		float: left;
		margin-left: 0;
		margin-right: var(--spacer);
	}
	
	.align-right-$(size) {
		float: right;
		margin-left: var(--spacer);
		margin-right: 0;
	}
}
}

/* Text, Background and Border utility colors. */
/* stylelint-disable */
@each $color in primary, primary-light, primary-dark, secondary, secondary-light, secondary-dark, 
news, news-dark, success, success-dark, info, info-dark, warning, warning-dark, error, error-dark, 
white, black, light, dark, gray, gray-light, gray-dark, emphasis {
.text-$(color) {
	color: var(--color-$(color)) !important;
}

.bg-$(color) {
	background-color: var(--color-$(color)) !important;
}

.border-$(color) {
	border-color: var(--color-$(color)) !important;
}
}
/* stylelint-enable */

/* Border sizes. */
.border-0 {
	border: none;
}

.border-1 {
	border-width: 1px;
}

.border-2 {
	border-width: 2px;
}

.border-0,
.border-1,
.border-2 {
	border-style: solid;
}

/* Border radius. */
.rounded-radius {
	border-radius: var(--rounded-radius);
}

.pill-radius {
	border-radius: var(--pill-radius);
}

.circle-radius {
	border-radius: var(--circle-radius);
}

.none-radius {
	border-radius: none;
}

/* Remove background color. */
.bg-transparent {
	background-color: transparent;
}

/* Add Box Shadow */
.box-shadow {
	box-shadow: 0 9px 17px -6px rgba(var(--color-black), 0.25);
}

/* Remove box-shadow. */
.box-shadow-0 {
	box-shadow: none;
}

/* Opacity. */
@each $value in 0, 25, 50, 75, 100 {
.opacity-$(value) {
	opacity: calc($value / 100);
}
}

.opacity-1 {
	opacity: 1;
}

/* Text aligment helpers. */
.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

/* Text aligment responsive. */
@each $size in sm, md, lg {
@media (--$(size)) {
	.text-left-$(size) {
		text-align: left;
	}
	
	.text-center-$(size) {
		text-align: center;
	}
	
	.text-right-$(size) {
		text-align: right;
	}
	}
}

/* Text transforms */
.text-up {
	text-transform: uppercase;
}

.text-down {
	text-transform: lowercase;
}

.text-cap {
	text-transform: capitalize;
}

/* Text weigth */
.text-thin {
	font-weight: var(--fw-thin);
}

.text-light {
	font-weight: var(--fw-light);
}

.text-regular {
	font-weight: var(--fw-regular);
}

.text-medium {
	font-weight: var(--fw-medium);
}

.text-bold {
	font-weight: var(--fw-bold);
}

/* Text family */
.text-default {
	font-family: var(--global-font-family);
}

.text-heading {
	font-family: var(--heading-font-family);
}

/* Text shadow */
.text-shadow {
	text-shadow: 0 2px 4px rgba(var(--color-black), 0.5);
}

/* Text hidding */
.text-less {
	font: 0/0 a;
}

/* Text spacing. */
.letter-space-0 {
	letter-spacing: 0;
}

.letter-space {
	letter-spacing: 0.5px;
}

.letter-space-1 {
	letter-spacing: 1px;
}

.letter-space-2 {
	letter-spacing: 2px;
}

.letter-space-3 {
	letter-spacing: 3px;
}

.letter-space-4 {
	letter-spacing: 4px;
}

/* Text wrapping */
.no-wrap {
	white-space: nowrap;
}

/* For containers. */
.block {
	display: block;
}

.inline-block {
	display: inline-block;
}

.inline {
	display: inline;
}

.flex {
	display: flex;
}

/* For containers responsive. */
@each $size in sm, md, lg {
@media (--$(size)) {
	.block-$(size) {
		display: block;
	}
	
	.inline-block-$(size) {
		display: inline-block;
	}
	
	.inline-$(size) {
		display: inline;
	}
	
	.flex-$(size) {
		display: flex;
	}
}
}

/* Positions. */
.position-relative {
	position: relative;
}

.position-absolute {
	position: absolute;
}

.position-static {
	position: static;
}

.position-sticky {
	position: sticky;
}

/* Positions responsive. */
@each $size in sm, md, lg {
@media (--$(size)) {
	.position-relative-$(size) {
		position: relative;
	}
	
	.position-absolute-$(size) {
		position: absolute;
	}
	
	.position-static-$(size) {
		position: static;
	}
}
}

/* Hide blocks. */
.hide {
	display: none;
}

/* Hide blocks responsive. */
@each $size in sm, md, lg {
@media (--$(size)) {
	.hide-$(size) {
		display: none;
	}
}
@media (--$(size)-max) {
	.hide-$(size)-max {
		display: none;
	}
}
}

/* Overflow. */
.overflow-hidden {
	overflow: hidden;
}

.overflow-initial {
	overflow: initial;
}

.overflow-y {
	overflow-y: auto;
}

.overflow-x {
	overflow-x: auto;
}

/* Change flex direction. */
.flex-column {
	flex-direction: column;
}

/* Flex horizontal align. */
.content-start {
	justify-content: flex-start;
}

.content-center {
	justify-content: center;
}

.content-end {
	justify-content: flex-end;
}

.content-between {
	justify-content: space-between;
}

.content-around {
	justify-content: space-around;
}

/* Flex vertical align. */
.align-start {
	align-items: flex-start;
}

.align-center {
	align-items: center;
}

.align-end {
	align-items: flex-end;
}

/* Flex items grow/shrink. */
.item-grow-1 {
	flex-grow: 1;
}

.item-grow-1 {
	flex-grow: 2;
}

.item-grow-1 {
	flex-grow: 3;
}

.item-shrink-1 {
	flex-shrink: 1;
}

.item-shrink-1 {
	flex-shrink: 2;
}

.item-shrink-1 {
	flex-shrink: 3;
}

/* Flex items alignments. */
.item-start {
	align-self: flex-start;
}

.item-center {
	align-self: center;
}

.item-end {
	align-self: flex-end;
}

/* Flex shortcodes */
.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Centering elements with horizontal margins. */
.box-center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.box-left {
	display: block;
	margin-left: 0;
	margin-right: auto;
}

.box-right {
	display: block;
	margin-left: auto;
	margin-right: 0;
}

/* Flex content responsive. */
@each $size in sm, md, lg {
@media (--$(size)) {
	/* Change flex direction. */
	.flex-column-$(size) {
		flex-direction: column;
	}

	/* Flex horizontal align. */
	.content-start-$(size) {
		justify-content: flex-start;
	}

	.content-center-$(size) {
		justify-content: center;
	}

	.content-end-$(size) {
		justify-content: flex-end;
	}

	.content-between-$(size) {
		justify-content: space-between;
	}

	.content-around-$(size) {
		justify-content: space-around;
	}

	/* Flex vertical align. */
	.align-start-$(size) {
		align-items: flex-start;
	}

	.align-center-$(size) {
		align-items: center;
	}

	.align-end-$(size) {
		align-items: flex-end;
	}

	/* Flex items grow/shrink. */
	.item-grow-1-$(size) {
		flex-grow: 1;
	}

	.item-grow-1-$(size) {
		flex-grow: 2;
	}

	.item-grow-1-$(size) {
		flex-grow: 3;
	}

	.item-shrink-1-$(size) {
		flex-shrink: 1;
	}

	.item-shrink-1-$(size) {
		flex-shrink: 2;
	}

	.item-shrink-1-$(size) {
		flex-shrink: 3;
	}

	/* Flex items alignments. */
	.item-start-$(size) {
		align-self: flex-start;
	}

	.item-center-$(size) {
		align-self: center;
	}

	.item-end-$(size) {
		align-self: flex-end;
	}
}
}

/* Flex order. */
.order-first {
	order: -1;
}

@each $value in 1, 2, 3, 4, 5 {
.order-$(value) {
	order: $value;
}
}

/* Flex order responsive. */
@each $size in sm, md, lg {
@media (--$(size)) {
	.order-first-$(size) {
		order: -1;
	}
	@each $value in 1, 2, 3, 4, 5 {
	.order-$(value)-$(size) {
		order: $value;
	}
	}
}
}

/* Centering with position absolute. */
.centered-xy {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.centered-x {
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.centered-y {
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

/* Spacing.
* It will generate several classes such as:
* .mr-1 which gives margin-right 0.25rem.
* .mt-2 gives MARGIN to the TOP 0.5rem.
* .my-3 gives MARGIN to the TOP and BOTTOM of 1rem.
* .pb-5 gives PADDING to the BOTTOM 3rem.
* .pl-4 gives PADDING to the LEFT of 1.5rem.
* .px-3 gives PADDING to the LEFT and RIGHT of 1rem.
* The first letter is "m" or "p" for MARGIN or PADDING
* Second letter is "t", "b", "l", "r", "y" or "x"
* for TOP, BOTTOM, LEFT, RIGHT, TOPBOTTOM or LEFTRIGHT */
/* stylelint-disable */
@each $key, $size in (0, 1, 2, 3, 4, 5, 6),
(0, 0.5rem, 1rem, 1.5rem, 2.5rem, 4.5rem, 6rem) {
.m-$(key) {
	margin: $(size) !important;
}

.p-$(key) {
	padding: $(size) !important;
}

.my-$(key) {
	margin-top: $(size) !important;
	margin-bottom: $(size) !important;
}

.py-$(key) {
	padding-top: $(size) !important;
	padding-bottom: $(size) !important;
}

.mx-$(key) {
	margin-left: $(size) !important;
	margin-right: $(size) !important;
}

.px-$(key) {
	padding-left: $(size) !important;
	padding-right: $(size) !important;
}

.mt-$(key) {
	margin-top: $(size) !important;
}

.pt-$(key) {
	padding-top: $(size) !important;
}

.mb-$(key) {
	margin-bottom: $(size) !important;
}

.pb-$(key) {
	padding-bottom: $(size) !important;
}

.ml-$(key) {
	margin-left: $(size) !important;
}

.pl-$(key) {
	padding-left: $(size) !important;
}

.mr-$(key) {
	margin-right: $(size) !important;
}

.pr-$(key) {
	padding-right: $(size) !important;
}
}

@each $breakpoint in (sm, md, lg) {
@media (--$(breakpoint)) {
	@each $key, $size in (0, 1, 2, 3, 4, 5, 6),	(0, 1rem, 1.5rem, 2rem, 3rem, 4.5rem, 6rem) {
	.m-$(key)-$(breakpoint) {
		margin: $(size) !important;
	}

	.p-$(key)-$(breakpoint) {
		padding: $(size) !important;
	}

	.my-$(key)-$(breakpoint) {
		margin-top: $(size) !important;
		margin-bottom: $(size) !important;
	}

	.py-$(key)-$(breakpoint) {
		padding-top: $(size) !important;
		padding-bottom: $(size) !important;
	}

	.mx-$(key)-$(breakpoint) {
		margin-left: $(size) !important;
		margin-right: $(size) !important;
	}

	.px-$(key)-$(breakpoint) {
		padding-left: $(size) !important;
		padding-right: $(size) !important;
	}

	.mt-$(key)-$(breakpoint) {
		margin-top: $(size) !important;
	}

	.pt-$(key)-$(breakpoint) {
		padding-top: $(size) !important;
	}

	.mb-$(key)-$(breakpoint) {
		margin-bottom: $(size) !important;
	}

	.pb-$(key)-$(breakpoint) {
		padding-bottom: $(size) !important;
	}

	.ml-$(key)-$(breakpoint) {
		margin-left: $(size) !important;
	}

	.pl-$(key)-$(breakpoint) {
		padding-left: $(size) !important;
	}

	.mr-$(key)-$(breakpoint) {
		margin-right: $(size) !important;
	}

	.pr-$(key)-$(breakpoint) {
		padding-right: $(size) !important;
	}
	}
}
}
/* stylelint-enable */

/* Sections */
.section {
	width: 100%;
	padding-top: var(--spacer);
	padding-bottom: var(--spacer);
}

/* Dividers */
.divider {
	width: 100%;
	height: 1px;
	overflow: hidden;
	background-color: var(--color-gray);
	border: 0;
}

/* Fixed width sizes */
@each $width in 24, 32, 64, 80, 100, 120, 140, 160, 180, 200, 220, 240, 260, 280, 300, 360, 480, 640, 800 {
.w-$(width) {
	width: $(width)px;
}
}

/* Fixed width sizes responsive. */
@each $size in sm, md, lg {
@media (--$(size)) {
	@each $width in 24, 32, 64, 80, 100, 120, 140, 160, 180, 200, 220, 240, 260, 280, 300, 360, 480, 640, 800 {
	.w-$(width)-$(size) {
		width: $(width)px;
	}
	}
}
}

/* Height Sizes */
.full-height {
	height: 100vh;
}

.half-height {
	height: 50vh;
}

/* Icons Sizes. */
@each $value in 24, 32, 64, 80, 100, 120, 140, 160, 180, 200, 220, 240, 260, 280, 300 {
.icon-$(value) {
	width: $(value)px;
	height: $(value)px;
}
}

/* Icons Sizes responsive. */
@each $size in sm, md, lg {
@media (--$(size)) {
	@each $value in 24, 32, 64, 80, 100, 120, 140, 160, 180, 200, 220, 240, 260, 280, 300 {
	.icon-$(value)-$(size) {
		width: $(value)px;
		height: $(value)px;
	}
	}
}
}