/*
 * clearfix
 * for custom layout-container
 * source: https://www.cssmojo.com/the-very-latest-clearfix-reloaded/
 */
#off-canvas:after,
#below-header:after,
#below-header-2:after,
#above-main-content:after,
#above-footer:after {
  content:"";
  display:block;
  clear:both;
}

#wrapper {
  overflow-x: hidden;
}
#main {
  display: flex;
  flex-wrap: wrap;

  > .inside {
    order: 2;
    width: 100%;
  }

  > #above-main-content {
    order: 1;
    width: 100%;
  }
}

[class*="layout-sidebar"] {
  #container {
    @include make-row();
    /*
     * ls_contentWrapper must be included after make-row() to make sure that the necessary
     * auto margins left and right are not overridden by the bootstrap row. Otherwise the
     * container would not be centered.
     */
    @include ls_contentWrapper;

    #left {
      @include make-col-ready();
      padding-left: 0;
      order: 1;
    }

    #main {
      @include make-col-ready();
      order: 2;
    }

    #right {
      @include make-col-ready();
      order: 3;
    }
  }

  &.layout-sidebar-left {
    #container {
      #left {
        @include media-breakpoint-up(9, $grid-breakpoints-ls) {
          @include make-col(3);
        }
        @include media-breakpoint-down(8, $grid-breakpoints-ls) {
          padding-right: 0;
        }
      }

      #main {
        padding-right: 0;

        @include media-breakpoint-up(9, $grid-breakpoints-ls) {
          @include make-col(9);
        }
        @include media-breakpoint-down(8, $grid-breakpoints-ls) {
          padding-left: 0;
        }
      }
    }
  }

  &.layout-sidebar-right {
    #container {
      #main {
        padding-left: 0;

        @include media-breakpoint-up(9, $grid-breakpoints-ls) {
          @include make-col(9);
        }
        @include media-breakpoint-down(8, $grid-breakpoints-ls) {
          padding-right: 0;
        }
      }

      #right {
        @include media-breakpoint-up(9, $grid-breakpoints-ls) {
          @include make-col(3);
        }
        @include media-breakpoint-down(8, $grid-breakpoints-ls) {
          padding-left: 0;
        }
      }
    }
  }

  &.layout-sidebar-left-right {
    #container {
      #left {
        @include media-breakpoint-up(9, $grid-breakpoints-ls) {
          @include make-col(3);
        }
        @include media-breakpoint-down(8, $grid-breakpoints-ls) {
          padding-right: 0;
        }
      }

      #main {
        @include media-breakpoint-up(9, $grid-breakpoints-ls) {
          @include make-col(9);
        }
        @include media-breakpoint-down(8, $grid-breakpoints-ls) {
          padding-left: 0;
        }
        @include media-breakpoint-up(12, $grid-breakpoints-ls) {
          @include make-col(6);
        }
        @include media-breakpoint-down(11, $grid-breakpoints-ls) {
          padding-right: 0;
        }
      }

      #right {
        @include media-breakpoint-up(9, $grid-breakpoints-ls) {
          @include make-col(3);
        }
        @include media-breakpoint-up(12, $grid-breakpoints-ls) {
          padding-right: 0;
        }
        @include media-breakpoint-down(11, $grid-breakpoints-ls) {
          padding-left: 0;
        }
        @include media-breakpoint-down(8, $grid-breakpoints-ls) {
          padding-right: 0;
        }
      }
    }
  }
}