// Padding Classes
/*
  * This will create paddings 5-50 as
  * `padding-[top|right|bottom|left]: #;`
*/

@use 'sass:map';
@use '../../config' as CONFIG;

@mixin padding(
  $_start: map.get(CONFIG.$PADDING_INTERNAL, 'start'),
  $_end: map.get(CONFIG.$PADDING_INTERNAL, 'end'),
  $_multiplier: map.get(CONFIG.$PADDING_INTERNAL, 'incrementBy'),
) {
  $_positions: (
    'top',
    'bottom',
    'left',
    'right',
  );
  @if ($_start == 0) {
    .u-padding-0 {
      &#{&} {
        // stylelint-disable-next-line
        padding: 0 !important;
      }
    }
  }
  @each $position in $_positions {
    $value: $_start;
    @for $i from $_start through $_end {
      @if ($value < $_end) {
        $value: if($i == $_start, $value, $value + $_multiplier);
        .u-padding-#{$position}-#{$value} {
          &#{&} {
            padding-#{$position}: #{$value}px;
          }
        }
        @if ($position == 'top') {
          .u-padding-block-#{$value} {
            &#{&} {
              padding-block: #{$value}px;
              padding-top: #{$value}px;
              padding-bottom: #{$value}px;
            }
          }
        } @else if ($position == 'left') {
          .u-padding-inline-#{$value} {
            &#{&} {
              padding-inline: #{$value}px;
              padding-left: #{$value}px;
              padding-right: #{$value}px;
            }
          }
          .u-padding-all-#{$value} {
            &#{&} {
              padding: #{$value}px;
            }
          }
        }
      }
    }
  }
}