// Css Application Layouts
//================================================== //

.l-pull-right {
  float: right;
}

.l-pull-left {
  float: left;
}

.l-center-text {
  text-align: center;
}

.l-right-text {
  text-align: right;
}

.height-100 {
  height: 100%;
}

.width-100 {
  width: 100% !important;
}

.max-width-100 {
  max-width: 100% !important;
}

.full-width-100 {
  max-width: 100% !important;
  width: 100% !important;
}

.l-vertical-center {
  @include vertical-align();
}

//An extra Div to pad down
.page-contents {
  margin-top: 30px;
}

// Single Column Layout
.header.is-sticky + .single-column {
  margin-top: 100px;
}

.single-column {
  height: calc(100% - 120px);
  margin: 20px 20px 30px;
  width: calc(100% - 40px);

  .content {
    background-color: $inverse-color;
    border: 1px solid $ids-color-palette-slate-20;
  }
}

.no-scroll {
  overflow: hidden !important;
}

body.no-scroll {
  height: 100%;
}

.fake-contents {
  height: 2000px;
}

.fake-section-small {
  background-color: $ids-color-palette-white;
  height: 50px;
}

.ios {
  body.no-scroll {
    max-height: 100%;
  }
}

// Two Column Layout
.two-column {
  font-size: 0;

  > .main,
  > .sidebar {
    background-color: $panel-bg-color;
    display: inline-block;

    &.scrollable {
      height: 100%;
      width: 100%;
    }

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

    .fieldset {
      margin: 20px;
    }
  }

  > .main {
    border-right: 1px solid $panel-border-color;
    height: auto;
    min-height: 100%;
    vertical-align: top;
    width: 75%;

    + .sidebar {
      border-right: 0;
      margin-right: 0 !important;
    }
  }

  &.list-detail {
    > .sidebar {
      &.scrollable {
        overflow-y: hidden;
      }
    }
  }

  > .sidebar {
    background-color: $body-color-primary-background;
    border-right: 1px solid $panel-border-color;
    height: inherit;
    min-height: 100%;
    vertical-align: top;
    width: 25%;

    + .main {
      border-right: 0;
    }

    .listview {
      background-color: $body-color-primary-background;

      &.paginated {
        height: calc(100% - 38px);
      }
    }

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

      &.paginated {
        height: calc(100% - 98px);
      }
    }

    > .listview-search + .listview {
      height: calc(100% - 90px);

      &.paginated {
        height: calc(100% - 134px);
      }
    }
  }

  &.fixed,
  &.fixed-xs,
  &.fixed-sm,
  &.fixed-mm,
  &.fixed-md,
  &.fixed-lg,
  &.fixed-xl {
    > .main {
      min-height: 100%;
      vertical-align: top;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .content {
    height: 100%;
  }
}

.page-container .two-column,
.page-container .three-column {
  height: 100%;
}

.three-column {
  .main,
  .sidebar {
    background-color: $inverse-color;
    display: inline-block;
    vertical-align: top;

    &.scrollable {
      height: calc(100% - 3px);
      width: 100%;
    }

    &.scrollable-x {
      width: 100%;
    }

    &.scrollable-y {
      height: calc(100% - 3px);
    }
  }

  .main {
    background-color: $panel-bg-color;
    border-left: 1px solid $ids-color-palette-slate-20;
    border-right: 1px solid $ids-color-palette-slate-20;
    width: calc(60% - 3px);

    &.scrollable,
    &.scrollable-y {
      border-left: 0;
      border-right: 0;
    }

    + .sidebar {
      float: right;
    }
  }

  .sidebar {
    background-color: $body-color-primary-background;
    width: 20%;
  }

  // Adding "fixed" class and a "left" and/or "right" class will make fixed-width columns
  // TODO: Determine actual widths
  &.fixed {
    &.left,
    &.right {
      .main {
        width: calc(80% - 254px);
      }
    }

    &.left {
      .sidebar:first-child {
        width: 250px;
      }

      .sidebar:last-child {
        width: 20%;
      }
    }

    &.right {
      .sidebar {
        width: 20%;
      }

      .main + .sidebar {
        width: 250px;
      }
    }

    &.both {
      .main {
        width: calc(100% - 504px);
      }

      .sidebar {
        width: 250px;
      }
    }
  }
}

.modal-body {
  .two-column,
  .three-column {
    margin: -20px -20px -24px;
  }
}

@include respond-to(phone) {
  .two-column {
    > .main,
    > .sidebar {
      display: block;
      width: 100%;

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

    > .main {
      border: 0;
      border-bottom: 1px solid $ids-color-palette-slate-20;
    }

    > .sidebar + .main {
      border-bottom: 0;
      border-top: 1px solid $panel-border-color;
    }

    // Undo fixed-widths
    &.fixed,
    &.fixed-xs,
    &.fixed-sm,
    &.fixed-mm,
    &.fixed-md,
    &.fixed-lg,
    &.fixed-xl {
      > .main,
      > .sidebar {
        display: block;
        height: 100%;
        width: 100%; // Override Inline Css
      }
    }

    // In List-Detail View, Main/Sidebar slide left/right instead of being stacked
    &.builder {
      > .main,
      > .sidebar {
        &.scrollable,
        &.scrollable-y {
          height: 100%;
          overflow: auto;
        }
      }
    }
  }
}

// on iOS landscape mode, fix the height of the listview to actually show the pager.
@media (max-width: ($breakpoint-phone-to-tablet - 1px)) and (orientation: landscape) {
  .ios {
    .two-column {
      > .sidebar {
        .listview-search {
          + .listview {
            &.paginated {
              height: calc(100% - 190px);
            }
          }
        }
      }
    }
  }
}

@media (max-width: ($breakpoint-phone-to-tablet - 1)) {
  .three-column,
    .three-column.fixed {
    .main,
    .sidebar {
      display: block;
      width: 100%;

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

    &.left,
    &.right {
      .main,
      .sidebar {
        display: block;
        width: 100%;

        &:first-child,
        &:last-child {
          width: 100%;
        }
      }
    }

    .main {
      border-bottom: 1px solid $panel-border-color;
      border-left: 0;
      border-right: 0;
    }

    .sidebar + .main {
      border-top: 1px solid $panel-border-color;
    }
  }
}

// Modifications to Page Content based on different header types
//==============================================================

// Makes the internal content section of the page a scrollable <div>
// Use this in conjunction with a "no-scroll" class on the body tag
.scrollable {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.scrollable-x {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  overflow-y: hidden;
}

.scrollable-y {
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  overflow-y: auto;
}

.page-container {
  bottom: 0;
  font-size: 0;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  width: 100%;

  &.top-padding {
    padding-top: 20px;
  }

  > .row:first-child {
    padding-top: 20px;
  }

  > .row:last-child {
    padding-bottom: 20px;
  }

  .svg-patterns + .row {
    padding-top: 20px;
  }
}

.page-content-container {
  height: calc(100% - 60px);
}

.header {
  + .container,
  + .site-content,
  + .site-hero,
  + .application-menu + .site-hero,
  + .svg-icons + .container {
    margin-top: 60px;
  }

  + .page-container,
  + .application-menu + .page-container {
    height: calc(100% - 60px);
    margin-top: 60px;
  }

  // Searchfield primary action (Large)
  &.has-searchfield-xl {
    height: 177px;

    .searchfield-wrapper {
      input {
        @include font-size(20);

        border: 1px solid transparent;
        box-shadow: $focus-box-shadow-transparent;
        height: 48px;
        padding: 18px 17px 18px 51px;

        &::-webkit-input-placeholder {
          @include font-size(16);

          font-weight: 400;
        }

        &::-moz-placeholder {
          @include font-size(16);

          line-height: 25px;
        }

        &:-ms-input-placeholder {
          @include font-size(16);
        }

        &:focus {
          box-shadow: 0 0 0 1px $body-color-primary-background, 0 0 0 2px $button-color-secondary-focus-border, $header-focus-box-shadow;
        }
      }

      .icon {
        height: 18px;
        left: 16px !important;
        top: 21px;
        width: 20px;
      }
    }

    + .page-container,
    + .application-menu + .page-container {
      height: calc(100% - 200px);
    }
  }

  + .subheader + .page-container,
  + .subheader + .application-menu + .page-container {
    height: calc(100% - 120px);
    margin-top: 120px;
  }

  &.has-tabs,
  &.has-alternate-tabs {
    height: auto;

    > .toolbar.toolbar {
      height: 60px;
      margin-bottom: 0;
    }

    + .page-container,
    + .application-menu + .page-container {
      height: calc(100% - 100px);
      margin-top: 100px;
    }
  }

  &.has-tabs-only {
    height: 60px;

    > .toolbar {
      height: 0;
      margin-bottom: 0;
    }

    + .page-container,
    + .application-menu + .page-container {
      height: calc(100% - 60px);
      margin-top: 60px;
    }

    + .subheader + .page-container,
    + .subheader + .application-menu + .page-container {
      height: calc(100% - 120px);
      margin-top: 120px;
    }
  }

  &.has-breadcrumb {
    height: 105px;

    > .toolbar {
      margin-bottom: 0;
    }

    + .page-container,
    + .application-menu + .page-container {
      height: calc(100% - 105px);
      margin-top: 105px;
    }
  }

  // Alternate breadcrumb is taller than regular breadcrumb
  &.has-alternate-breadcrumb {
    height: 120px;

    + .page-container,
    + .application-menu + .page-container {
      height: calc(100% - 120px);
      margin-top: 120px;
    }
  }

  &.has-wizard {
    height: 144px;

    + .page-container,
    + .application-menu + .page-container {
      height: calc(100% - 144px);
      margin-top: 144px;
    }
  }

  ~ .masthead + .page-container {
    height: calc(100% - 98px);
    margin-top: 98px;
  }
}

//Stands on its own content header - assumes header above it
.content-container-header {
  @include transition(height 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

  height: calc(100% - 60px);
  margin: 30px;
}

//Header on Side Panels - fx: tests/tree/expand-collapse-splitter
.panel-header {
  background-color: $toolbar-standalone-bg-color;
  border-bottom: 1px solid $toolbar-standalone-border-color;
  height: 50px;
  padding-right: 10px;

  .title {
    @include font-size(16);

    padding-left: 13px;
    padding-top: 5px;
  }

  + .splitter {
    height: 100%;
    top: 0;
  }
}

// Fix font issue on FF
.is-firefox {
  .panel-header button {
    padding-top: 2.5px;
  }
}

.masthead {
  + .header.is-sticky {
    + .site-content,
    + .site-hero,
    + .application-nav + .site-hero,
    + .svg-icons + .page-container {
      margin-top: 135px;
    }

    + .page-container,
    + .application-menu + .page-container {
      height: calc(100% - 95px);
    }

    &.has-breadcrumb,
    &.has-tabs {
      + .page-container,
      + .application-menu + .page-container {
        height: calc(100% - 133px);
        margin-top: 133px;
      }
    }

    &.has-wizard {
      height: 179px;

      + .page-container,
      + .application-menu + .page-container {
        height: calc(100% - 179px);
        margin-top: 179px;
      }
    }
  }

  + .page-container,
  + .application-menu + .page-container {
    height: calc(100% - 38px);
    margin-top: 38px;
  }

  + .header + .page-container,
  + .header + .application-menu + .page-container {
    height: calc(100% - 98px);
    margin-top: 98px;
  }

  + .module-tabs + .page-container,
  + .module-tabs + .application-menu + .page-container {
    height: calc(100% - 74px);
    margin-top: 74px;
  }
}

.module-tabs {
  + .page-container,
  + .application-menu + .page-container {
    height: calc(100% - 36px);
  }
}

// Editorial Pattern
//==============================================================
.no-transform {
  transform: none !important;
}

.editorial {
  background-color: $inverse-color;

  .main {
    height: auto;
    margin: 0 auto;
    max-width: 1080px;
    width: 100%;

    > .content {
      display: inline-block;
      margin-top: 48px;
      max-width: calc(100% - 240px);
      padding: 0 30px;

      > h3,
      > h2 {
        margin-bottom: 10px;
        padding-bottom: 10px;
        width: 68%;
      }
    }

    > p {
      margin-bottom: 25px;
    }
  }

  .tag-list .tag {
    clear: both;
    display: block;
    float: left;
    margin: 5px 0;
    width: auto;

    &:last-child {
      margin-bottom: 30px;
    }
  }

  .is-sticky {
    .content {
      position: fixed;
      top: 60px;
    }
  }

  .hero {
    background-color: $body-color-primary-background;
    border-bottom: 1px solid $ids-color-palette-slate-20;
    height: 350px;
  }

  .section-tracker {
    margin-bottom: $input-field-bottom-margin;

    a {
      border-bottom: medium none;
      border-left: 3px solid transparent;
      color: $ids-color-palette-slate-50;
      height: auto;
      line-height: 25px;
      padding: 5px 10px;

      &:hover,
      &:active,
      &:focus,
      &.is-active {
        border-bottom: 0;
        border-left: 3px solid $ids-color-brand-primary-base;
        color: $ids-color-brand-primary-base;
        outline: none;
      }
    }
  }
}

@include respond-to(phone) {
  .editorial {
    .main .content {
      min-width: 100%;
    }

    .sidebar-nav {
      display: none;
    }
  }
}

// Responsive Images
.img-responsive {
  border: 0 none;
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

// Banner Detail Pattern
.page-container {
  .banner-detail {
    min-height: 100%;
    position: relative;
    top: 0;
  }
}

.banner-detail {
  .banner {
    background-color: $panel-bg-color;
    border-bottom: 1px solid $panel-border-color;
    height: auto;
    padding: 0;
  }

  .detail {
    background-color: $body-color-primary-background;
    height: auto;

    .tab-container.alternate {
      position: relative;
      top: -40px;

      + .tab-panel-container {
        margin-bottom: 0;
        position: relative;

        .tab-panel.alternate {
          margin-top: -30px;
        }

        .card {
          margin: 0 10px;
          width: calc(100% - 20px);
        }
      }

      .tab-list-container {
        overflow-y: hidden;
      }
    }
  }
}

// Different hierarchy of info shown in a contrasting color panel - i.e. header detail
.content-area {
  background-color: $panel-bg-color;
  border: 1px solid $panel-border-color;

  h2 {
    color: $font-color;
  }
}

.header-section {
  background-color: $body-color-primary-background;
  border-bottom: 1px solid $panel-border-color;
}

.modal-body {
  .header-section {
    margin-top: -30px;
  }
}

.detail-section {
  background-color: $panel-bg-color;
}

// Scrollable Canvas
//==============================================================
.scrollable.canvas,
.scrollable-x.canvas,
.scrollable-y.canvas {
  min-height: calc(100% - 60px);
  min-width: 100%;
  -webkit-overflow-scrolling: touch;
}

// Sticky Footer
.has-sticky-footer {
  bottom: 60px;
  height: calc(100% - 60px);
}

.sticky-footer {
  background-color: $body-color-primary-background;
  bottom: 0;
  font-size: $ids-size-font-sm;
  left: 50%;
  max-width: 1280px;
  padding: 20px;
  position: fixed;
  transform: translateX(-50%);
  width: 100%;

  .footer-list {
    margin: 0;
    padding: 0;

    &::after {
      clear: both;
      content: '';
      display: block;
    }

    li {
      display: inline-block;
      margin-left: 20px;

      &:first-child {
        margin-left: 0;
      }
    }
  }
}

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

      position: absolute;
    }

    .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%));
      }
    }
  }

  .has-sticky-footer {
    bottom: 150px;
    height: calc(100% - 150px);
  }

  .sticky-footer {
    .footer-list {
      &.l-pull-left,
      &.l-pull-right {
        float: none;
      }

      &:not(:last-child) {
        margin-bottom: 10px;
      }

      li {
        display: block;
        margin-left: 0;
      }
    }
  }
}

// RTL Styles
html[dir='rtl'] {
  .two-column {
    .sidebar {
      border-left: 1px solid $panel-border-color;
      border-right: 0 solid $panel-border-color;
    }
  }

  .l-pull-right {
    float: left;
  }

  .l-pull-left {
    float: right;
  }

  .l-right-text {
    text-align: left;
  }

  .l-left-text {
    text-align: right;
  }

  .sticky-footer {
    .footer-list {
      li {
        margin-left: inherit;
        margin-right: 20px;

        &:first-child {
          margin-left: inherit;
          margin-right: 0;
        }
      }
    }
  }
}