// BASIC LAYOUT
// --------------------------------

.sam.padded.vertically{
  padding: 0 20px;
}
.sam.layout.basic{
  display: flex;
  flex-direction: column;
}
@media (min-width: $medium-screen){
  .sam.layout.basic{
    flex-direction: row;
  }
  .sam.flex-order-1{
    order: 1;
  }
}
.sam.layout.basic.equal.width > *{
  flex-grow: 1;
}

/**********************************************
              <sam-main> 
***********************************************/ 

sam-filters-wrapper {
  padding-top: 15px;
  display: block;
  h4.sam.heading{
    padding-left: 15px;
  }
  sam-button-next {
    display: block;
    text-align: center;
  }
  sam-button-next:first-of-type {
    margin-top: 1rem;
  }
}

sam-resources-wrapper {
  padding: 15px;
  display: block;
}

.sam-main {
  padding: 15px;
  display: block;
}

sam-alert-next{
  display:block;
  margin-bottom:15px;
}

sam-action-bar{
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
}

/**********************************************
                  LAYOUT 
***********************************************/ 
.sam.layout{
  display: grid;
  grid-column-gap: 2rem;
  grid-row-gap: 1rem;
  &.margin.bottom{
    margin-bottom: 1.5rem;
  }
  .img.center.aligned{
    text-align: center;
  }
}

/*----------------------
      Help Page
-----------------------*/

@media (max-width: 767px) {
  .sam.layout.pattern-1{
    grid-template-columns: 1fr;
    grid-row-gap: 0;
    grid-template-rows: min-content 1rem min-content min-content 1rem 1fr;
    & > :nth-child(2){
      grid-row: 3 / 4;
    }
    & > :nth-child(3){
      grid-row: 4 / 5;
    }
    & > :nth-child(4){
      grid-row: 7 / 8;
    }
  }
}

@media (min-width: 768px) and (max-width: 991px){
  .sam.layout.pattern-1{
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 1rem;
    grid-column-gap: 0;
    grid-template-rows: min-content 1fr min-content;
    & > :nth-child(1){
      grid-column: 1 / -1;
      grid-row: 1 / 2;
    }
    & > :nth-child(4){
      grid-column: 1 / -1;
    }
  }
}

@media (min-width: 992px) {
  .sam.layout.pattern-1{
    grid-row-gap: 0;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: min-content min-content 1rem min-content;
    & > :nth-child(1){
      grid-column: 1 / 2;
      grid-row: 1 / 3;
    }
    & > :nth-child(4){
      grid-column: 1 / -1;
      grid-row: 4 / 5;
    }
  }
}

@media (min-width: 1200px) {
  .sam.layout.pattern-1{
    grid-template-rows: min-content min-content 1rem 1fr;
    & > :nth-child(1){
      grid-row: 1 / 5;
    }
    & > :nth-child(4){
      grid-column: 2 / -1;
    }
  }
}


/**********************************************
                  Media 
***********************************************/ 
.sam.layout.pattern-media{
  grid-template-columns: 3fr 9fr;
}



/**********************************************
                  PAGE 
***********************************************/ 
/*------------------------------------------
   Breadcrumbs | Sidebar | Main Content
-------------------------------------------*/

.sam.layout.pattern-page{
  grid-template-columns: 1fr;
  grid-row-gap: 2rem;
}

@media (min-width: 576px) {
  
}

@media (min-width: 768px) {
  .sam.layout.has-sidebar.pattern-page{
    grid-template-columns: 2fr 8fr;
    > .header{
      grid-column: 2 / -1;
    }
    > .breadcrumbs{
      grid-column: 1 / -1;
      grid-row: 1 / 2;
    }
    > .page-sidebar{
      grid-row: 2 / 4;
    }
  }
}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {

}


// Angular Specific
@media (min-width: 768px) {
  .sam.layout.has-sidebar.pattern-page{
    sam-page-sidebar{
      grid-row: 2 / 4;
    }
  }
}