@use '../../compiled/tokens/scss/scale';
@use '../../mixins/media-query';
@use '../../mixins/ms';

@mixin _direction-utilities($property, $name, $value, $suffix: '') {
  $value: $value !important;

  @if $property != margin and $property != padding {
    @error 'Unknown direction utility property #{$property}.';
  }

  &-#{$name}#{$suffix} {
    @if $property == margin {
      margin: $value;
    } @else {
      padding: $value;
    }
  }

  // Ideally we could use the *-block shorthand, but it is not as well supported
  // in browsers.
  &-block-#{$name}#{$suffix} {
    @if $property == margin {
      margin-block-end: $value;
      margin-block-start: $value;
    } @else {
      padding-block-end: $value;
      padding-block-start: $value;
    }
  }

  &-block-start-#{$name}#{$suffix} {
    @if $property == margin {
      margin-block-start: $value;
    } @else {
      padding-block-start: $value;
    }
  }

  &-block-end-#{$name}#{$suffix} {
    @if $property == margin {
      margin-block-end: $value;
    } @else {
      padding-block-end: $value;
    }
  }

  // Ideally we could use the *-inline shorthand, but it is not as well
  // supported in browsers.
  &-inline-#{$name}#{$suffix} {
    @if $property == margin {
      margin-inline-end: $value;
      margin-inline-start: $value;
    } @else {
      padding-inline-end: $value;
      padding-inline-start: $value;
    }
  }

  &-inline-start-#{$name}#{$suffix} {
    @if $property == margin {
      margin-inline-start: $value;
    } @else {
      padding-inline-start: $value;
    }
  }

  &-inline-end-#{$name}#{$suffix} {
    @if $property == margin {
      margin-inline-end: $value;
    } @else {
      padding-inline-end: $value;
    }
  }
}

@mixin _scale-utilities(
  $property,
  $minimum-step: scale.$modular-minimum-step,
  $maximum-step: scale.$modular-maximum-step,
  $base: 1em,
  $suffix: ''
) {
  @if $property == margin {
    @include _direction-utilities(
      $property: $property,
      $name: auto,
      $value: auto,
      $suffix: $suffix
    );
  }

  @for $step
    from scale.$modular-minimum-step
    through scale.$modular-maximum-step
  {
    $name: ms.step-class-segment($step);

    @include _direction-utilities(
      $property: $property,
      $name: $name,
      $value: ms.step($step, $base),
      $suffix: $suffix
    );
  }

  @include _direction-utilities(
    $property: $property,
    $name: none,
    $value: 0,
    $suffix: $suffix
  );
}

.u-pad {
  @include _scale-utilities($property: padding);
}

.u-space {
  @include _scale-utilities($property: margin);
}

.u-pull {
  @include _scale-utilities($property: margin, $base: -1em);
}

@include media-query.breakpoint-loop() using ($key) {
  $suffix: '\\@#{$key}';

  .u-pad {
    @include _scale-utilities($property: padding, $suffix: $suffix);
  }

  .u-space {
    @include _scale-utilities($property: margin, $suffix: $suffix);
  }

  .u-pull {
    @include _scale-utilities($property: margin, $base: -1em, $suffix: $suffix);
  }
}