/* Spacers utility classes */

// loop for each spacer
@each $key,
$value in $spacers {

  .p-#{$key} {
    padding: $value;
  }

  .pt-#{$key} {
    padding-top: $value;
  }

  .pr-#{$key} {
    padding-right: $value;
  }

  .pb-#{$key} {
    padding-bottom: $value;
  }

  .pl-#{$key} {
    padding-left: $value;
  }

  .px-#{$key} {
    padding-left: $value;
    padding-right: $value;
  }

  .py-#{$key} {
    padding-top: $value;
    padding-bottom: $value;
  }

  .m-#{$key} {
    margin: $value;
  }

  .mt-#{$key} {
    margin-top: $value;
  }

  .mr-#{$key} {
    margin-right: $value;
  }

  .mb-#{$key} {
    margin-bottom: $value;
  }

  .ml-#{$key} {
    margin-left: $value;
  }

  .mx-#{$key} {
    margin-left: $value;
    margin-right: $value;
  }

  .my-#{$key} {
    margin-top: $value;
    margin-bottom: $value;
  }

  // loop for each breakpoint
  @each $bp,
  $bpv in $breakpoints {

    @media (min-width: #{$bpv}) {
      .#{$bp}\:p-#{$key} {
        padding: $value;
      }

      .#{$bp}\:pt-#{$key} {
        padding-top: $value;
      }

      .#{$bp}\:pr-#{$key} {
        padding-right: $value;
      }

      .#{$bp}\:pb-#{$key} {
        padding-bottom: $value;
      }

      .#{$bp}\:pl-#{$key} {
        padding-left: $value;
      }

      .#{$bp}\:px-#{$key} {
        padding-left: $value;
        padding-right: $value;
      }

      .#{$bp}\:py-#{$key} {
        padding-top: $value;
        padding-bottom: $value;
      }

      .#{$bp}\:m-#{$key} {
        margin: $value;
      }

      .#{$bp}\:mt-#{$key} {
        margin-top: $value;
      }

      .#{$bp}\:mr-#{$key} {
        margin-right: $value;
      }

      .#{$bp}\:mb-#{$key} {
        margin-bottom: $value;
      }

      .#{$bp}\:ml-#{$key} {
        margin-left: $value;
      }

      .#{$bp}\:mx-#{$key} {
        margin-left: $value;
        margin-right: $value;
      }

      .#{$bp}\:my-#{$key} {
        margin-top: $value;
        margin-bottom: $value;
      }
    }
  }

}