@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$row: () !default;
$row: map.merge(
  (
    v-gap: 0,
    h-gap: 0,
    column-display: block
  ),
  $row
);

.#{$namespace}-row {
  &-vars {
    @include define-preset-values('row', $row);
  }

  @include basis {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    row-gap: value('row-v-gap');
    margin-inline: calc(-0.5 * value('row-h-gap'));
  }

  @include inherit-color;

  &--start {
    justify-content: flex-start;
  }

  &--end {
    justify-content: flex-end;
  }

  &--center {
    justify-content: center;
  }

  &--space-around {
    justify-content: space-around;
  }

  &--space-between {
    justify-content: space-between;
  }

  &--space-evenly {
    justify-content: space-evenly;
  }

  &--top {
    align-items: flex-start;
  }

  &--middle {
    align-items: center;
  }

  &--bottom {
    align-items: flex-end;
  }
}