/* ==========================================================================
   Content builder.
   ========================================================================== */
.builder-row {
  position: relative;
  display: flex;
  margin-top: var(--space-m);
  margin-bottom: var(--space-m);
  margin-left: calc(var(--gutter-xs) * -1);
  margin-right: calc(var(--gutter-xs) * -1);

  > .builder-item {
    flex: 0 1 100%;
    position: relative;
    margin-left: var(--gutter-xs);
    margin-right: var(--gutter-xs);
    box-sizing: border-box;
  }
}

.builder-row-background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--gutter-xs);
  right: var(--gutter-xs);
  background: no-repeat center var(--color-fg-primary);
  background-size: cover;

  &:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .2);
  }
}

.layout--onecol {
  .dataviz {
    margin: var(--space-xl) auto;
  }

  &.layout--space {
    margin-top: 0;
  }
}

@media screen and (min-width: 80em) {
  .layout--twocol,
  .layout--threecol {
    > .builder-item {
      flex: 0 1 100%;
    }
  }

  .layout--twocol {
    &.l-33-67 {
      > .layout__region--first {
        flex: 0 1 33%;
      }

      > .layout__region--second {
        flex: 0 1 67%;
      }
    }

    &.l-67-33 {
      > .layout__region--first {
        flex: 0 1 67%;
      }

      > .layout__region--second {
        flex: 0 1 33%;
      }
    }
  }
}

@media screen and (max-width: 48em) {
  .builder-row {
    flex-wrap: wrap;
    margin-top: 0;

    > .builder-item {
      flex: 1 0 100%;
      margin-top: var(--space-l);
      margin-left: 0;
      margin-right: 0;
    }
  }
}

/* Builder with sidebar(s).
   ========================================================================== */
.content-builder.l-sidebar {
  display: flex;
  flex-direction: column;
}

.content-builder-main {
  flex: 1;
}

.content-builder-sidebar {
  width: 100%;
  margin-bottom: var(--space-l);
  padding: 0 var(--gutter-m);
  background: var(--color-bg-secondary);
  box-sizing: border-box;

  .l-breadcrumb-fixed & {
    padding-top: 70px;
  }

  .builder-item {
    margin-top: 0;
  }
}

.content-builder-sidebar--left {
  order: -1;
}

@media screen and (min-width: 48em) {
  .content-builder.l-sidebar {
    flex-direction: row;
  }

  .content-builder-sidebar {
    flex-shrink: 0;
    margin-top: calc(var(--space-xl) * -1);
    margin-bottom: 0;
    width: var(--layout-builder-sidebar-width);

    .is-front & {
      padding-top: calc(var(--space-xl) - var(--space-m));
    }
  }

  .content-builder-sidebar-inner {
    position: fixed;
    height: 66.67%;
    margin-top: var(--space-m);
    width: calc(var(--layout-builder-sidebar-width) - var(--gutter-xl));
    overflow-y: auto;
    overflow-x: hidden;

    .is-front & {
      height: 100%;
    }
    .is-front:not(.is-reset) &,
    .is-reset & {
      position: relative;
    }

    .is-sidebar-toggle-open & {
      padding-right: var(--gutter-xs);
    }
  }
}

/* ==========================================================================
   Fixer.
   ========================================================================== */
.fixer-sidebar-container {
  &.is-fixed,
  &.is-bottom {
    .fixer-sidebar-element {
      position: fixed;
      top: var(--header-height);
      border-radius: 0;
    }

    &.toolbar-fixed .fixer-sidebar-element {
      top: calc(var(--header-height) + 39px);
    }
    &.toolbar-fixed.toolbar-horizontal.toolbar-tray-open .fixer-sidebar-element {
      top: calc(var(--header-height) + 78px);
    }
  }
}