// Copyright (C) 2018 The Trustees of Indiana University
// SPDX-License-Identifier: BSD-3-Clause

@use '../core' as *;

/* stylelint-disable */

// Spacing direction values
// NOTE: using "-bottom" will break the original version of the bottom utility classes
// That used "-btm" for class names. The documentation needs to be updated to reflect
// This change.
$spacing-directions: (
  null,
  -top,
  -right,
  -bottom,
  -left
);

// Spacing size values
// NOTE you can reference these sizes in core/_variables.scss

$spacing-sizes: (
  -xxs: $spacing-xxs,
  -xs: $spacing-xs,
  -sm: $spacing-sm,
  -md: $spacing-md,
  -lg: $spacing-lg,
  -xl: $spacing-xl,
  -xxl: $spacing-xxl,
  -3-xl: $spacing-3-xl,
  -4-xl: $spacing-4-xl
);

// Super gnarly loop here, but it saves sooo much time

// Based on this great example by Harry Roberts:
// https://github.com/NHSLeadership/nightingale/blob/develop/utilities/_utilities.spacing.scss#L48

@each $direction in $spacing-directions {
  @each $size, $value in $spacing-sizes {
    // NOTE: We use !important here because we want these utilities to always
    // produce the same result.

    // If the direction is "null", add margin to all directions.
    @if $direction == null {
      .#{$prefix}-m-all#{$size} {
        margin: $value !important;
      }

      .#{$prefix}-p-all#{$size} {
        padding: $value !important;
      }

      .#{$prefix}-m-tb#{$size} {
        margin-bottom: $value !important;
        margin-top: $value !important;
      }

      .#{$prefix}-m-lr#{$size} {
        margin-left: $value !important;
        margin-right: $value !important;
      }

      .#{$prefix}-p-tb#{$size} {
        padding-bottom: $value !important;
        padding-top: $value !important;
      }

      .#{$prefix}-p-lr#{$size} {
        padding-left: $value !important;
        padding-right: $value !important;
      }

      // Otherwise create individual direction utilities.
    }

    @else {
      .#{$prefix}-m#{$direction}#{$size} {
        margin#{$direction}: $value !important;
      }
      
      .-#{$prefix}-m#{$direction}#{$size} {
        margin#{$direction}: -$value !important;
      }

      .#{$prefix}-p#{$direction}#{$size} {
        padding#{$direction}: $value !important;
      }
    }
  } // End $spacing-sizes loop
} // End $spacing-directions loop

// Builds responsive spacing classes

// TODO: This can be refactored to use fewer nested loops

@each $variable, $size in $breakpoints {
  @include mq($size) {
    @each $direction in $spacing-directions {
      @each $suffix, $refs in $spacing-sizes {
        // NOTE: We use !important here because we want these utilities to always
        // produced the same result.

        // If the direction is "null", add margin to all directions.
        @if $direction == null {
          .#{$prefix}-m-all#{$suffix}-#{$variable}-up {
            margin: $refs !important;
          }

          .#{$prefix}-p-all#{$suffix}-#{$variable}-up {
            padding: $refs !important;
          }

          .#{$prefix}-m-tb#{$suffix}-#{$variable}-up {
            margin-bottom: $refs !important;
            margin-top: $refs !important;
          }

          .#{$prefix}-m-lr#{$suffix}-#{$variable}-up {
            margin-left: $refs !important;
            margin-right: $refs !important;
          }

          .#{$prefix}-p-tb#{$suffix}-#{$variable}-up {
            padding-bottom: $refs !important;
            padding-top: $refs !important;
          }

          .#{$prefix}-p-lr#{$suffix}-#{$variable}-up {
            padding-left: $refs !important;
            padding-right: $refs !important;
          }

          // Otherwise create individual direction utilities.
        }

        @else {
          .#{$prefix}-m#{$direction}#{$suffix}-#{$variable}-up {
            margin#{$direction}: $refs !important;
          }
          
          .-#{$prefix}-m#{$direction}#{$suffix}-#{$variable}-up {
            margin#{$direction}: -$refs !important;
          }

          .#{$prefix}-p#{$direction}#{$suffix}-#{$variable}-up {
            padding#{$direction}: $refs !important;
          }
        }
      } // End $spacing-sizes loop
    } // End $spacing-directions loop
  }
}

// This loop creates classes that remove margin and padding from
// an element.

// NOTE: Adding the "-none" alias here without un-prefixed version
// because the "-none" alias is totally new. We will always prefix every
// class with "rvt-" moving forward.
@each $direction in $spacing-directions {
  @if $direction == null {
    .#{$prefix}-m-all-remove,
    .#{$prefix}-m-all-none {
      margin: 0 !important;
    }

    .#{$prefix}-m-tb-remove,
    .#{$prefix}-m-tb-none {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }

    .#{$prefix}-m-lr-remove,
    .#{$prefix}-m-lr-none {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    .#{$prefix}-p-all-remove,
    .#{$prefix}-p-all-none {
      padding: 0 !important;
    }

    .#{$prefix}-p-tb-remove,
    .#{$prefix}-p-tb-none {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }

    .#{$prefix}-p-lr-remove,
    .#{$prefix}-p-lr-none {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }

  @else {
    .#{$prefix}-m#{$direction}-remove,
    .#{$prefix}-m#{$direction}-none {
      margin#{$direction}: 0 !important;
    }

    .#{$prefix}-p#{$direction}-remove,
    .#{$prefix}-p#{$direction}-none {
      padding#{$direction}: 0 !important;
    }
  }
} // End remove loop

// NOTE: Adding the "-none" alias to the responsive classes without
// un-prefixed version because the "-none" alias is totally new. We will
// always prefix every class with "rvt-" moving forward.
@each $variable, $size in $breakpoints {
  @include mq($size) {
    @each $direction in $spacing-directions {
      @if $direction == null {
        .#{$prefix}-m-all-none-#{$variable}-up {
          margin: 0 !important;
        }

        .#{$prefix}-p-all-none-#{$variable}-up {
          padding: 0 !important;
        }

        .#{$prefix}-m-tb-none-#{$variable}-up {
          margin-top: 0 !important;
          margin-bottom: 0 !important;
        }

        .#{$prefix}-p-tb-none-#{$variable}-up {
          padding-top: 0 !important;
          padding-bottom: 0 !important;
        }

        .#{$prefix}-m-lr-none-#{$variable}-up {
          margin-right: 0 !important;
          margin-left: 0 !important;
        }

        .#{$prefix}-p-lr-none-#{$variable}-up {
          padding-right: 0 !important;
          padding-left: 0 !important;
        }
      }

      @else {
        .#{$prefix}-m#{$direction}-none-#{$variable}-up {
          margin#{$direction}: 0 !important;
        }

        .#{$prefix}-p#{$direction}-none-#{$variable}-up {
          padding#{$direction}: 0 !important;
        }
      }
    }
  }
}

/* stylelint-enable */