/// main-container.less - General Styling for main container
/*

 Mixins consist of the main container, and it's two child containers
 '.search-filter' and '.listing'

 Alternative .main-container-w-child is a more generic container.
*/  

#mixin() {
  .main-container {
    display: grid;
    grid-template-areas: 'search-filter listing';
    grid-template-columns: [start] minmax(185px, 235px) 4fr [end];
    box-shadow: rgba(44, 57, 143, 0.05) 0px 0px 32px 8px;

    @media #media[tablet-query] {
      grid-template-areas: 'listing';
      grid-template-columns: [start] 1fr [end]
    }

    .search-filter {
      display: flex;
      flex-direction: column;
      grid-area: search-filter;
      background-color: #color[purple];
      border-radius: 10px 0 0 10px;
      padding: 1.0em;
      overflow: hidden;

      @media #media[tablet-query] {
        display: none;
      }
    }

    .mobile-search-filter {

    }

    .listing {
      display: flex;
      background-color: white;
      flex-direction: column;
      grid-area: listing;

      @media #media[desktop-query] {
        
      }
    }
  }
  
  .main-container-w-sidebar {
    #mixin.main-container();
    grid-template-areas: 'sidebar listing';

    > .sidebar {
      #mixin.main-container.search-filter();
      grid-area: sidebar;

      @media #media[tablet-query] {
        display: none;
      }
    }

    > .mobile-search-filter {
      #mixin.main-container.mobile-search-filter();
    }

    > .listing {
      #mixin.main-container.listing();
    }
  }
}
