/**
 * AppBuckets UI
 *
 * _Helpers @ src/styles/_core/_helpers.scss
 *
 * Defined at 05 giu 2020
 * Copyright Marco Cavanna • 2020
 *
 * ---
 * Helpers class generation
 *
 */

/******
    Typography Helpers
******/

/// Generate Text Size Helpers
@if $generate-font-weight-helpers-class == true {
  @each $label, $weight in $font-weight-map {
    @include selectors-for-each-breakpoint('has-font-#{$label}', $selectors-with-breakpoint: $generate-font-weight-responsive-helpers-class) {
      font-weight: $weight !important;
    }
  }
}

/// Generate Alignment Class
@if $generate-text-align-helpers-class == true {
  @each $align in (center, right, left, justify) {
    @include selectors-for-each-breakpoint('has-text-#{$align}', $selectors-with-breakpoint: $generate-text-align-responsive-helpers-class) {
      text-align: $align !important;
    }
  }
}


/******
    Size Helpers
******/

/// Generate Text Size Helpers
@if $generate-text-size-helpers-class == true {
  @each $label, $size in (extra-small: .5em, small: .75em, normal: 1em, large: 1.5em, big: 2.5em, huge: 4em) {
    @include selectors-for-each-breakpoint('is-#{$label}', $selectors-with-breakpoint: $generate-text-size-responsive-helpers-class) {
      font-size: $size !important;
    }
  }
}


/******
    Colors Helpers
******/

/// Generate Text Color Helpers Class
@if $generate-text-color-helpers-class == true {
  @each $label, $color in $ui-color-map {
    @include selectors-for-each-breakpoint('has-text-#{$label}', $selectors-with-breakpoint: $generate-text-color-responsive-helpers-class) {
      color: $color !important;
    }
  }
}

/// Generate Background Color Helpers Class
@if $generate-background-color-helpers-class == true {
  @each $label, $color in $ui-color-map {
    @include selectors-for-each-breakpoint('has-background-#{$label}', $selectors-with-breakpoint: $generate-background-color-responsive-helpers-class) {
      @include variation-style(
        $properties-list: background-color,
        $color: $color,
        $apply-as-important: true
      )
    }
  }
}


/******
    Spacer Helpers
******/

/// Generate Margin and Padding Helpers
@if $generate-margin-padding-helpers-class == true and $margin-padding-helpers-count != 0 {
  @for $sp from 0 through $margin-padding-helpers-count {
    // Get Spacer
    $_spacer: get-spacer($sp);

    // Divide margin and padding
    @each $property, $prefix in (margin: 'm', padding: 'p') {
      // Generate Masters Classes
      @include selectors-for-each-breakpoint('#{$prefix}-#{$sp}', $selectors-with-breakpoint: $generate-margin-padding-responsive-helpers-class) {
        #{$property}: #{$_spacer}em !important;
      }

      @include selectors-for-each-breakpoint('#{$prefix}x-#{$sp}', $selectors-with-breakpoint: $generate-margin-padding-responsive-helpers-class) {
        #{$property}-left: #{$_spacer}em !important;
        #{$property}-right: #{$_spacer}em !important;
      }

      @include selectors-for-each-breakpoint('#{$prefix}y-#{$sp}', $selectors-with-breakpoint: $generate-margin-padding-responsive-helpers-class) {
        #{$property}-top: #{$_spacer}em !important;
        #{$property}-bottom: #{$_spacer}em !important;
      }

      // Generate direction helpers (like pt-4)
      @each $direction, $label in (top: 't', bottom: 'b', left: 'l', right: 'r') {
        @include selectors-for-each-breakpoint('#{$prefix}#{$label}-#{$sp}', $selectors-with-breakpoint: $generate-margin-padding-responsive-helpers-class) {
          #{$property}-#{$direction}: #{$_spacer}em !important;
        }
      }
    }
  }
}


/******
    Box Utilities (Shadow, Visibility, Display)
******/

/// Generate Height Shadow Class
@if $generate-height-box-shadow-helpers-class == true and $height-box-shadow-count != 0 {
  @for $elevation from 0 through $height-box-shadow-count {
    .elevation-#{$elevation} {
      @include dpShadow($elevation);
    }
  }

  @for $elevation from 0 through $height-smooth-box-shadow-count {
    .smooth-elevation-#{$elevation} {
      @include smoothShadow($elevation);
    }
  }
}

/// Generate Display Helpers
@if $generate-display-helpers-class == true {
  @each $display in (block, grid, inline-block, inline-flex, inline, flex, table, table-column-group, table-header-group, table-footer-group, table-row-group, table-cell, table-column, table-row, none) {
    @include selectors-for-each-breakpoint('is-#{$display}', $selectors-with-breakpoint: $generate-display-responsive-helpers-class) {
      display: $display !important;
    }
  }
}