@import '../settings/variables';
@import '../tools/mixins/position';
@import '../tools/mixins/breakpoints';

.o-page-layout {
  &--bottom-space {
    margin-bottom: 240px;
  }
  &__header {
    width: 100%;
    z-index: $layer-fixed;
  }

  &__sub-header {
    width: 100%;
    z-index: $layer-sticky;
    margin: 0;
  }

  &__content {
    padding-top: $mobile-header-item-height;

    &--alternate {
      background-color: $color-background-alternative;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
    }
  }

  &__table-header {
    width: 100%;
    z-index: $layer-sticky;
    background-color: $color-background;
  }

  &--sticky-header {
    @include media-breakpoint-up(md) {
      .o-page-layout__header {
        @include fixed(0, auto, auto, 0);

        @media print {
          position: initial;
        }
      }
      .o-page-layout__sub-header {
        @include fixed($header-height, auto, auto, 0);
        margin-left: $aside-width;

        @media print {
          position: initial;
        }

        &--earnings {
          background-color: $color-background;
          position: static;
          margin-left: 0;

          @include media-breakpoint-up(lg) {
            @include sticky($header-height, auto, auto, 0);
          }
        }
      }
      .o-page-layout__content {
        padding-top: $headers-summary-height;

        @media print {
          padding-top: initial;
        }
        &--alternate-sub-bar {
          padding-top: $headers-summary-height-big-mobile;
          @include media-breakpoint-up(sm) {
            padding-top: $headers-summary-height-big;
          }
          @media print {
            padding-top: initial;
          }
        }

        &--no-sub-header {
          padding-top: $header-height;

          @media print {
            padding-top: initial;
          }
        }
      }

      .o-page-layout__table-header {
        @include sticky($header-height, 0, 0, 0);

        &--no-mobile {
          position: initial;

          @include media-breakpoint-up(xl) {
            @include sticky($header-height, 0, 0, 0);
          }
        }

        &--with-sub {
          @include sticky($headers-summary-height, 0, 0, 0);

          .o-page-layout__table-header--no-mobile {
            position: initial;

            @include media-breakpoint-up(xl) {
              @include sticky($headers-summary-height, 0, 0, 0);
            }
          }
        }
        &--with-sub-big {
          @include sticky($headers-summary-height-big, 0, 0, 0);

          @include media-breakpoint-up(lg) {
            @include sticky(calc(#{$headers-summary-height-big} + (2 * #{$sub-bar-border})), 0, 0, 0);
          }

          .o-page-layout__table-header--no-mobile {
            position: initial;
          }
        }
      }
    }
  }
}