@mixin abstract-gutters() {
  --unitone--padding: var(--unitone--s4);

  padding-top: var(--unitone--padding);
  padding-bottom: var(--unitone--padding);

  @for $i from -3 through 7 {
    &[data-unitone-layout~="-padding\:#{ $i }"] {
      --unitone--padding: var(--unitone--s#{ $i }) !important;
    }
  }

  @for $i from 1 through 7 {
    &[data-unitone-layout~="-padding\:#{ $i }s"] {
      --unitone--padding: var(--unitone--s#{ $i }s) !important;
    }
  }

  @for $i from 2 through 7 {
    &[data-unitone-layout~="-padding\:#{ $i }m"] {
      --unitone--padding: var(--unitone--s#{ $i }m) !important;
    }
  }
}

@mixin gutters() {
  [data-unitone-layout~="gutters"] {
    @include abstract-gutters();
  }
}