@use'../variables' as*;

//Variable
$transform-sizes: (
    1: 45,
    2: 90,
    3: 180,
    4: 270
);

// Skew X with positive value
@each $key, $value in $transform-sizes {
  .fui-skew-x-#{$key} {
    transform: skewX($value+deg);
  }
}

// Skew X with negative value
@each $key, $value in $transform-sizes {
    .fui-skew-x-n-#{$key} {
        transform: skewX(-$value+deg);
    }
  }

// Skew Y with positive value
@each $key, $value in $transform-sizes {
.fui-skew-y-#{$key} {
    transform: skewY($value+deg);
}
}

// Skew Y with negative value
@each $key, $value in $transform-sizes {
    .fui-skew-y-n-#{$key} {
        transform: skewY(-$value+deg);
    }
}

// Skew with positive value
@each $key, $value in $transform-sizes {
.fui-skew-#{$key} {
    transform: skew($value+deg);
}
}

// Skew with negative value
@each $key, $value in $transform-sizes {
    .fui-skew-n-#{$key} {
        transform: skewY(-$value+deg);
    }
}

// Rotate with positive value utilities
@each $key, $value in $transform-sizes {
.fui-rotate-#{$key} {
    transform: rotate($value+deg);
}
}

// Rotate with negative value
@each $key, $value in $transform-sizes {
    .fui-skew-n-#{$key} {
        transform: rotate(-$value+deg);
    }
}