/*#############################################################################
# LAYOUT APP
#############################################################################*/


// Base App Layout
body#app, .app-layout {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  overflow: auto;

  header.app-header {
    background-color: #fff;
  }

  //  Steps Layout
  .steps {
    section.app-body {
      background-color: $default-background-color-app;
      // height: calc(100vh - 50px);

      div.step-main {
        background-color: #fff;
        overflow: auto;
        padding: 20px 20px 0;
        min-height: calc(100vh - 61px);
        position: relative;

        &::-webkit-scrollbar{
          // display: none;
        }
      }

      div.step-sidebar {
        @include responsive-max($breakpoint-xmedium) {
          padding: 20px 20px 40px;
          .sidebar-step-actions {
            margin-top: 60px;
            height: 50px;
          }
        }
        &::-webkit-scrollbar{
          display: none;
        }

        &.scroller {
          position: relative;
          overflow: auto;
        }
      }

      @include responsive($breakpoint-medium) {
        div.step-main {
          padding: 20px 40px 0;
        }
      }

      @include responsive($breakpoint-xmedium) {
        display: grid;
        grid-template-columns: 1fr 260px;
        height: calc(100vh - 70px);

        &.large {
          grid-template-columns: 1fr 300px;
        }

        div.step-main {
          grid-column: 1;
          grid-row: 1;
          padding: 30px 60px 0;
          @include box-shadow(0 0 20px 0 rgba(black, 0.05));
        }

        div.step-sidebar {
          display: block;
          grid-column: 2;
          grid-row: 1;
          padding: 30px 30px 0;
        }
      }

      @include responsive($breakpoint-large) {
        grid-template-columns: 1fr 260px;
        &.large {
          grid-template-columns: 1fr 400px;
        }
      }
    }

    &.sidebar-left {
      section.app-body {
        grid-template-columns: 1fr;

        div.step-main {
          grid-column: 1;
          grid-row: 1;
        }

        @include responsive($breakpoint-xmedium) {
          grid-template-columns: 300px 1fr;

          div.step-main {
            grid-column: 2;
            grid-row: 1;
          }

          div.step-sidebar {
            grid-column: 1;
            grid-row: 1;
          }
        }

        @include responsive-max($breakpoint-xmedium) {
          div.step-sidebar {
            padding: 20px 20px 5px !important;
            margin-bottom: 20px !important;
          }
        }

        @include responsive($breakpoint-large) {
          grid-template-columns: 400px 1fr;
          &.body-help-step  {
            grid-template-columns: 260px 1fr 260px !important;
          }
        }
      }
    }
  }

  // Blocks Layout
  .blocks {
    section.app-body {
      background-color: $default-background-color-app;
      display: grid;
      grid-template-columns: 1fr;
      height: calc(100vh - 70px);

      @include responsive-max($breakpoint-medium) {
        height: calc(100vh - 50px);
      }

      div.block-main {
        grid-column: 1;
        grid-row: 1;
        background-color: #fff;
        overflow: auto;
        padding: 20px;
        position: relative;

        &.transparent {
          background-color: transparent;
        }

        // Centered Content
        &.centered-content {
          .content-wrapper {
            // width: 630px;
            margin: 0 auto;
            text-align: center;

          }
        }
      }

      @include responsive($breakpoint-xmedium) {
        div.block-main {
          padding: 40px 60px;

          &.centered-content {
            .content-wrapper {
              width: 630px;
            }
          }
        }
      }
    }
  }

  // When Progress Bar
  .progress-bar {
    section.app-body {
      height: calc(100vh - 80px);
    }
  }

  // My Products
  .my-products {
    section.app-body {

      div.block-main {
        background-color: transparent;
      }
    }
  }

  // My Account
  .my-account {
    section.app-body {
      div.step-main {
        padding-bottom: 60px;
      }
    }
  }

  @include responsive($breakpoint-xmedium) {
    overflow: hidden;
  }

  @include responsive-max($breakpoint-medium) {
    .main-content {
      height: calc(100vh - 50px);
      display: grid;
      .scroller {
        overflow: auto;
      }
    }
  }
}