@mixin row {
  display: flex;
  flex-direction: row;
}
@mixin column {
  display: flex;
  flex-direction: column;
}

@mixin centered {
  align-self: center;
  justify-self: center;
}
@mixin centering {
  align-items: center;
  justify-content: center;
}
@mixin space-between {
  align-items: center;
  justify-content: space-between;
}

$units: 5;
@mixin gap($size) {
  gap: var(--unit-#{$size});
}
@mixin gap_classes {
  @for $i from 0 through $units {
    &.gap-#{$i} { 
      @include gap($i);
    }
  }
}

@mixin basis($value) {
  width: $value;
  flex-basis: $value;
}
@mixin basis-20 {
  @include basis(20%);
}
@mixin basis-25 {
  @include basis(25%);
}
@mixin basis-50 {
  @include basis(50%);
}
@mixin basis-75 {
  @include basis(75%);
}
@mixin basis-100 {
  @include basis(100%);
}

@mixin basis_classes {
  &.basis-20 { @include basis-20(); }
  &.basis-25 { @include basis-25(); }
  &.basis-50 { @include basis-50(); }
  &.basis-75 { @include basis-75(); }
  &.basis-100 { @include basis-100(); }
}