/**
 * COPYRIGHT 2024 BY ROBERT CURA. ALL RIGHTS RESERVED
 * AUTHOR: ROBERT CURA
 * INCEPTION: 2024MAR18
 * DESCRIPTION: GENERAL FLEX CODING
 **/

/*************************************************************************** *
 * 
 *  FLEX CUSTOMIZATIONS
 *
 *************************************************************************** */

.xrc-flex {
    display: flex;
}


.xrc-flex-container {
    flex-direction:  var(--xrc-flex--direction); /** MAIN AXIS: ROW OR COLUMN? **/
    flex-wrap:       var(--xrc-flex--wrap); /** ALLOW THE FLEX TO WRAP OR FIT **/
    justify-content: var(--xrc-flex--justify-content);
    align-items:     var(--xrc-flex--align-items); /** How all items in the flex area will ALL ALIGN **/
    align-content:   var(--xrc-flex--align-content);     /* XRC MOD: MULTI-LINE ONLY */
    row-gap:         var(--xrc-flex--row-gap);  /** ROW GAPS AMONG ITEMS **/
    column-gap:      var(--xrc-flex--column-gap);  /** COLUMN GAPS AMONG ITEMS **/
}


.xrc-flex--item {
    order:          var(--xrc-flex-item--order);
    flex-grow:      var(--xrc-flex-item--grow);
    flex-shrink:    var(--xrc-flex-item--shrink);
    flex-basis:     var(--xrc-flex-item--basis);
    align-self:     var(--xrc-flex-item--align-self);
}