@import 'variable';

#{$biz-css-prefix} {
  &section {
    display: grid;
    box-sizing: border-box;
    padding-left: var(--page-padding-lr);
    padding-right: var(--page-padding-lr);

    &-head {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }

    &-block-wrapper {
      display: grid;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      height: 100%;
      gap: var(--page-block-gap);
    }

    &-inner--with-head {
      display: flex;
      flex: 1 1 auto;
      width: 100%;
      max-width: var(--page-max-content-width);
      margin: 0 auto;
      gap: var(--page-block-gap);
    }

    &-inner-without-head {
      max-width: var(--page-max-content-width);
      margin: 0 auto;
    }

    &--no-gap {
      margin-bottom: 0;
    }

    &-title #{$biz-css-prefix}p,
    &-title {
      color: var(--page-section-title-font-color);
    }

    &-extra #{$biz-css-prefix}p,
    &-extra {
      color: var(--page-section-extra-font-color);
    }

    &-no-padding {
      padding: 0;
    }
  }

  &page-content--with-nav &section,
  &page-content--with-aside &section {
    padding-left: 0;
    padding-right: 0;
  }

  &page-content--with-nav &section-inner,
  &page-content--with-aside &section-inner {
    max-width: none;
  }
}

@each $colNum in $columnNumEnum {
  #{$biz-css-prefix}page--col-#{$colNum} {
    #{$biz-css-prefix}section-block-wrapper,
    #{$biz-css-prefix}section-inner {
      grid-template-columns: repeat($colNum, 1fr);
    }

    @for $i from ($colNum + 1) through $maxNumberOfColumns {
      #{$biz-css-prefix}block--span-#{$i} {
        grid-column: span $colNum;
      }
    }

    @for $i from 1 through $colNum {
      #{$biz-css-prefix}block--span-#{$i} {
        grid-column: span $i;
      }
    }
  }
}

#{$biz-css-prefix}page--no-padding #{$biz-css-prefix}section {
  padding-left: 0;
  padding-right: 0;
}