/* Usefull - Typography */
////
/// @group UsefullClasses-Typography
/// Usefull - Typography

///
.font {
	&-size {
		@each $type, $value in $osui-typography-sizes {
			@if ($type != 'display') {
				&-#{$type} {
					font-size: var(--font-size-#{$type});
				}
			}
		}
	}

	// this & is used to ensure that the scss prettier doesn't move the loop to another position
	& {
		@each $type, $value in $osui-typography-weight {
			&-#{$type} {
				font-weight: var(--font-#{$type});
			}
		}
	}
}

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

///
.italic {
	font-style: italic;
}

///
.oblique {
	font-style: oblique;
}

///
.text {
	&-lowercase {
		text-transform: lowercase;
	}

	&-uppercase {
		text-transform: uppercase;
	}

	&-capitalize {
		text-transform: capitalize;
	}

	&-ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}