// Builder Pattern
//==================================================//
// NOTE: Duplicates some CSS from the List/Detail pattern in 'controls/_layouts.scss', could be more DRY

// has similar properties to a "scrollable" .page-container
.builder {
  font-size: 0;

  .back {
    margin-left: 23px;
    position: relative;
    top: -3px;
  }

  .compound-field > .field {
    margin-right: 10px;
  }

  // Both main areas are scrollable-y
  .main,
  .sidebar {
    display: inline-block;
    height: 100%;
    position: relative;
    vertical-align: top;
  }

  .sidebar {
    border-right: 0;
    width: 250px;

    // remove the Listview's default BG color when used inside a builder sidebar
    .listview {
      background-color: transparent;
      border-right: 1px solid $builder-border-color;
    }

    .header {
      border-right: 1px solid $header-border-color;

      .toolbar {
        padding-right: 5px;
      }
    }
  }

  .main {
    width: calc(100% - 250px);
  }

  .l-pull-right.listview-micro {
    top: 48px;
  }

  .nowrap {
    white-space: nowrap;
  }
}

.builder-pane {
  height: 100%;
}

.builder-header {
  background-color: $builder-header-bg-color;
  min-height: 75px;

  &.is-personalizable {
    @include transition(background-color 500ms ease 0s);
  }

  .toolbar {
    margin: 7px 20px;
    padding-top: 10px;
  }

  h1,
  h2,
  h3,
  h4 {
    color: $header-text-color;
    display: inline-block;
    margin-bottom: 0;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    top: 10px;
    vertical-align: top;
  }

  h2 {
    top: -1px;

    .panel-subhead {
      height: 20px;
    }
  }

  .panel-subhead {
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .panel-title {
    line-height: 3rem;
  }
}

.builder-content {
  height: calc(100% - 75px);

  &.no-sidebar {
    .builder-actions {
      width: 100%;
    }
  }
}

.builder-actions,
.builder-sidebar {
  display: inline-block;
  height: 100%;
  padding-top: 10px;
  vertical-align: top;
}

.builder-actions {
  background-color: $builder-actions-bg-color;
  width: calc(100% - 323px);

  > .listview {
    overflow: visible;
  }
}

.builder-sidebar {
  background-color: $builder-sidebar-bg-color;
}

.builder-actions-header,
.builder-sidebar-header,
.builder-actions-footer,
.builder-sidebar-footer {
  margin: 0 20px;
}

.builder-actions-header,
.builder-sidebar-header {
  height: 50px;

  > * {
    display: inline-block;
    vertical-align: middle;
  }

  // vertical alignment fix
  &::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 1px;
  }
}

.builder-actions-content {
  margin: 10px 20px;
}

.builder-sidebar {
  width: 320px;

  > .modal-buttonset {
    margin: 0 -20px;
  }
}

.builder-sidebar-content {
  height: calc(100% - 150px);

  > .listview {
    height: 100%;
  }
}

.builder-sidebar-footer {
  height: 75px;
  margin-top: 10px;
}

.edit-profile {
  .bold {
    font-weight: $ids-number-font-weight-bold;
  }

  .builder-sidebar-content {
    height: calc(100% - 260px);
  }

  .listview {
    &.alternate-row {
      ul {
        padding: 0 20px;
      }

      li {
        border: 0;
        padding: 20px 10px;
      }
    }

    .l-pull-right {
      margin-top: -20px;
      top: auto;
    }
  }

  .builder-sidebar-footer {
    margin-top: 0;
  }

  .cart-totals {
    border-top: 1px solid $listview-border-color;
    padding: 15px 10px;

    p + p {
      margin: 0;
    }

    .totals {
      font-weight: $ids-number-font-weight-bold;
      margin-top: 10px;
    }
  }

  &.popdown {
    .cart-totals {
      padding: 10px;
    }
  }
}

@include respond-to(phone) {
  // Animate the same way list/detail pattern works
  .page-container.builder {
    .main,
    .sidebar {
      @include transform-transition-list(300ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

      display: block;
      position: absolute;
      width: 100%;
    }

    .main {
      @include css3(transform, translateX(100%));
    }

    .sidebar {
      @include css3(transform, translateX(0));
    }

    &.show-detail {
      .main {
        @include css3(transform, translateX(0));
      }

      .sidebar {
        @include css3(transform, translateX(-100%));
      }
    }
  }
}

#builder-popdown-content {
  .l-pull-right.listview-micro {
    top: 48px;
  }
}

// Inside the builder pane, the cart will show up as a popupmenu when on Tablet view-size and lower, so hide the cart
// @media screen and (max-width: 1585px) {

@include respond-to(tabletdown) {
  .builder-actions {
    display: block;
    width: auto;
  }

  .builder-sidebar {
    display: none;
  }
}