// mixins
@import (reference) "./mixins/_flex.less";
@import (reference) "./mixins/_logical-properties.less";

.flex-properties(~"");

@media (--screen-sm) {
  .flex-properties(--sm);
}

@media (--screen-md) {
  .flex-properties(--md);
}

@media (--screen-lg) {
  .flex-properties(--lg);
}

@media (--screen-xl) {
  .flex-properties(--xl);
}

/* Items */
.flex__inner {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  .margin(right, calc(-1 * var(--size-16)));
  .margin(left, calc(-1 * var(--size-16)));

  @media (--screen-sm) {
    .margin(right, calc(-1 * var(--size-24)));
    .margin(left, calc(-1 * var(--size-24)));
  }

  @media (--screen-md) {
    .margin(right, calc(-1 * var(--size-32)));
    .margin(left, calc(-1 * var(--size-32)));
  }

  @media (--screen-lg) {
    .margin(right, calc(-1 * var(--size-48)));
    .margin(left, calc(-1 * var(--size-48)));
  }
}

.flex__item {
  .padding(right, var(--size-16));
  .padding(left, var(--size-16));

  @media (--screen-sm) {
    .padding(right, var(--size-24));
    .padding(left, var(--size-24));
  }

  @media (--screen-md) {
    .padding(right, var(--size-32));
    .padding(left, var(--size-32));
  }

  @media (--screen-lg) {
    .padding(right, var(--size-48));
    .padding(left, var(--size-48));
  }
}

.flex__item--4 {
  flex: 0 0 calc(100% / 3);
  max-width: calc(100% / 3);

  &--md {
    @media (--screen-sm-max) {
      flex: 0 0 calc(100% / 3);
      max-width: calc(100% / 3);
    }
  }
}

.flex__item--8 {
  flex: 0 0 calc(100% / 1.5);
  max-width: calc(100% / 1.5);

  &--md {
    @media (--screen-sm-max) {
      flex: 0 0 calc(100% / 1.5);
      max-width: calc(100% / 1.5);
    }
  }
}

.flex__item--6 {
  flex: 0 0 50%;
  max-width: 50%;

  &--md {
    @media (--screen-sm-max) {
      flex: 0 0 50%;
      max-width: 50%;
    }
  }
}

.flex__item--12 {
  flex: 0 0 100%;
  max-width: 100%;

  &--md {
    @media (--screen-sm-max) {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }
}