@use "sass:math";
@import "mixins/mixins";
@import "common/var";
.el-space {
  display: flex;
  flex-grow: 1;
  @include e(item) {
    flex: 0 0 auto;
  }
  @include when(inline){
    display: inline-flex;
  }
  @include when(wrap){
    flex-wrap: wrap;
  }
  @include when(horizontal){
    flex-direction: row;
    &.el-space-size__mini {
      .el-space-item, .el-space-split {
        margin-right: $--space-mini-size;
      }
    }
    &.el-space-size__small {
      .el-space-item, .el-space-split {
        margin-right: $--space-small-size;
      }
    }
    &.el-space-size__default {
      .el-space-item, .el-space-split {
        margin-right: $--space-default-size;
      }
    }
    &.el-space-size__medium {
      .el-space-item, .el-space-split {
        margin-right: $--space-medium-size;
      }
    }
    @include when(split){
      &.el-space-size__mini {
        .el-space-item, .el-space-split {
          margin-right: #{math.div($--space-mini-size, 2)};
        }
      }
      &.el-space-size__small {
        .el-space-item, .el-space-split {
          margin-right: #{math.div($--space-small-size, 2)};
        }
      }
      &.el-space-size__default {
        .el-space-item, .el-space-split {
          margin-right: #{math.div($--space-default-size, 2)};
        }
      }
      &.el-space-size__medium {
        .el-space-item, .el-space-split {
          margin-right: #{math.div($--space-medium-size, 2)};
        }
      }
    }
  }
  @include when(vertical){
    flex-direction: column;
    &.el-space-size__mini {
      .el-space-item, .el-space-split {
        margin-bottom: $--space-mini-size;;
      }
    }
    &.el-space-size__small {
      .el-space-item, .el-space-split {
        margin-bottom: $--space-small-size;;
      }
    }
    &.el-space-size__default {
      .el-space-item, .el-space-split {
        margin-bottom: $--space-default-size;
      }
    }
    &.el-space-size__medium {
      .el-space-item, .el-space-split {
        margin-bottom: $--space-medium-size;
      }
    }
    @include when(split){
      &.el-space-size__mini {
        .el-space-item, .el-space-split {
          margin-bottom: #{math.div($--space-mini-size, 2)};
        }
      }
      &.el-space-size__small {
        .el-space-item, .el-space-split {
          margin-bottom: #{math.div($--space-small-size, 2)};
        }
      }
      &.el-space-size__default {
        .el-space-item, .el-space-split {
          margin-bottom: #{math.div($--space-default-size, 2)};
        }
      }
      &.el-space-size__medium {
        .el-space-item, .el-space-split {
          margin-bottom: #{math.div($--space-medium-size, 2)};
        }
      }
    }
  }
  &-align__start {
    align-items: flex-start;
  }
  &-align__center {
    align-items: center;
  }
  &-align__end {
    align-items: flex-end;
  }
  &-align__stretch {
    align-items: stretch;
  }
  &-justify__start {
    justify-content: flex-start;
  }
  &-justify__center {
    justify-content: center;
  }
  &-justify__end {
    justify-content: flex-end;
  }
  &-justify__space-between {
    justify-content: space-between;
  }
}