@use "sass:list";
@use "sass:map";

/*---UTILITIES_START---*/
#html {

// A -----------------------------------------------
	.ai-s    { align-items: flex-start;}
	.ai-c    { align-items: center;}
	.ai-e    { align-items: flex-end;}
	.ac-c    { align-content: flex-start;}
	.ac-c    { align-content: center;}
	.ac-e    { align-content: flex-end;}
	.as-s    { align-self: flex-start;}
	.as-c    { align-self: center;}
	.as-e    { align-self: flex-end;}

// B -----------------------------------------------
	@each $suf, $color in $co-map {
		.bg-#{$suf} { background-color: var($color);}
		.bd-#{$suf} { border-color: var($color);}
	}
	.bg-t     { background-color: transparent;}

	.bd-r-pill { border-radius: 100px;}
	.bd-r-50   { border-radius: 50%;}
	.bd-r-0    { border-radius: 0;}
	.bd-r-1    { border-radius: $border-radius-1;}
	.bd-r-2    { border-radius: $border-radius-2;}
	.bd-r-3    { border-radius: $border-radius-3;}

// C -----------------------------------------------
	@each $suf, $color in $co-map {
		.co-#{$suf} { color: var($color);}
	}

	.col-c-2 { column-count: 2;}
	.col-c-3 { column-count: 3;}
	.col-c-4 { column-count: 4;}

	.cur-p { cursor: pointer;}

// D -----------------------------------------------
	.d-n     { display: none;}
	.d-f     { display: flex;}
	.d-b     { display: block;}
	.d-i     { display: inline;}
	.d-ib    { display: inline-block;}

	.d-n\:a::after { display: none;}
	.d-n\:b::before { display: none;}

	@each $name in $break-names {
		@include mediaQ($name, $break-map-small) {
			.d-n_#{$name}     { display: none;}
			.d-f_#{$name}     { display: flex;}
			.d-b_#{$name}     { display: block;}
			.d-i_#{$name}     { display: inline;}
			.d-ib_#{$name}    { display: inline-block;}
		}
		@include mediaQ(#{$name}Max, $break-map-small) {
			.d-n_#{$name}-max     { display: none;}
			.d-f_#{$name}-max     { display: flex;}
			.d-b_#{$name}-max     { display: block;}
			.d-i_#{$name}-max     { display: inline;}
			.d-ib_#{$name}-max    { display: inline-block;}
		}
	}
	/* @include mediaQ(bp) {
		.d-n_bp     { display: none;}
		.d-f_bp     { display: flex;}
		.d-b_bp     { display: block;}
		.d-ib_bp    { display: inline-block;}
	}
	@include mediaQ(bpMax) {
		.d-n_bp-max     { display: none;}
		.d-f_bp-max     { display: flex;}
		.d-b_bp-max     { display: block;}
		.d-ib_bp-max    { display: inline-block;}
	} */

// E -----------------------------------------------
// F -----------------------------------------------
	.flw-w    { flex-wrap: wrap;}
	.flg-1    { flex-grow: 1;}
	.fls-1    { flex-shrink: 1;}

	.fld-c    { flex-direction: column;}
	.fld-r    { flex-direction: row;}

	.fof-ss   { font-family: $font-family-sans-serif;}
	.fof-d    { font-family: $font-family-serif;}
	.fof-m    { font-family: $font-family-monospace;}
	.fos-lg   { font-size: $font-size-large;}
	.fos-sm   { font-size: $font-size-small;}
	.fos-xs   { font-size: $font-size-xsmall;}
	.fow-l    { font-weight: $font-light;}
	.fow-r    { font-weight: $font-regular;}
	.fow-b    { font-weight: $font-bold;}

// G -----------------------------------------------
	@each $i, $dist in $sp-map {
		@if $i < 6 {
			.gap-#{$i}   { gap: $dist;}
			.gap-c-#{$i} { column-gap: $dist;}
			.gap-r-#{$i} { row-gap: $dist;}
		}
	}

// H ------------------------------------------------
	.h100 {
		height: 100%;
	}
// I -----------------------------------------------
// J -----------------------------------------------
	.jc-s    { justify-content: flex-start;}
	.jc-c    { justify-content: center;}
	.jc-e    { justify-content: flex-end;}
	.jc-sb   { justify-content: space-between;}
	.jc-sa   { justify-content: space-around;}
	.jc-se   { justify-content: space-evenly;}

