@import './var.less';

:root {
  --rv-space-gap: @space-gap;
}

.@{rv-prefix}-space {
  --gap: var(--rv-space-gap);
  display: inline-flex;
  gap: var(--gap);

  &__item {
    flex: none;
  }

  &--vertical {
    flex-direction: column;
  }
  &--horizontal {
    flex-direction: row;
  }
  &--wrap {
    flex-wrap: wrap;
  }
  &.@{rv-prefix}-space--block {
    display: flex;
  }
  &--align {
    &-center {
      align-items: center;
    }
    &-start {
      align-items: flex-start;
    }
    &-end {
      align-items: flex-end;
    }
    &-baseline {
      align-items: baseline;
    }
  }
  &--justify {
    &-center {
      justify-content: center;
    }
    &-start {
      justify-content: flex-start;
    }
    &-end {
      justify-content: flex-end;
    }
    &-between {
      justify-content: space-between;
    }
    &-around {
      justify-content: space-around;
    }
    &-evenly {
      justify-content: space-evenly;
    }
    &-stretch {
      justify-content: stretch;
    }
  }
}