// List Detail Pattern
//================================================== //

// Common design between List/Detail and Builder Patterns
.list-detail {
  font-size: 0;
  height: 100%;

  > .main,
  > .sidebar {
    position: relative;
  }

  > .main {
    background-color: $panel-bg-color;
    border-left: 0;
    height: 100%;

    &.alternate {
      background-color: $body-color-primary-background;
    }

    .main-content {
      display: block;
      height: 100%;
      position: static;

      > .toolbar {
        margin-top: 3px;
      }
    }

    .tab-panel-container {
      height: calc(100% - 40px);
    }

    .tab-panel {
      padding-top: 0;
      position: relative;
    }
  }

  > .sidebar {
    border-right: 0;

    .sidebar-content {
      display: block;
      height: 100%;
      position: static;
    }

    .listview,
    .listview-search {
      border-right: 1px solid $panel-border-color;
    }

    .accordion {
      height: 100%;
    }

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

      .toolbar {
        padding-right: 5px;
      }

      &.azure07 {
        border-right: 1px solid $ids-color-palette-azure-90;
      }

      .title {
        width: calc(100% - 41px);
      }

      .buttonset {
        width: 40px;
      }
    }

    .pager-toolbar {
      border-top: 1px solid $panel-border-color;
      margin: 0;
      position: relative;
    }

    .pager-toolbar {
      display: flex;
      justify-content: center;
      padding: 4px 10px 0;

      &.two-button {
        justify-content: space-between;
      }

      > li {
        align-items: stretch;
      }
    }

    .pager-pagesize {
      float: none;

      .btn-menu {
        margin-right: 0;
        min-width: 0;
      }
    }

    .expandable-area {
      border-right: 1px solid $panel-border-color;
    }
  }

  > .header + .sidebar {
    height: calc(100% - 60px);

    .listview-search + .listview.paginated {
      height: calc(100% - 87px);
    }

    .pager-toolbar {
      border-right: 1px solid $panel-border-color;
    }

    .listview.paginated {
      height: calc(100% - 77px);
    }
  }

  .panel-header {
    height: auto;
    padding: 0 0 1px 13px;

    .toolbar {
      height: 42px;
      margin-bottom: 0;

      .title {
        padding: 3px 0 0;
      }
    }

    > * {
      vertical-align: middle;
    }

    .list-detail-back-button.secondary,
    .list-detail-list-close-button {
      display: none;
      right: 2px;
      top: 1px;
    }

    h2 {
      margin: 0;
    }

    > h2 {
      margin: 8px 0;
    }

    > button {
      float: right;
    }
  }

  &.bleeding-edge {
    .list-detail-back-button {
      opacity: 1;
    }
  }
}

.list-detail-back-button.secondary,
.list-detail-list-close-button {
  display: none;
}

// RTL Styles
html[dir='rtl'] {
  .list-detail {
    .panel-header {
      padding-left: 0;

      .toolbar .title {
        padding-right: 0;
      }
    }

    .card-header {
      padding: 2px 20px 2px 15px;

      > button {
        float: left;
      }
    }
  }
}

// In List-Detail View, Main/Sidebar slide left/right instead of being stacked
@include respond-to(phone) {
  .list-detail-back-button,
  .list-detail-list-close-button {
    display: inline-block;
  }

  .card-header {
    .list-detail-list-close-button {
      display: inline-block;
    }
  }

  .modal-content {
    .list-detail {
      .sidebar {
        transform: none;
      }

      .main.is-right-side {
        transform: none;
        margin-left: 3px;
        border: unset;
      }
    }
  }

  .list-detail {
    overflow: hidden;

    > .main,
    > .sidebar {
      @include transform-transition-list(300ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

      position: absolute;

      &.scrollable,
      &.scrollable-y {
        height: 100%;
        overflow: auto;
      }
    }

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

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

    &.bleeding-edge__phone {
      > .main {
        @include css3(transform, translateX(0));

        width: 100%;
      }

      > .sidebar {
        @include transform-transition-list(300ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
        box-shadow 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94));
        @include drawer-box-shadow;

        z-index: 2;
      }

      &.fixed {
        > .sidebar {
          max-width: 250px;
        }
      }

      &.fixed-sm {
        > .sidebar {
          max-width: 275px;
        }
      }

      &.fixed-mm {
        > .sidebar {
          max-width: 300px;
        }
      }

      &.fixed-md {
        > .sidebar {
          max-width: 350px;
        }
      }

      &.fixed-lg {
        > .sidebar {
          max-width: 400px;
        }
      }

      &.fixed-xl {
        > .sidebar {
          max-width: 450px;
        }
      }
    }

    &.show-detail {
      &:not(.bleeding-edge__phone, .bleeding-edge__tablet) {
        > .main {
          @include css3(transform, translateX(0));
        }
      }

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

      &.bleeding-edge__phone {
        > .sidebar {
          box-shadow: 0 0 0 1px $box-shadow-off-color;
        }

        .list-detail-back-button {
          opacity: 1;
        }
      }
    }
  }

  // Remove excess left-margin in this scenario
  .header .toolbar .title .list-detail-back-button + h1 {
    margin-left: 0;
  }

  // RTL makes everything come in from the opposite side.
  html[dir='rtl'] {
    .list-detail {
      > .main {
        @include css3(transform, translateX(-100%));
      }

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

        &:not(.bleeding-edge__phone, .bleeding-edge__tablet) {
          > .main {
            @include css3(transform, translateX(0));
          }
        }
      }
    }
  }
}

@include respond-to(tabletdown) {
  .list-detail.bleeding-edge__tablet {
    overflow: hidden;

    .card-header {
      .list-detail-list-close-button {
        display: inline-block;
      }
    }

    .list-detail-back-button,
    .list-detail-list-close-button {
      display: inline-block;
    }

    > .main,
    > .sidebar {
      @include transform-transition-list(300ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

      position: absolute;

      &.scrollable,
      &.scrollable-y {
        height: 100%;
        overflow: auto;
      }
    }

    > .main {
      @include css3(transform, translateX(0));

      width: 100%;
    }

    > .sidebar {
      @include transform-transition-list(300ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
      box-shadow 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94));
      @include drawer-box-shadow;

      max-width: 75%;
      width: 275px;
      z-index: 2;
    }

    &.show-detail {
      > .sidebar {
        @include css3(transform, translateX(-100%));

        box-shadow: 0 0 0 1px $box-shadow-off-color;
      }
    }
  }

  // RTL makes everything come in from the opposite side.
  html[dir='rtl'] {
    .list-detail {
      &.bleeding-edge__tablet {
        &.show-detail {
          > .sidebar {
            @include css3(transform, translateX(100%));
          }
        }
      }
    }
  }
}