$base: ".space";

#{$base} {
  display: inline-flex;
  --gap-vertical: var(--gap);
  --gap-horizontal: var(--gap);

  &#{$base}-block {
    display: flex;
  }

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

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

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

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

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

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

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

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

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

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

  &-align-baseline {
    align-items: baseline;
  }

  &-horizontal {
    flex-direction: row;

    >#{$base}-item {
      margin-right: var(--gap-horizontal);

      &:last-child {
        margin-right: 0;
      }
    }
  }

  &-vertical {
    flex-direction: column;

    >#{$base}-item {
      margin-bottom: var(--gap-vertical);

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  &-wrap {
    flex-wrap: wrap;
    margin-bottom: calc(var(--gap-vertical) * -1);
  }

  #{$base}-item {
    flex: none;
  }
}
