@import (reference) "./_logical-properties.less";

.spacing(@postfix, @spacer) {
  .spacing-global(@postfix, @spacer);
  .spacing-vertical(@postfix, @spacer);
  .spacing-horizontal(@postfix, @spacer);
}

.spacing-global(@postfix, @spacer) {
  .m-a-@{postfix} {
    margin-top: @spacer !important;
    .margin-for-spacing(right, @spacer) !important;

    margin-bottom: @spacer !important;
    .margin-for-spacing(left, @spacer) !important;
  }

  .p-a-@{postfix} {
    padding-top: @spacer !important;
    .padding-for-spacing(right, @spacer) !important;

    padding-bottom: @spacer !important;
    .padding-for-spacing(left, @spacer) !important;
  }
}

.spacing-vertical(@postfix, @spacer) {
  .m-t-@{postfix} {
    margin-top: @spacer !important;
  }

  .m-b-@{postfix} {
    margin-bottom: @spacer !important;
  }

  .m-y-@{postfix} {
    margin-top: @spacer !important;
    margin-bottom: @spacer !important;
  }

  .p-t-@{postfix} {
    padding-top: @spacer !important;
  }

  .p-b-@{postfix} {
    padding-bottom: @spacer !important;
  }

  .p-y-@{postfix} {
    padding-top: @spacer !important;
    padding-bottom: @spacer !important;
  }
}

.spacing-horizontal(@postfix, @spacer) {
  .m-l-@{postfix} {
    .margin-for-spacing(left, @spacer) !important;
  }

  .m-r-@{postfix} {
    .margin-for-spacing(right, @spacer) !important;
  }

  .m-x-@{postfix} {
    .margin-for-spacing(left, @spacer) !important;
    .margin-for-spacing(right, @spacer) !important;
  }

  .p-l-@{postfix} {
    .padding-for-spacing(left, @spacer) !important;
  }

  .p-r-@{postfix} {
    .padding-for-spacing(right, @spacer) !important;
  }

  .p-x-@{postfix} {
    .padding-for-spacing(left, @spacer) !important;
    .padding-for-spacing(right, @spacer) !important;
  }
}

.responsive-spacing(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop) {
  .responsive-spacing-global(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop);
  .responsive-spacing-vertical(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop);
  .responsive-spacing-horizontal(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop);
}

.responsive-spacing-global(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop) {
  .spacing-global(@postfix, @spacing-mobile);

  @media (--screen-sm) {
    .spacing-global(@postfix, @spacing-tablet);
  }

  @media (--screen-lg) {
    .spacing-global(@postfix, @spacing-desktop);
  }
}
.responsive-spacing-vertical(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop) {
  .spacing-vertical(@postfix, @spacing-mobile);

  @media (--screen-sm) {
    .spacing-vertical(@postfix, @spacing-tablet);
  }

  @media (--screen-lg) {
    .spacing-vertical(@postfix, @spacing-desktop);
  }
}

.responsive-spacing-horizontal(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop) {
  .spacing-horizontal(@postfix, @spacing-mobile);

  @media (--screen-sm) {
    .spacing-horizontal(@postfix, @spacing-tablet);
  }

  @media (--screen-lg) {
    .spacing-horizontal(@postfix, @spacing-desktop);
  }
}