/* ------------------------------------ *\
   Spacing Utilities
\* ------------------------------------ */

/**
 * Extra options not in the spacing system
 */
$bolt-spacing-system-extras: (
  'auto': auto,
  'none': 0,
);

@each $size in $bolt-spacing-system-extras {
  $size-name: nth($size, 1);
  $size-value: nth($size, 2);

  @each $prop in $bolt-spacing-prop-system {
    $prop-name: nth($prop, 1);

    .u-bolt-#{$prop-name}-#{$size-name} {
      #{$prop-name}: #{$size-value} !important;
    }

    @each $direction in $bolt-spacing-direction-system {
      $axis: '';

      @if $direction != top and $direction != bottom {
        $axis: 'x';
      } @else {
        $axis: 'y';
      }

      .u-bolt-#{$prop-name}-#{$direction}-#{$size-name} {
        #{$prop-name}-#{$direction}: #{$size-value} !important;
      }

      @each $breakpoint in $bolt-breakpoints {
        $breakpoint-name: nth($breakpoint, 1);

        @include bolt-mq(#{$breakpoint-name}) {
          .u-bolt-#{$prop-name}-#{$direction}-#{$size-name}\@#{$breakpoint-name} {
            #{$prop-name}-#{$direction}: #{$size-value} !important;
          }
        }
      }
    }
  }
}

/**
 * Regular options in the spacing system
 */
@each $size in $bolt-spacing-multiplier-system {
  $size-name: nth($size, 1);

  @each $prop in $bolt-spacing-prop-system {
    $prop-name: nth($prop, 1);

    // All directions
    .u-bolt-#{$prop-name}-#{$size-name} {
      #{$prop-name}: var(--bolt-spacing-y-#{$size-name})
        var(--bolt-spacing-x-#{$size-name}) !important;
    }

    // Responsive all directions
    @each $breakpoint in $bolt-breakpoints {
      $breakpoint-name: nth($breakpoint, 1);

      @include bolt-mq(#{$breakpoint-name}) {
        .u-bolt-#{$prop-name}-#{$size-name}\@#{$breakpoint-name} {
          #{$prop-name}: var(--bolt-spacing-y-#{$size-name})
            var(--bolt-spacing-x-#{$size-name}) !important;
        }
      }
    }

    // One direction
    @each $direction in $bolt-spacing-direction-system {
      $axis: '';

      @if $direction != top and $direction != bottom {
        $axis: 'x';
      } @else {
        $axis: 'y';
      }

      .u-bolt-#{$prop-name}-#{$direction}-#{$size-name} {
        #{$prop-name}-#{$direction}: var(
          --bolt-spacing-#{$axis}-#{$size-name}
        ) !important;
      }

      // Responsive one direction
      @each $breakpoint in $bolt-breakpoints {
        $breakpoint-name: nth($breakpoint, 1);

        @include bolt-mq(#{$breakpoint-name}) {
          .u-bolt-#{$prop-name}-#{$direction}-#{$size-name}\@#{$breakpoint-name} {
            #{$prop-name}-#{$direction}: var(
              --bolt-spacing-#{$axis}-#{$size-name}
            ) !important;
          }
        }
      }
    }
  }
}

/**
 * Negative margins
 */
@each $size in $bolt-spacing-multiplier-system {
  $size-name: nth($size, 1);

  @each $direction in $bolt-spacing-direction-system {
    $axis: '';

    @if $direction != top and $direction != bottom {
      $axis: 'x';
    } @else {
      $axis: 'y';
    }

    .u-bolt-negative-margin-#{$direction}-#{$size-name} {
      margin-#{$direction}: calc(
        var(--bolt-spacing-#{$axis}-#{$size-name}) * -1
      ) !important;
    }
  }
}

/**
 * @todo: [Mai] We need to deprecate these sizeless names.
 */
@each $prop in $bolt-spacing-prop-system {
  $prop-name: nth($prop, 1);

  .u-bolt-#{$prop-name} {
    #{$prop-name}: var(--bolt-spacing-y-medium)
        var(--bolt-spacing-x-medium) !important;
  }

  @each $direction in $bolt-spacing-direction-system {
    $axis: '';

    @if $direction != top and $direction != bottom {
      $axis: 'x';
    } @else {
      $axis: 'y';
    }

    .u-bolt-#{$prop-name}-#{$direction} {
      #{$prop-name}-#{$direction}: var(
        --bolt-spacing-#{$axis}-medium
      ) !important;
    }
  }
}

/**
 * @todo: [Mai] We need to deprecate these magic options.
 */
@each $size in $bolt-spacing-multiplier-system {
  $size-name: nth($size, 1);

  // All directions
  .u-bolt-padding-#{$size-name}-squished {
    padding: calc(var(--bolt-spacing-y-#{$size-name}) / 2)
      var(--bolt-spacing-x-#{$size-name}) !important;
  }

  // Responsive all directions
  @each $breakpoint in $bolt-breakpoints {
    $breakpoint-name: nth($breakpoint, 1);

    @include bolt-mq(#{$breakpoint-name}) {
      .u-bolt-padding-#{$size-name}-squished\@#{$breakpoint-name} {
        padding: calc(var(--bolt-spacing-y-#{$size-name}) / 2)
          var(--bolt-spacing-x-#{$size-name}) !important;
      }
    }
  }
}