@use "sass:string";
@import "../vars/general";

@each $size_1, $size_2, $size_3, $realsize in $general_sizes{
	@if($size_1 == $size_2){
		.top#{$size_1}{
			top: #{$realsize};
		}
	}
	@else{
		.top#{$size_3}, .top#{$size_2}, .top#{$size_1}{
			top: #{$realsize};
		}
	}
}
@each $size_1, $size_2, $size_3, $realsize in $general_sizes{
	@if($size_1 == $size_2){
		.left#{$size_1}{
			left: #{$realsize};
		}
	}
	@else{
		.left#{$size_3}, .left#{$size_2}, .left#{$size_1}{
			left: #{$realsize};
		}
	}
}
@each $size_1, $size_2, $size_3, $realsize in $general_sizes{
	@if($size_1 == $size_2){
		.right#{$size_1}{
			right: #{$realsize};
		}
	}
	@else{
		.right#{$size_3}, .right#{$size_2}, .right#{$size_1}{
			right: #{$realsize};
		}
	}
}
@each $size_1, $size_2, $size_3, $realsize in $general_sizes{
	@if($size_1 == $size_2){
		.bottom#{$size_1}{
			bottom: #{$realsize};
		}
	}
	@else{
		.bottom#{$size_3}, .bottom#{$size_2}, .bottom#{$size_1}{
			bottom: #{$realsize};
		}
	}
}
@each $size_1, $size_2, $size_3, $realsize in $general_sizes{
	@if($size_1 == $size_2){
		.h#{$size_1}{
			height: #{$realsize};
		}
	}
	@else{
		.h#{$size_3}, .h#{$size_2}, .h#{$size_1}{
			height: #{$realsize};
		}
	}
}
.h-full{
	height:100%;
}
.h-dvh-full{
	height:100dvh;
}
.h-vh-full{
	height:100vh;
}
@each $size_1, $size_2, $size_3, $realsize in $general_sizes{
	@if($size_1 == $size_2){
		.w#{$size_1}{
			width: #{$realsize};
		}
	}
	@else{
		.w#{$size_3}, .w#{$size_2}, .w#{$size_1}{
			width: #{$realsize};
		}
	}
}
@for $i from 1 through 32{
	.w-\[#{$i}rem\]{
		width:#{$i}rem;
	}
}
.truncate, .whitespace-nowrap {
    white-space: nowrap;
}
.max-w-max-hover{
	&:hover{
		max-width: -webkit-max-content;
		max-width: -moz-max-content;
		max-width: max-content;
	}
}
.w-full{
	width:100%;
}
.w-dvw-full{
	width:100dvw;
}
.h-vw-full{
	width:100vw;
}
@for $i from -10 through 100{
	@if($i < 0){
		.-z-#{i}{
			z-index: #{$i};
		}
	}
	@else{
		.z-#{$i}{
			z-index: #{$i};
		}
	}
}
@each $dp in $general_display{
	.#{$dp},.d-#{$dp}{
		display: str-replace('display-', '',#{$dp});
	}
}

@each $dp in $general_position{
	.#{$dp},.pos-#{$dp}{
		position: str-replace('position-', '',#{$dp});
	}
}
@each $background_name, $background_value in $general_backgrounds{
	.bg#{$background_name}{
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200"><g rotate="0deg" y="0" x="0"><image width="40" height="40" xlink:href="#{$background_value}" x="0" y="0" id="svg_id_img_1"></image></g><g transform="translate(200,-120) rotate(90)"><image width="40" height="40" xlink:href="#{$background_value}" x="60%" y="0" id="svg_id_img_2"></image></g><g transform="translate(320,320) rotate(180)"><image width="40" height="40" xlink:href="#{$background_value}" x="60%" y="60%" id="svg_id_img_3"></image></g><g transform="translate(-120,200) rotate(270)"><image width="40" height="40" xlink:href="#{$background_value}" x="0" y="60%" id="svg_id_img_4" transform="rotate(270deg)"></image></g></svg>');
		background-size: .75rem;
		background-repeat: repeat;
	}
}

@each $prop_val, $prop_val2, $prop_name1, $prop_name2, $prop_name3, $prop_name4, $prop_name5 in $general_aliasing{
	.#{$prop_val}{
		#{$prop_name1}: #{$prop_val};
		#{$prop_name2}: #{$prop_val2};
		#{$prop_name3}: #{$prop_val2};
		#{$prop_name4}: #{$prop_val2};
		#{$prop_name5}: #{$prop_val};
	}
} 
.bg-center{background-position:50%}

