/*
*  ASSETS TESTS
*  Styles for dev.assets_test* pages
*/

div.mgrid,
div.lgrid,
div.cgrid {

   display: grid;
   column-gap: 1em;
   row-gap: 1em;

   &.debug {
      border: 1px solid black;
      padding: 1em;

      .area1, .area3 {
         background-color: yellow;
      }
      .area2, .area4 {
         background-color: transparentize(cyan, 0.4);
         padding-top: 1em;
         padding-left: 1em;
      }
      .item {
         background-color: orange;
      }
      ul {
         list-style-type: none;
         padding: 0;
         margin: 0;
         display: flex;
      }
   }
}

div.mgrid {
   div.area1 {
      grid-column: 1 / 3;
      grid-row: 1 / 3;
   }
   div.area2 {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
   }
}

div.lgrid {
   div.area3 {
      grid-area: ah;
   }
   div.area4 {
      grid-area: bl;
   }
   grid-template-areas:
        "ah ah"
        "ah bl";  // invalid
   /*
   *   La zone qu'on crée avec les noms doit être rectangulaires.
   *   Actuellement, il n'existe pas de méthode pour créer une zone avec une forme de L
   *   (bien que la spécification indique qu'une prochaine version pourrait couvrir cette fonctionnalité).
   *   [...] Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide.
   *   src: https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas
   */
   grid-template-areas:
        "ah ah"
        ". bl";
}

div.cgrid {
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   grid-template-rows: masonry;
}