@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";

.layout {
  $footer-height: 287px;

  margin: 0 auto;
  width: 100%;

  /*
   * For IE10+
   */
  display: flex;
  flex-direction: column;
  @supports (display: grid) {
    display: grid;
  }
  grid-template-rows: auto 1fr max-content;
  grid-template-areas: "h" "c" "f";
  min-height: 100vh;
  grid-auto-rows: 1fr;

  &--show-filter {
    grid-template-rows: auto auto 1fr $footer-height;
    -ms-grid-rows: 50px 50px 30px 1fr $footer-height; // 1 extra row for gap
    grid-template-areas: "h" "." "c" "f";
  }

  /*
   * For IE10+
   */

  &--show-filter &__content {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
  }

  &--show-filter &__filter-bar {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }

  @include skillbox-colors;

  &__header {
    grid-area: h;
  }

  &__content {
    padding: 0 $small-spacing;

    @include desktop {
      padding: 0;
    }
  }


  &__footer {
    grid-area: f;
    // we usually set the margin to the bottom and the right, but here we want the footer to always have
    // this margin, and we don't want to set it on every content element. And we don't want to set it on
    // the content element, for if there's no footer.
    margin-top: 3*$large-spacing;

    padding: 0 $small-spacing;

    @include desktop {
      padding: 0;
    }
  }
}