/**
 * ============================================================================
 * GudStories Framework
 * ============================================================================
 *
 * File
 * ----
 * gs-framework-utilities.css
 *
 * Version
 * -------
 * 1.0.0
 *
 * Status
 * ------
 * FRAMEWORK FOUNDATION
 *
 * Purpose
 * -------
 * Global utility classes used throughout the
 * GudStories Framework.
 *
 * Responsibilities
 * ----------------
 * • Display
 * • Flex
 * • Grid
 * • Alignment
 * • Spacing
 * • Typography
 * • Colors
 * • Borders
 * • Radius
 * • Shadows
 * • Position
 * • Overflow
 * • Visibility
 *
 * ============================================================================
 */



/* ==========================================================================
   Display
   ========================================================================== */

.gs-block { display:block; }

.gs-inline { display:inline; }

.gs-inline-block { display:inline-block; }

.gs-flex { display:flex; }

.gs-inline-flex { display:inline-flex; }

.gs-grid { display:grid; }

.gs-hidden { display:none !important; }

/* ==========================================================================
   Accessibility Utilities
   ========================================================================== */

/**
 * Hide visually while remaining accessible
 * to screen readers.
 */

.gs-visually-hidden{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}


/* ==========================================================================
   Flex Direction
   ========================================================================== */

.gs-flex-row { flex-direction:row; }

.gs-flex-column { flex-direction:column; }


/* ==========================================================================
   Justify Content
   ========================================================================== */

.gs-justify-start { justify-content:flex-start; }

.gs-justify-center { justify-content:center; }

.gs-justify-end { justify-content:flex-end; }

.gs-justify-between { justify-content:space-between; }

.gs-justify-around { justify-content:space-around; }


/* ==========================================================================
   Align Items
   ========================================================================== */

.gs-align-start { align-items:flex-start; }

.gs-align-center { align-items:center; }

.gs-align-end { align-items:flex-end; }

.gs-align-stretch { align-items:stretch; }


/* ==========================================================================
   Gap
   ========================================================================== */

.gs-gap-1 { gap:var(--gs-space-1); }

.gs-gap-2 { gap:var(--gs-space-2); }

.gs-gap-3 { gap:var(--gs-space-3); }

.gs-gap-4 { gap:var(--gs-space-4); }

.gs-gap-5 { gap:var(--gs-space-5); }

.gs-gap-6 { gap:var(--gs-space-6); }


/* ==========================================================================
   Width
   ========================================================================== */

.gs-w-100 { width:100%; }

.gs-h-100 { height:100%; }


/* ==========================================================================
   Margin
   ========================================================================== */

.gs-m-auto { margin:auto; }

.gs-mt-1 { margin-top:var(--gs-space-1); }

.gs-mt-2 { margin-top:var(--gs-space-2); }

.gs-mt-3 { margin-top:var(--gs-space-3); }

.gs-mt-4 { margin-top:var(--gs-space-4); }

.gs-mt-5 { margin-top:var(--gs-space-5); }

.gs-mb-1 { margin-bottom:var(--gs-space-1); }

.gs-mb-2 { margin-bottom:var(--gs-space-2); }

.gs-mb-3 { margin-bottom:var(--gs-space-3); }

.gs-mb-4 { margin-bottom:var(--gs-space-4); }

.gs-mb-5 { margin-bottom:var(--gs-space-5); }


/* ==========================================================================
   Padding
   ========================================================================== */

.gs-p-1 { padding:var(--gs-space-1); }

.gs-p-2 { padding:var(--gs-space-2); }

.gs-p-3 { padding:var(--gs-space-3); }

.gs-p-4 { padding:var(--gs-space-4); }

.gs-p-5 { padding:var(--gs-space-5); }

.gs-p-6 { padding:var(--gs-space-6); }


/* ==========================================================================
   Text Alignment
   ========================================================================== */

.gs-text-left { text-align:left; }

.gs-text-center { text-align:center; }

.gs-text-right { text-align:right; }


/* ==========================================================================
   Font Weight
   ========================================================================== */

.gs-fw-normal {

    font-weight:var(--gs-font-weight-normal);

}

.gs-fw-medium {

    font-weight:var(--gs-font-weight-medium);

}

.gs-fw-bold {

    font-weight:var(--gs-font-weight-bold);

}


/* ==========================================================================
   Text Colors
   ========================================================================== */

.gs-text-primary {

    color:var(--gs-color-primary);

}

.gs-text-muted {

    color:var(--gs-color-text-muted);

}

.gs-text-white {

    color:#ffffff;

}


/* ==========================================================================
   Backgrounds
   ========================================================================== */

.gs-bg-primary {

    background:var(--gs-color-primary);

}

.gs-bg-surface {

    background:var(--gs-color-surface);

}

.gs-bg-transparent {

    background:transparent;

}


/* ==========================================================================
   Borders
   ========================================================================== */

.gs-border {

    border:var(--gs-border);

}

.gs-border-none {

    border:none;

}


/* ==========================================================================
   Radius
   ========================================================================== */

.gs-radius-sm {

    border-radius:var(--gs-radius-sm);

}

.gs-radius-md {

    border-radius:var(--gs-radius-md);

}

.gs-radius-lg {

    border-radius:var(--gs-radius-lg);

}

.gs-radius-xl {

    border-radius:var(--gs-radius-xl);

}

.gs-radius-round {

    border-radius:var(--gs-radius-round);

}


/* ==========================================================================
   Shadows
   ========================================================================== */

.gs-shadow-sm {

    box-shadow:var(--gs-shadow-sm);

}

.gs-shadow-md {

    box-shadow:var(--gs-shadow-md);

}

.gs-shadow-lg {

    box-shadow:var(--gs-shadow-lg);

}


/* ==========================================================================
   Overflow
   ========================================================================== */

.gs-overflow-hidden {

    overflow:hidden;

}

.gs-overflow-auto {

    overflow:auto;

}

.gs-overflow-x-auto {

    overflow-x:auto;

}

.gs-overflow-y-auto {

    overflow-y:auto;

}


/* ==========================================================================
   Position
   ========================================================================== */

.gs-relative {

    position:relative;

}

.gs-absolute {

    position:absolute;

}

.gs-fixed {

    position:fixed;

}


/* ==========================================================================
   Visibility
   ========================================================================== */

.gs-visible {

    visibility:visible;

}

.gs-invisible {

    visibility:hidden;

}


/* ==========================================================================
   Cursor
   ========================================================================== */

.gs-pointer {

    cursor:pointer;

}

.gs-disabled {

    pointer-events:none;

    opacity:.6;

}