@import '../../styles/main';

@mixin columnArragement($spacing, $smallSpacing: 20px) {
  @for $i from 1 through 4 {
    $colsCount: 1;

    &[data-columns='#{$i}'] {
      & > * {
        width: calc(100% / #{$colsCount});
        margin-bottom: $smallSpacing;
      }

      @media #{$screen-only-sm} {
        $smCols: if($i - 1 > 0, $i - 1, 1);

        /* stylelint-disable-next-line */
        & > * {
          width: calc(100% / #{$smCols} - #{ceil($smallSpacing - $smallSpacing / $smCols)});
          @if #{$smCols} > 1 {
            margin-right: $smallSpacing;
          } @else {
            margin-right: 0;
          }
        }

        & > *:nth-child(#{$smCols}n) {
          margin-right: 0;
        }
      }

      @media #{$screen-md} {
        & > * {
          width: calc(100% / #{$i} - #{ceil($spacing - $spacing / $i)});
          margin-right: $spacing;
          margin-bottom: $spacing;
        }

        & > *:nth-child(#{$i}n) {
          margin-right: 0;
        }
      }
    }
  }
}

.ColumnsLayout {
  @include columnArragement(32px);

  display: flex;
  flex-wrap: wrap;

  &--large {
    @include columnArragement(90px);
  }
}
