/* ==========================================================================
   Content builder.
   ========================================================================== */
.content-builder {
  &.l-sidebar {
    .content-body {
      min-height: 66vh;
    }
  }
}
.content-builder-sidebar {
  margin-top: 0;
  box-shadow: var(--box-shadow-l);
  padding: 0 var(--gutter-xs);
  background: var(--color-white);

  .content-builder-sidebar-inner {
    position: relative;
  }

  /* Toggle.
     ========================================================================== */
  &.js-sidebar-toggle {
    &:not(.is-open) {
      width: 115px;
      overflow: hidden;

      .fixer-element {
        width: 95px;
        overflow: hidden;
      }
      .block--richtext,
      .nav--detail .item-title,
      .nav--detail .level-2 {
        display: none;
      }
    }
  }
  .nav-toggle {
    position: relative;
    left: -8px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #000;
    font-size: 20px;
    line-height: 1;
    background: none;
    transition: all .2s ease-in-out, width 0s;

    &:active,
    &.is-active,
    &:focus,
    &:hover {
      opacity: .6;
    }

    &:before {
      background-color: var(--color-primary);
    }
  }

  /* States.
   ========================================================================== */
  .is-sidebar-toggle-open & {
    padding: 0 var(--gutter-m);
  }
  &.is-fixed,
  &.is-bottom {
    .content-builder-sidebar-inner {
      position: fixed;
      top: 170px;
    }
  }
  &.is-open {
    .nav-toggle {
      transform: rotateY(180deg);
    }
  }

  /* Responsive.
     ========================================================================== */
  @media screen and (min-width: 48em) {
    &.js-sidebar-toggle .content-builder-sidebar-inner {
      margin-top: 0;
    }
    .nav-toggle {
      display: inline-flex;
    }
  }
  @media screen and (max-width: 48em) {
    &.js-sidebar-toggle .content-builder-sidebar-inner {
      margin-top: var(--space-l);
    }
  }
}

/* ==========================================================================
   Fixed layout builder.
   ========================================================================== */
.fixer-layout-builder-row-container {
  &.is-fixed,
  &.is-bottom {
    --top: 92px;
    --height: 125px;

    .fixer-layout-builder-row-element {
      padding-bottom: var(--height);

      > .builder-item {
        position: fixed;
        z-index: 50;
        top: var(--top);
        left: 10px;
        right: 10px;
      }
    }
    .l-sidebar .fixer-layout-builder-row-element > .builder-item {
      left: 125px;
    }

    &.toolbar-fixed .fixer-layout-builder-row-element > .builder-item {
      top: calc(var(--top) + 38px);

      /* Responsive.
         ========================================================================== */
      @media screen and (max-width: 48em) {
        top: 88px;
      }
    }
    &.toolbar-fixed.toolbar-horizontal.toolbar-tray-open .fixer-layout-builder-row-element > .builder-item {
      top: calc(var(--top) + 78px);
    }
  }
}
.is-sidebar-toggle-open.fixer-layout-builder-row-container {
  &.is-fixed,
  &.is-bottom {
    .l-sidebar .fixer-layout-builder-row-element > .builder-item {
      left: 370px;

      /* Responsive.
         ========================================================================== */
      @media screen and (max-width: 48em) {
        left: 0;
        width: 100%;
      }
    }
  }
}