Flex box gap polyfill with scss mixin

_polyfill.scss

@use 'sass:math';
@mixin _flex-gap($gap, $row: true) {
  $margin: math.div($gap, 2);
  $transform: -$margin;
  @if $row {
    margin-left: $transform;
    margin-right: $transform;
  } @else {
    margin-top: $transform;
    margin-bottom: $transform;
  }
  > * {
    @if $row {
      margin-left: $margin;
      margin-right: $margin;
    } @else {
      margin-top: $margin;
      margin-bottom: $margin;
    }
  }
}
 
@mixin flex-gap($gap, $flex-flow: 'row nowrap') {
  @if $flex-flow== 'row nowrap' or $flex-flow== 'row-reverse nowrap' {
    @include _flex-gap($gap, true);
  } @else if $flex-flow== 'column nowrap' or $flex-flow== 'column-reverse nowrap' {
    @include _flex-gap($gap, false);
  } @else if $flex-flow== 'row wrap' or $flex-flow== 'row-reverse wrap' {
    @include _flex-gap($gap, true);
    @include _flex-gap($gap, false);
  } @else if $flex-flow== 'column wrap' or $flex-flow== 'column-reverse wrap' {
    @include _flex-gap($gap, true);
    @include _flex-gap($gap, false);
  } @else {
    @error "The second paramater $flex-flow is set to be '#{$flex-flow}', which is illegal.";
  }
}

@mixin _flex-gap-unset($row: true) {
  $margin: 0;
  $transform: 0;
  @if $row {
    margin-left: $transform;
    margin-right: $transform;
  } @else {
    margin-top: $transform;
    margin-bottom: $transform;
  }
  > * {
    @if $row {
      margin-left: $margin;
      margin-right: $margin;
    } @else {
      margin-top: $margin;
      margin-bottom: $margin;
    }
  }
}
 
// unset flex-gap, used in @media screen width rules
@mixin flex-gap-unset($flex-flow: 'row nowrap') {
  @if $flex-flow== 'row nowrap' or $flex-flow== 'row-reverse nowrap' {
    @include _flex-gap-unset(true);
  } @else if $flex-flow== 'column nowrap' or $flex-flow== 'column-reverse nowrap' {
    @include _flex-gap-unset(false);
  } @else if $flex-flow== 'row wrap' or $flex-flow== 'row-reverse wrap' {
    @include _flex-gap-unset(true);
    @include _flex-gap-unset(false);
  } @else if $flex-flow== 'column wrap' or $flex-flow== 'column-reverse wrap' {
    @include _flex-gap-unset(true);
    @include _flex-gap-unset(false);
  } @else {
    @error "The second paramater $flex-flow is set to be '#{$flex-flow}', which is illegal.";
  }
}

demo.scss

@use 'polyfills';
.pagination__container {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  // gap: 6px;
  @include polyfills.flex-gap(6px, 'row wrap');
  .item__wrapper {
    flex: 1 1 auto;
    width: 100%;
    font-size: 24px;
  }
}

// to unset polyfill
.flex-box {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  @include polyfills.flex-gap(12px, 'row nowrap');
  @media screen and (max-width: 800px) {
    flex-flow: column nowrap;
    @include polyfills.flex-gap-unset('row nowrap');
    @include polyfills.flex-gap(12px, 'column nowrap');
  }
}

Note: Don't do so:

div.flex-gap
  div.another-flex-with-gap

The margin property of .another-flex-with-gap will be override by the mixin, but if you are not setting any margin to it, it's OK to write so.
Instead, if you are using margin, do so:

div.flex-gap
  div.flex-item__wrapper-with-margin-setting
    div.another-flex-with-gap