@use 'sass:map';

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

$space: () !default;
$space: map.merge(
  (
    v-gap: 8px,
    h-gap: 12px
  ),
  $space
);

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

  @include basis {
    display: flex;
    flex-wrap: wrap;
    gap: value('space-v-gap') value('space-h-gap');
  }

  @include inherit-color;

  &--inline {
    display: inline-flex;
  }

  &--vertical {
    flex-direction: column;
  }

  &--no-wrap {
    flex-wrap: nowrap;
  }

  &--no-gap {
    gap: unset;
  }

  &--small {
    @include define-preset-values(
      'space',
      (
        v-gap: 4px,
        h-gap: 8px
      )
    );
  }

  &--large {
    @include define-preset-values(
      'space',
      (
        v-gap: 12px,
        h-gap: 16px
      )
    );
  }

  &__item {
    display: flex;
    max-width: 100%;
  }
}