$desktop-grid-breakpoint: 1068px;
$new-breakpoint-list: map-merge($theme-site-header-breakpoints, (desktop-grid-breakpoint: $desktop-grid-breakpoint));

@mixin create-row() {
  display: flex;
  margin-right: -$grid-gutter-width * 0.5;
  margin-left: -$grid-gutter-width * 0.5;
}

.page-grid {
  @include create-row();
  flex-direction: column;

  @media (min-width: $desktop-grid-breakpoint) {
    flex-direction: row;
  }

  &__left-col {
    @include make-col-ready();
    flex: 0 0 100%;
    order: 1;

    @each $breakpoint, $width in sort-map-by-values($new-breakpoint-list, asc) {
      @if ($width >= $desktop-grid-breakpoint) {
        @media (min-width: $width) {
          top: calc(calculate-navbar-height-for($breakpoint) + $grid-gutter-width * 0.5);
          height: calc(100vh - calculate-navbar-height-for($breakpoint) - $grid-gutter-width * 0.5);
        }
      }
    }

    @media (min-width: $desktop-grid-breakpoint) {
      position: sticky;
      flex: 0 0 330px;
      order: 0;
      max-width: 330px;
      overflow: scroll;
      opacity: 1;
      transition-duration: 375ms;
      transition-property: width, max-width, padding, opacity;
      will-change: width, max-width, padding, opacity;
    }

    > * {
      margin-bottom: map-get($spacers, block);
      &:last-child {
        margin-bottom: 0;
      }
    }
    .ad-container {
      &--max-width-728,
      &--max-width-300 {
        max-width: 100%;
      }
      @media (min-width: $desktop-grid-breakpoint) {
        &--max-width-728 {
          max-width: 728px;
        }
        &--max-width-300 {
          max-width: 300px;
        }
      }
    }
  }

  &__right-col {
    @include make-col-ready();
    order: 0;

    @media (min-width: $desktop-grid-breakpoint) {
      order: 1;
      max-width: 870px;
    }
  }

  &__top-row {
    @include create-row();
    @include media-breakpoint-down(sm) {
      flex-wrap: wrap;
    }
  }

  &__top-left-col {
    @include make-col-ready();
  }

  &__top-right-col {
    @include make-col-ready();
    flex: 0 0 320px;
    max-width: 320px;
    margin-top: 41px;

    transition-duration: 375ms;
    transition-property: max-width, margin;
    will-change: max-width, margin;
    @include media-breakpoint-down(sm) {
      flex: 0 0 100%;
      max-width: 100%;
      margin-top: 0;
    }

    > * {
      margin-bottom: map-get($spacers, block);
      @include media-breakpoint-down(sm) {
        margin-right: auto;
        margin-left: auto;
      }
    }
  }

  &__bottom-row {
    @include create-row();
    flex-wrap: wrap;
  }

  // Generic col
  // @todo add infix ops to these!
  &__col {
    @include make-col-ready();

    &--full {
      @include make-col(12);
    }

    &--half {
      @include make-col(6);
      @include media-breakpoint-down(sm) {
        @include make-col(12);
      }
    }

    &--bottom-spacer {
      margin-bottom: map-get($spacers, block);
    }

    &--top-spacer {
      margin-top: map-get($spacers, block);
    }

    &--body-bg {
      padding-top: $grid-gutter-width;
      padding-bottom: $grid-gutter-width;
      background-color: $body-bg;
    }

    &--flex {
      display: flex;
    }

    &--no-gutters {
      padding-right: 0;
      padding-left: 0;
    }

    &--content-page {
      @include make-col(12);
      padding-top: $grid-gutter-width;
      padding-right: 50px;
      padding-left: 50px;
      @include media-breakpoint-down($theme-responsive-text-breakpoint) {
        padding-right: $marko-web-page-wrapper-padding * 2;
        padding-left: $marko-web-page-wrapper-padding * 2;
      }
    }
  }
}