/* ==========================================================================
   ELX UI · Layout
   ========================================================================== */


/*
|--------------------------------------------------------------------------
| ROW
|--------------------------------------------------------------------------
*/

.elx-row{

    /*
    |--------------------------------------------------------------------------
    | Layout
    |--------------------------------------------------------------------------
    */

    display:flex;

    align-items:center;

    /*
    |--------------------------------------------------------------------------
    | Spacing
    |--------------------------------------------------------------------------
    */

    gap:
        var(--elx-space-md);

}

/* ==========================================================================
   COLUMN
   ========================================================================== */


/*
|--------------------------------------------------------------------------
| DEFAULT
|--------------------------------------------------------------------------
*/

.elx-column{

    display:flex;

    flex-direction:column;

    gap:
        var(--elx-space-md);

}

/* ==========================================================================
   STACK
   ========================================================================== */


/*
|--------------------------------------------------------------------------
| DEFAULT
|--------------------------------------------------------------------------
*/

.elx-stack{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:
        var(--elx-space-lg);

}

/* ==========================================================================
   CLUSTER
   ========================================================================== */


/*
|--------------------------------------------------------------------------
| DEFAULT
|--------------------------------------------------------------------------
*/

.elx-cluster{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:
        var(--elx-space-md);

}

/* ==========================================================================
   CENTER
   ========================================================================== */


/*
|--------------------------------------------------------------------------
| DEFAULT
|--------------------------------------------------------------------------
*/

.elx-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

/* ==========================================================================
   GROW
   ========================================================================== */

.elx-grow{

    flex:1;

}

/* ==========================================================================
   SPACER
   ========================================================================== */

.elx-spacer{

    margin-left:auto;

}