@import "../styles/prefix";
@import "../styles/variables";

.#{$component-prefix}flex-item {
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 1px * $hd;
}

@for $i from 1 through 24 {
  .#{$component-prefix}flex-item-#{$i} {
    flex: 0 0 $i * calc(100% / 24);
    max-width: $i * calc(100% / 24);
  }

  .#{$component-prefix}flex-item-offset-#{$i} {
    margin-left: $i * calc(100% / 24) * $hd;
  }
}