@each $size_1, $size_2, $size_3, $realsize in $general_sizes{
	@if($size_1 == $size_2){
		.gap#{$size_1}{
			gap: #{$realsize};
		}
		.mt#{$size_1}{
			margin-top: #{$realsize};
		}
		.mb#{$size_1}{
			margin-bottom: #{$realsize};
		}
		.ml#{$size_1}{
			margin-left: #{$realsize};
		}
		.mr#{$size_1}{
			margin-right: #{$realsize};
		}
		.pt#{$size_1}{
			padding-top: #{$realsize};
		}
		.pb#{$size_1}{
			padding-bottom: #{$realsize};
		}
		.pl#{$size_1}{
			padding-left: #{$realsize};
		}
		.pr#{$size_1}{
			padding-right: #{$realsize};
		}
		.mx#{$size_1}{
			margin-right: #{$realsize};
			margin-left: #{$realsize};
		}
		.my#{$size_1}{
			margin-top: #{$realsize};
			margin-bottom: #{$realsize};
		}
		.px#{$size_1} {
			padding-left: #{$realsize};
			padding-right: #{$realsize};
		}
		.py#{$size_1} {
			padding-top: #{$realsize};
			padding-bottom: #{$realsize};
		}
	}
	@else{
		.gap#{$size_3}, .gap#{$size_2}, .gap#{$size_1}{
			gap: #{$realsize};
		}
		.mt#{$size_3}, .mt#{$size_2}, .mt#{$size_1}{
			margin-top: #{$realsize};
		}
		.mb#{$size_3}, .mb#{$size_2}, .mb#{$size_1}{
			margin-bottom: #{$realsize};
		}
		.ml#{$size_3}, .ml#{$size_2}, .ml#{$size_1}{
			margin-left: #{$realsize};
		}
		.mr#{$size_3}, .mr#{$size_2}, .mr#{$size_1}{
			margin-right: #{$realsize};
		}
		.mx#{$size_3}, .mx#{$size_2}, .mx#{$size_1}{
			margin-right: #{$realsize};
			margin-left: #{$realsize};
		}
		.my#{$size_3}, .my#{$size_2}, .my#{$size_1}{
			margin-top: #{$realsize};
			margin-bottom: #{$realsize};
		}
		.pt#{$size_1}{
			padding-top: #{$realsize};
		}
		.pb#{$size_1}{
			padding-bottom: #{$realsize};
		}
		.pl#{$size_1}{
			padding-left: #{$realsize};
		}
		.pr#{$size_1}{
			padding-right: #{$realsize};
		}
		.px#{$size_3}, .px#{$size_2}, .px#{$size_1} {
			padding-left: #{$realsize};
			padding-right: #{$realsize};
		}
		.py#{$size_3}, .py#{$size_2}, .py#{$size_1}{
			padding-top: #{$realsize};
			padding-bottom: #{$realsize};
		}
	}
}
.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.px-auto{
	padding-left:auto;
	padding-right:auto;
}
.py-auto{
	padding-top:auto;
	padding-bottom:auto;
}
@each $class_name, $value1, $value2 in $general_justify{
	.#{$class_name}{
		justify-content:#{$value1};
		@if($value2 != ""){
			justify-content: #{$value2};
		}
	}
}
@each $class_name, $value1, $value2 in $general_justify{
	@if(str-index($value1, "flex")){
		.inline-flex.#{$class_name},.flex.#{$class_name}{
			justify-content:#{$value1};
		}
	}
}
@each $class_name, $value in $general_flex_dir{
	.flex#{$class_name}{
		flex-direction: #{value};
	}
}
@each $value in $general_items_align{
	.items-#{$value}{
		align-items: #{$value};
	}
	.align-#{$value}{
		text-align: #{$value};
		align-items: #{$value};
		align-self: #{$value};
	}
}
.overflow-x-auto {
    overflow-x: auto;
}
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
}
@each $class, $value in $general_grid_flow{
	.grid-#{$class}{
		grid-auto-flow:#{$value};
	}
}
@each $class, $value, $line_height in $general_font_size{
	.text#{$class}{
		font-size: #{$value};
		line-height: #{$line_height};
	}
}
.leading-relaxed {
    line-height: 1.625;
}
.font-mono {
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
}
@each $class, $value in $general_font_weight{
	.font-#{$class}{
		font-weight: #{$value};
	}
}
@each $class, $value in $general_rounded{
	.rounded-#{$class} {
		border-radius: #{$value};
	}
}
@each $value in $general_overflow{
	.overflow-#{$value} {
		overflow: #{$value};
	}
}
@each $value in $general_overflow{
	.overflow-x-#{$value} {
		overflow-x: #{$value};
	}
	.overflow-y-#{$value} {
		overflow-y: #{$value};
	}
}
.min-w-0{
	min-width: 0;
}
.w-0{
	width: 0;
}
.min-h-0{
	min-height: 0;
}
.h-0{
	height: 0;
}
.top-0{
	top: 0;
}
.left-0{
	left: 0;
}
.right-0{
	right: 0;
}
.bottom-0{
	bottom: 0;
}
@for $i from 0 through 100{
	.min-w-#{$i}px{
		min-width: #{$i}px;
	}
	.min-w-#{$i}pc{
		min-width: #{$i + 0%};
	}
	.min-w-#{i}rem{
		min-width: #{$i}rem;
	}
	.min-w-\[#{i}rem\]{
		min-width: #{$i}rem;
	}
	.min-w-#{i}em{
		min-width: #{$i}em;
	}
	.min-w-\[#{i}em\]{
		min-width: #{$i}em;
	}
	.w-#{$i}px{
		width: #{$i}px;
	}
	.w-#{$i}pc{
		width: #{$i + 0%};
	}
	.w-#{i}rem{
		width: #{$i}rem;
	}
	.w-#{i}em{
		width: #{$i}em;
	}
	.w-\[#{i}rem\]{
		width: #{$i}rem;
	}
	.w-\[#{i}em\]{
		width: #{$i}em;
	}
	/**********************************/
	
	.min-h-#{$i}px{
		min-height: #{$i}px;
	}
	.min-h-#{$i}pc{
		min-height: #{$i + 0%};
	}
	.min-h-#{i}rem{
		min-height: #{$i}rem;
	}
	.min-h-\[#{i}rem\]{
		min-height: #{$i}rem;
	}
	.min-h-#{i}em{
		min-height: #{$i}em;
	}
	.min-h-\[#{i}em\]{
		min-height: #{$i}em;
	}
	.h-#{$i}px{
		height: #{$i}px;
	}
	.h-#{$i}pc{
		height: #{$i + 0%};
	}
	.h-#{i}rem{
		height: #{$i}rem;
	}
	.h-#{i}em{
		height: #{$i}em;
	}
	.h-\[#{i}rem\]{
		height: #{$i}rem;
	}
	.h-\[#{i}em\]{
		height: #{$i}em;
	}
	.top-#{$i}px{
		top: #{$i}px;
	}
	.top-#{$i}pc{
		top: #{$i + 0%};
	}
	.top-#{i}rem{
		top: #{$i}rem;
	}
	.top-#{i}em{
		top: #{$i}em;
	}
	.top-\[#{i}rem\]{
		top: #{$i}rem;
	}
	.top-\[#{i}em\]{
		top: #{$i}em;
	}
	.left-#{$i}px{
		left: #{$i}px;
	}
	.left-#{$i}pc{
		left: #{$i + 0%};
	}
	.left-#{i}rem{
		left: #{$i}rem;
	}
	.left-#{i}em{
		left: #{$i}em;
	}
	.left-\[#{i}rem\]{
		left: #{$i}rem;
	}
	.left-\[#{i}em\]{
		left: #{$i}em;
	}
	.right-#{$i}px{
		right: #{$i}px;
	}
	.right-#{$i}pc{
		right: #{$i + 0%};
	}
	.right-#{i}rem{
		right: #{$i}rem;
	}
	.right-#{i}em{
		right: #{$i}em;
	}
	.right-\[#{i}rem\]{
		right: #{$i}rem;
	}
	.right-\[#{i}em\]{
		right: #{$i}em;
	}
	.bottom-#{$i}px{
		bottom: #{$i}px;
	}
	.bottom-#{$i}pc{
		bottom: #{$i + 0%};
	}
	.bottom-#{i}rem{
		bottom: #{$i}rem;
	}
	.bottom-#{i}em{
		bottom: #{$i}em;
	}
	.bottom-\[#{i}rem\]{
		bottom: #{$i}rem;
	}
	.bottom-\[#{i}em\]{
		bottom: #{$i}em;
	}
}
@for $i from 1 to 200{
	$value:.25 * $i;
	.min-w-#{$i}{
		min-width: #{$value}rem;
	}
	.w-#{$i}{
		width: #{$value}rem;
	}
	.min-h-#{$i}{
		min-width: #{$value}rem;
	}
	.h-#{$i}{
		width: #{$value}rem;
	}
}
@each $scrollbar in $general_scrollbar{
	.scrollbar-hidden-x#{$scrollbar}{
		@each $hidden_attr, $hidden_val in $general_scrollbar_hidden_x{
			#{$hidden_attr}:#{$hidden_val};
		}
		@if $scrollbar != ""{
			display:none;
		}
	}
	.scrollbar-hidden-y#{$scrollbar}{
		@each $hidden_attr, $hidden_val in $general_scrollbar_hidden_y{
			#{$hidden_attr}:#{$hidden_val};
		}
		@if $scrollbar != ""{
			display:none;
		}
	}
}
.w-full{
	width:100vw;
	width:100dvw;
}
.h-full{
	height:100vh;
	height:100dvh;
}
.scroll-target {
    position: absolute;
    top: 0;
    left: 0;
}