@use 'sass:math';

.zent-row {
  box-sizing: border-box;
  display: flex;

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

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

    &-center {
      justify-content: center;
    }

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

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

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

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

    &-center {
      align-items: center;
    }

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

.zent-col {
  box-sizing: border-box;
  display: block;
}

.zent-col-0 {
  display: none;
}

@for $i from 1 through 24 {
  $percent: math.div($i, 24) * 100%;

  .zent-col-#{$i} {
    width: $percent;
  }

  .zent-col-offset-#{$i} {
    margin-left: $percent;
  }

  .zent-col-order-#{$i} {
    order: $i;
  }
}