@import 'variable.scss';

#{$biz-css-prefix}page {
  &-header {
    margin-bottom: var(--page-section-gap);
    padding: var(--page-padding-tb) var(--page-header-padding-lr) var(--page-block-padding-tb);

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

    &--dividing {
      border-bottom: var(--line-1) solid var(--page-header-divider-color);
    }

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

    &--fixed {
      position: fixed;
      width: 100%;
      left: 0;
      top: 0;
      z-index: var(--elevation-4);
    }
  }

  &-footer {
    margin-top: var(--page-section-gap);
    flex: 0 0 auto;
    padding: var(--page-block-padding-tb) var(--page-footer-padding-lr) var(--page-padding-tb);

    &--dividing {
      border-top: var(--line-1) solid var(--page-header-divider-color);
    }

    &--fixed {
      position: fixed;
      width: 100%;
      left: 0;
      bottom: 0;
      z-index: var(--elevation-4);
    }
  }

  &-header,
  &-footer {
    box-sizing: border-box;

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

    &-inner {
      box-sizing: border-box;
      margin-left: auto;
      margin-right: auto;
      max-width: var(--page-max-content-width);
    }
  }

  &-header--fullwidth &-header-inner,
  &-footer--fullwidth &-footer-inner {
    max-width: none;
  }
}

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

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