// Gera espaçamentos para a propriedade informada
@mixin spacings($property, $breakpoint: null) {
  // Abrevia a propriedade
  $property-abbr: str-slice($property, 1, 1);

  // Inicializa um novo mapa de espaçamentos
  $new-map: (
    "0": "var(--spacing-none)",
  );

  // Percorre os índices do mapa de espaçamentos original
  @each $key in map-keys($spacings) {
    // Remove zeros à esquerda dos índices
    $new-key: remove-leading-zero($key);

    // Atualiza novo mapa de espaçamentos com os índices restantes
    $new-map: map-merge(
      $new-map,
      (
        "#{$new-key}": "var(--spacing-layout-#{$key})",
      )
    );
  }

  // Adiciona margem automática para novo mapa de espaçamentos
  @if $property == "margin" {
    $new-map: map-merge(
      $new-map,
      (
        "auto": "auto",
      )
    );
  }

  // Cria estilos usando o novo mapa de espaçamentos
  @each $key, $value in $new-map {
    $alias: if($breakpoint, #{$property-abbr}-#{$breakpoint}, #{$property-abbr});

    // Espaços sem direção específica
    .#{$alias}-#{$key} {
      #{$property}: #{$value};
    }

    // Específicos para margem
    @if $property == "margin" and $key != "0" and $key != "auto" {
      // Valor negativo
      .#{$alias}-n#{$key} {
        #{$property}: calc(#{$value} * -1);
      }
    }

    // Espaços em direções específicas
    @include s-spacings($property, $property-abbr, $key, $value, $breakpoint);

    // Espaços horizontais
    @include h-spacings($property, $property-abbr, $key, $value, $breakpoint);

    // Espaços verticais
    @include v-spacings($property, $property-abbr, $key, $value, $breakpoint);
  }
}

// Gera espaçamentos para as direções
@mixin s-spacings($property, $property-abbr, $key, $value, $breakpoint) {
  // Itera sobre as direções: top, right, bottom, left
  @each $direction in "top", "right", "bottom", "left" {
    $direction-abbr: str-slice($direction, 1, 1);
    $alias: if($breakpoint, #{$property-abbr}#{$direction-abbr}-#{$breakpoint}, #{$property-abbr}#{$direction-abbr});

    .#{$alias}-#{$key} {
      #{$property}-#{$direction}: #{$value};
    }

    // Específicos para margem
    @if $property == "margin" and $key != "0" and $key != "auto" {
      // Valor negativo
      .#{$alias}-n#{$key} {
        #{$property}-#{$direction}: calc(#{$value} * -1);
      }
    }
  }
}

// Gera espaçamentos horizontais
@mixin h-spacings($property, $property-abbr, $key, $value, $breakpoint) {
  $alias: if($breakpoint, #{$property-abbr}x-#{$breakpoint}, #{$property-abbr}x);

  .#{$alias}-#{$key} {
    #{$property}-left: #{$value};
    #{$property}-right: #{$value};
  }

  // Específicos para margem
  @if $property == "margin" and $key != "0" and $key != "auto" {
    // Valor negativo
    .#{$alias}-n#{$key} {
      #{$property}-left: calc(#{$value} * -1);
      #{$property}-right: calc(#{$value} * -1);
    }
  }
}

// Gera espaçamentos verticais
@mixin v-spacings($property, $property-abbr, $key, $value, $breakpoint) {
  $alias: if($breakpoint, #{$property-abbr}y-#{$breakpoint}, #{$property-abbr}y);

  .#{$alias}-#{$key} {
    #{$property}-bottom: #{$value};
    #{$property}-top: #{$value};
  }

  // Específicos para margem
  @if $property == "margin" and $key != "0" and $key != "auto" {
    // Valor negativo
    .#{$alias}-n#{$key} {
      #{$property}-bottom: calc(#{$value} * -1);
      #{$property}-top: calc(#{$value} * -1);
    }
  }
}