/**
 * COPYRIGHT 2024 BY ROBERT CURA. ALL RIGHTS RESERVED
 * AUTHOR: ROBERT CURA
 * INCEPTION: 2024MAR18
 * DESCRIPTION: SWAP VARIABLES FOR GRID LAYOUT
 **/

/*************************************************************************** *
 *
 * GRID SWAP VALUES                    
 *
 *************************************************************************** */

/*-------------------------------------------------------------------------- */
/*  DEFAULT GRID VALUES                                                                          
/*-------------------------------------------------------------------------- */
:root {
    --xrc-dflt-grid-template--display: block;
    --xrc-dflt-grid-template--columns: unset;
    --xrc-dflt-grid-template--rows: unset;
    --xrc-dflt-grid-template--areas: unset;
    --xrc-dflt-grid-template--column-gap: unset;
    --xrc-dflt-grid-template--row-gap: unset;
    --xrc-dflt-grid-template--align-items:unset;
    --xrc-dflt-grid-template--justify-items: unset;
    --xrc-dflt-grid-template--align-content: unset;
    --xrc-dflt-grid-template--justify-content: unset;
    --xrc-dflt-grid-template--auto-columns: unset;
    --xrc-dflt-grid-template--auto-rows: unset;
}

:root {
    --xrc-dflt-grid-item--area:         unset;
    --xrc-dflt-grid-item--column-left:  unset;
    --xrc-dflt-grid-item--column-right: unset;
    --xrc-dflt-grid-item--row-top:      unset;
    --xrc-dflt-grid-item--row-bottom:   unset;
    --xrc-dflt-grid-item--align-self:   unset;
    --xrc-dflt-grid-item--justify-self: unset;
    --xrc-dflt-grid-item--z-index:      unset;
}


/*-------------------------------------------------------------------------- */
/*  SWAP VALUES FOR GRID PROPERTIES                                
/*  NOTE THAT WE INCLUDE EPT VALUES HERE BECAUSE OF THE NESTED .ept-container
/*       ELEMENT THAT GIVES US A BASIC HEADACHE...
/*-------------------------------------------------------------------------- */
.xrc-grid--ept > .ept-container,
.xrc-grid--container {
    --xrc-grid-template--display:           var(--xrc-swap-grid-template--display        , var(--xrc-dflt-grid-template--display           ));
    --xrc-grid-template--columns:           var(--xrc-swap-grid-template--columns        , var(--xrc-dflt-grid-template--columns           ));
    --xrc-grid-template--rows:              var(--xrc-swap-grid-template--rows           , var(--xrc-dflt-grid-template--rows              ));
    --xrc-grid-template--areas:             var(--xrc-swap-grid-template--areas          , var(--xrc-dflt-grid-template--areas             ));
    --xrc-grid-template--column-gap:        var(--xrc-swap-grid-template--column-gap     , var(--xrc-dflt-grid-template--column-gap        ));
    --xrc-grid-template--row-gap:           var(--xrc-swap-grid-template--row-gap        , var(--xrc-dflt-grid-template--row-gap           ));
    --xrc-grid-template--align-items:       var(--xrc-swap-grid-template--align-items    , var(--xrc-dflt-grid-template--align-items       ));
    --xrc-grid-template--justify-items:     var(--xrc-swap-grid-template--justify-items  , var(--xrc-dflt-grid-template--justify-items     ));
    --xrc-grid-template--align-content:     var(--xrc-swap-grid-template--align-content  , var(--xrc-dflt-grid-template--align-content     ));
    --xrc-grid-template--justify-content:   var(--xrc-swap-grid-template--justify-content, var(--xrc-dflt-grid-template--justify-content   ));
    --xrc-grid-template--auto-columns:      var(--xrc-swap-grid-template--auto-columns   , var(--xrc-dflt-grid-template--auto-columns      ));
    --xrc-grid-template--auto-rows:         var(--xrc-swap-grid-template--auto-rows      , var(--xrc-dflt-grid-template--auto-rows         ));
}
/** 
    NOTE THE .ept-container > h2 Selector. THIS IS NEEDED FOR EPT
    Because it wraps the title with dual H2s
**/
.xrc-grid--ept > .ept-container > h2,
.xrc-grid--ept > .ept-container > .xrc-grid--item,
.xrc-grid--item {
    --xrc-grid-item--area:         var(--xrc-swap-grid-item--area,            var(--xrc-dflt-grid-item--area));
    --xrc-grid-item--align-self :  var(--xrc-swap-grid-item--align-self,      var(--xrc-dflt-grid-item--align-self ));
    --xrc-grid-item--justify-self: var(--xrc-swap-grid-item--justify-self,    var(--xrc-dflt-grid-item--justify-self ));
    --xrc-grid-item--z-index :     var(--xrc-swap-grid-item--z-index,         var(--xrc-dflt-grid-item--z-index ));
/*    --xrc-grid-item--column-left : var(--xrc-swap-grid-item--column-left,     var(--xrc-dflt-grid-item--column-left ));
    --xrc-grid-item--column-right: var(--xrc-swap-grid-item--column-right,    var(--xrc-dflt-grid-item--column-right ));
    --xrc-grid-item--row-top     : var(--xrc-swap-grid-item--row-top,         var(--xrc-dflt-grid-item--row-top        ));
    --xrc-grid-item--row-bottom :  var(--xrc-swap-grid-item--row-bottom,      var(--xrc-dflt-grid-item--row-bottom ));*/
}