// K -----------------------------------------------
// L -----------------------------------------------
	.lh-1    { line-height: 1.2;}
// M -----------------------------------------------
	@each $i, $dist in $sp-map {
		.mb-#{$i} { margin-bottom: $dist;}
		.my-#{$i} { margin-top: $dist; margin-bottom: $dist;}
		.mx-#{$i} { margin-left: $dist; margin-right: $dist;}

		@if $i < 6 {
			.ml-#{$i} { margin-left: $dist;}
			.mr-#{$i} { margin-right: $dist;}
		}
	}
	@each $i, $dist in $sp-lg-map {
		.mb-lg-#{$i} { margin-bottom: $dist;}
	}

	.m-0      { margin: 0;}
	.mb-0     { margin-bottom: 0;}
	.mt-auto  { margin-top: auto;}
	.ml-auto  { margin-left: auto;}
	.mr-auto  { margin-right: auto;}

// N -----------------------------------------------
// O -----------------------------------------------
	.ov-h        { overflow: hidden;}

	// .order-1     { order: 1;}
	// .order-2     { order: 2;}
	// .order-3     { order: 3;}
	// .order-4     { order: 4;}
	// .order-5     { order: 5;}
	// @each $name in $break-names {
	// 	@include mediaQ($name, $break-map-small) {
	// 		@each $classSuffix, $size in map.get($grid-widths, $name) {
	// 			.order-1_#{$name} { order: 1;}
	// 			.order-2_#{$name} { order: 2;}
	// 			.order-3_#{$name} { order: 3;}
	// 			.order-4_#{$name} { order: 4;}
	// 			.order-5_#{$name} { order: 5;}
	// 		}
	// 	}
	// }
	// SITEMAP
	@include mediaQ(md) {
		.order-1_md { order: 1;}
		.order-2_md { order: 2;}
	}


// P -----------------------------------------------
	@each $i, $dist in $sp-map {
		.pt-#{$i} { padding-top: $dist;}
		.pb-#{$i} { padding-bottom: $dist;}
		.py-#{$i} { padding-top: $dist; padding-bottom: $dist;}
		.px-#{$i} { padding-left: $dist; padding-right: $dist;}

		@if $i < 8 {
			.p-#{$i}  { padding: $dist;}
		}

		@if $i < 4 {
			.pl-#{$i} { padding-left: $dist;}
			.pr-#{$i} { padding-right: $dist;}
		}
	}
	@each $i, $dist in $sp-lg-map {
		.pt-lg-#{$i} { padding-top: $dist;}
		.pb-lg-#{$i} { padding-bottom: $dist;}
		// .py-lg-#{$i} { padding-top: $dist; padding-bottom: $dist;}
		// .px-lg-#{$i} { padding-left: $dist; padding-right: $dist;}
	}
	.p-0 { padding: 0;}

	.po-r { position: relative;}

	.poe-n { pointer-events: none;}
	.poe-a { pointer-events: auto;}

// Q -----------------------------------------------
// R -----------------------------------------------
// S -----------------------------------------------
// T -----------------------------------------------
	.ta-l    { text-align: left;}
	.ta-c    { text-align: center;}
	.ta-r    { text-align: right;}
	.td-u    { text-decoration: underline;}

	.to-el   { text-overflow: ellipsis;}

	.tt-u    { text-transform: uppercase;}
	.tt-c    { text-transform: capitalize;}
	.tt-l    { text-transform: lowercase;}
	.tt-n    { text-transform: none;}

// U -----------------------------------------------
// V -----------------------------------------------
	.va-t       { vertical-align: top;}
	.va-m       { vertical-align: middle;}
	.va-b       { vertical-align: bottom;}

	.vi-h       { visibility: hidden;}

// W -----------------------------------------------
	.w100       { width: 100%;}
	.w-mc       { width: max-content;}
	.wis-nw     { white-space: nowrap}
	// .wis-n      { white-space: normal}
	.wb-bw      { word-break: break-word;}

// X -----------------------------------------------
// Y -----------------------------------------------
// Z -----------------------------------------------

}
/*---UTILITIES_END---*/