@use "sass:map";
@use "sass:math";
@use "../variables/spacing";
@use "../variables/typography";
@use "../tools/media";

/*
 * ------------------------------------------
 * Spacing is created with rem rather than px
 * units as when users use a custom font size
 * some browsers handle the resize of rem and
 * em separately from px which causes spacing
 * and layout issues, so to ensure everything
 * remaians consistent we use rem for spacing
 * and typography. The original intention was
 * separation so that we could scale the type
 * without affecting spacing, but in practice
 * there are too many ways to change the font
 * size in various browsers and devices
 * ------------------------------------------
 */
@function space($size) {
  // @return #{$size * spacing.$spacing-unit-px}px;
  @return #{$size}rem;
}

%space-above {
  margin-top: space(2);
  @extend %no-space-above-for-first-children;
}

%space-only-above {
  margin: #{space(2)} 0 0;
  @extend %no-space-above-for-first-children;
}

%no-space-above-for-first-children {
  &:first-child {
    margin-top: 0;
  }
}

@mixin space-above($zero-other-margins: false) {
  @if $zero-other-margins {
    @extend %space-only-above;
  } @else {
    @extend %space-above;
  }
}

@mixin no-spacing-generator($suffix: "") {
  @if $suffix != "" {
    $suffix: "-" + $suffix;
  }
  @each $property in margin, padding {
    @each $direction in top, bottom {
      $combined-direction: "";
      @if $direction == top or $direction == bottom {
        $combined-direction: vertical;
      } @else if $direction == right or $direction == left {
        $combined-direction: horizontal;
      }
      @if $combined-direction {
        .tna-\!--no-#{$property}-#{$direction}#{$suffix},
        .tna-\!--no-#{$property}-#{$combined-direction}#{$suffix} {
          #{$property}-#{$direction}: 0 !important;
        }
      } @else {
        .tna-\!--no-#{$property}-#{$direction}#{$suffix} {
          #{$property}-#{$direction}: 0 !important;
        }
      }
    }
  }
}

@mixin spacing-generator($suffix: "") {
  @each $property in margin, padding {
    @each $direction in top, bottom {
      @each $size, $amount in spacing.$spacing {
        @if $direction == all {
          .tna-\!--#{$property}-#{$size} {
            #{$property}: #{space($amount)} !important;
          }
        } @else {
          $combined-direction: "";
          @if $direction == top or $direction == bottom {
            $combined-direction: vertical;
          } @else if $direction == right or $direction == left {
            $combined-direction: horizontal;
          }
          @if $combined-direction {
            .tna-\!--#{$property}-#{$direction}-#{$size},
            .tna-\!--#{$property}-#{$combined-direction}-#{$size} {
              #{$property}-#{$direction}: #{space($amount)} !important;
            }
          } @else {
            .tna-\!--#{$property}-#{$direction}-#{$size} {
              #{$property}-#{$direction}: #{space($amount)} !important;
            }
          }
        }
      }
    }
  }

  @include media.on-mobile {
    @each $property in margin, padding {
      @each $direction in top, bottom {
        @each $size, $amount in spacing.$spacing-mobile {
          @if $direction == all {
            .tna-\!--#{$property}-#{$size} {
              #{$property}: #{space($amount)} !important;
            }
          } @else {
            $combined-direction: "";
            @if $direction == top or $direction == bottom {
              $combined-direction: vertical;
            } @else if $direction == right or $direction == left {
              $combined-direction: horizontal;
            }
            @if $combined-direction {
              .tna-\!--#{$property}-#{$direction}-#{$size},
              .tna-\!--#{$property}-#{$combined-direction}-#{$size} {
                #{$property}-#{$direction}: #{space($amount)} !important;
              }
            } @else {
              .tna-\!--#{$property}-#{$direction}-#{$size} {
                #{$property}-#{$direction}: #{space($amount)} !important;
              }
            }
          }
        }
      }
    }
  }
}