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

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

// A -----------------------------------------------
	.ai-s    { align-items: flex-start;}
	.ai-c    { align-items: center;}
	.ai-e    { align-items: 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: $color;}
		.bd-#{$suf} { border-color: $color;}
	}

	.bd-r-pill {
		border-radius: 100px;
		&.btn,&.bit,&.input {
			border-radius: math.div($btn-input-size-md, 2);
		}
		&.btn.is-sm,&.bit.is-sm,&.input.is-sm {
			border-radius: math.div($btn-input-size-sm, 2);
		}
		&.btn.is-lg,&.bit.is-lg,&.input.is-lg {
			border-radius: math.div($btn-input-size-lg, 2);
		}
	}


	.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;}
	.bd-r-4    { border-radius: $border-radius-4;}
	.bd-r-5    { border-radius: $border-radius-5;}
	.bd-r-6    { border-radius: $border-radius-6;}

	.bd-w-4 { border-width: 4px;}

// C -----------------------------------------------
	@each $suf, $color in $co-map {
		.co-#{$suf} { color: $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-ib    { display: inline-block;}
	.d-if    { display: inline-flex;}

	@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-ib_#{$name}    { 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-sb   { font-weight: $font-sbold;}
	.fow-b    { font-weight: $font-bold;}
	.fow-xb   { font-weight: $font-xbold;}

// 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;}

// K -----------------------------------------------
// L -----------------------------------------------
// M -----------------------------------------------
	@each $i, $dist in $sp-map {
		.mb-#{$i} { margin-bottom: $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) {
	// 		.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;}

	.tw-b    { text-wrap: balance;}

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

// 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---*/