@use "functions" as _functions;
@use "variables" as _variables;
@use "breakpoints" as _bp;


// --------------------------------------------------------------------------
// Mixins - Scope to this module to generate utility classes
// --------------------------------------------------------------------------

// WITH responsive variants
@mixin utility-responsive($utility, $property) {
   @if type-of($utility) != "map" {
      @error "#{$utility} in your config file is not a map.";
   }

   @each $breakpoint in map-keys(_variables.$s-breakpoints) {
      $prefix: _functions.breakpoint-prefix($breakpoint, _variables.$s-breakpoints);

      @each $class, $value in $utility {
         @include _bp.media-up($breakpoint) {
            .#{$prefix}#{$class} { #{$property}: #{$value}; }
         }
      }
   }

}

// WITHOUT responsive variants
@mixin utility($utility, $property) {

   @each $class, $value in $utility {
      .#{$class} {
         #{$property}: $value;
         // add some class if text-overflow
         @if $property == "text-overflow" {
            overflow: hidden;
            white-space: nowrap;
         }
      }
   }

}


// --------------------------------------------------------------------------
//  Font and text
// --------------------------------------------------------------------------

// Font weight
@if _variables.$s-font-weights {
   @include utility(_variables.$s-font-weights, "font-weight" );
}

// Text Alignment
@if _variables.$s-text-align {
   @include utility-responsive(_variables.$s-text-align, "text-align" );
}

// Text Decoration
@if _variables.$s-text-decoration {
   @include utility-responsive(_variables.$s-text-decoration, "text-decoration" );
}

// Text Transform
@if _variables.$s-text-transform {
   @include utility-responsive(_variables.$s-text-transform, "text-transform" );
}


// --------------------------------------------------------------------------
// Aspect Ratio classes
// --------------------------------------------------------------------------

// New aspect-Ratio property
@if _variables.$s-aspect-ratios {
   @include utility-responsive(_variables.$s-aspect-ratios, "aspect-ratio" );
}


// --------------------------------------------------------------------------
// Grid utility classes
// --------------------------------------------------------------------------

// New aspect-Ratio property
@if _variables.$s-grid-flow {
   @include utility-responsive(_variables.$s-grid-flow, "grid-auto-flow" );
}


// --------------------------------------------------------------------------
// Flexbox utility classes
// --------------------------------------------------------------------------


// flex-direction
@if _variables.$s-flex-direction {
   @include utility-responsive(_variables.$s-flex-direction, "flex-direction" );
}

// justify-content
@if _variables.$s-justify-content {
   @include utility-responsive(_variables.$s-justify-content, "justify-content" );
}

// align-items
@if _variables.$s-align-items {
   @include utility-responsive(_variables.$s-align-items, "align-items" );
}



// --------------------------------------------------------------------------
//  Displays and positions / Positioning
// --------------------------------------------------------------------------

// Display
@if _variables.$s-displays {
   @include utility-responsive(_variables.$s-displays, "display" );
}

// Positions
@if _variables.$s-positions {
   @include utility-responsive(_variables.$s-positions, "position" );
}