/* ==========================================================================
   FLEX UTILITIES
   Plain CSS utility classes with descriptive names.
   Intended for HTML/Twig templates without any framework dependency.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Display
   -------------------------------------------------------------------------- */

.display-flex {
    display: flex;
}

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

.display-contents {
    display: contents;
}

/* --------------------------------------------------------------------------
   Direction
   -------------------------------------------------------------------------- */

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

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

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

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

/* --------------------------------------------------------------------------
   Wrap
   -------------------------------------------------------------------------- */

.flex-wrap-nowrap {
    flex-wrap: nowrap;
}

.flex-wrap-wrap {
    flex-wrap: wrap;
}

.flex-wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
}

/* --------------------------------------------------------------------------
   Justify content
   -------------------------------------------------------------------------- */

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

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

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

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

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

.justify-content-space-evenly {
    justify-content: space-evenly;
}

/* --------------------------------------------------------------------------
   Align items
   -------------------------------------------------------------------------- */

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

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

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

.align-items-baseline {
    align-items: baseline;
}

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

/* --------------------------------------------------------------------------
   Align content
   Used when the flex container wraps onto multiple lines.
   -------------------------------------------------------------------------- */

.align-content-start {
    align-content: flex-start;
}

.align-content-end {
    align-content: flex-end;
}

.align-content-center {
    align-content: center;
}

.align-content-space-between {
    align-content: space-between;
}

.align-content-space-around {
    align-content: space-around;
}

.align-content-space-evenly {
    align-content: space-evenly;
}

.align-content-stretch {
    align-content: stretch;
}

/* --------------------------------------------------------------------------
   Align self
   Applied to individual flex items.
   -------------------------------------------------------------------------- */

.align-self-auto {
    align-self: auto;
}

.align-self-start {
    align-self: flex-start;
}

.align-self-end {
    align-self: flex-end;
}

.align-self-center {
    align-self: center;
}

.align-self-baseline {
    align-self: baseline;
}

.align-self-stretch {
    align-self: stretch;
}

/* --------------------------------------------------------------------------
   Flex shorthand helpers
   Applied to individual flex items.
   -------------------------------------------------------------------------- */

.flex-none {
    flex: none;
}

.flex-initial {
    flex: 0 1 auto;
}

.flex-auto {
    flex: 1 1 auto;
}

.flex-fill {
    flex: 1 1 0%;
}

/* --------------------------------------------------------------------------
   Flex grow / shrink
   Applied to individual flex items.
   -------------------------------------------------------------------------- */

.flex-grow-0 {
    flex-grow: 0;
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-shrink-1 {
    flex-shrink: 1;
}

/* --------------------------------------------------------------------------
   Flex basis
   Applied to individual flex items.
   -------------------------------------------------------------------------- */

.flex-basis-auto {
    flex-basis: auto;
}

.flex-basis-0 {
    flex-basis: 0;
}

.flex-basis-25 {
    flex-basis: 25%;
}

.flex-basis-33 {
    flex-basis: 33.3333%;
}

.flex-basis-50 {
    flex-basis: 50%;
}

.flex-basis-66 {
    flex-basis: 66.6667%;
}

.flex-basis-75 {
    flex-basis: 75%;
}

.flex-basis-100 {
    flex-basis: 100%;
}

/* --------------------------------------------------------------------------
   Order
   Applied to individual flex items.
   -------------------------------------------------------------------------- */

.order-first {
    order: -9999;
}

.order-last {
    order: 9999;
}

.order-0 {
    order: 0;
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-3 {
    order: 3;
}

.order-4 {
    order: 4;
}

.order-5 {
    order: 5;
}

.order-6 {
    order: 6;
}

/* --------------------------------------------------------------------------
   Gap
   Container spacing helpers.
   -------------------------------------------------------------------------- */

.gap-0 {
    gap: 0;
}

.gap-4 {
    gap: 4px;
}

.gap-8 {
    gap: 8px;
}

.gap-12 {
    gap: 12px;
}

.gap-16 {
    gap: 16px;
}

.gap-20 {
    gap: 20px;
}

.gap-24 {
    gap: 24px;
}

.gap-32 {
    gap: 32px;
}

.gap-40 {
    gap: 40px;
}

.gap-48 {
    gap: 48px;
}

.gap-64 {
    gap: 64px;
}

/* --------------------------------------------------------------------------
   Row gap
   -------------------------------------------------------------------------- */

.row-gap-0 {
    row-gap: 0;
}

.row-gap-4 {
    row-gap: 4px;
}

.row-gap-8 {
    row-gap: 8px;
}

.row-gap-12 {
    row-gap: 12px;
}

.row-gap-16 {
    row-gap: 16px;
}

.row-gap-20 {
    row-gap: 20px;
}

.row-gap-24 {
    row-gap: 24px;
}

.row-gap-32 {
    row-gap: 32px;
}

.row-gap-40 {
    row-gap: 40px;
}

.row-gap-48 {
    row-gap: 48px;
}

.row-gap-64 {
    row-gap: 64px;
}

/* --------------------------------------------------------------------------
   Column gap
   -------------------------------------------------------------------------- */

.column-gap-0 {
    column-gap: 0;
}

.column-gap-4 {
    column-gap: 4px;
}

.column-gap-8 {
    column-gap: 8px;
}

.column-gap-12 {
    column-gap: 12px;
}

.column-gap-16 {
    column-gap: 16px;
}

.column-gap-20 {
    column-gap: 20px;
}

.column-gap-24 {
    column-gap: 24px;
}

.column-gap-32 {
    column-gap: 32px;
}

.column-gap-40 {
    column-gap: 40px;
}

.column-gap-48 {
    column-gap: 48px;
}

.column-gap-64 {
    column-gap: 64px;
}

/* --------------------------------------------------------------------------
   Practical flex item helpers
   These are not flex properties themselves, but they solve common flex issues.
   -------------------------------------------------------------------------- */

.flex-item-min-width-0 {
    min-width: 0;
}

.flex-item-min-height-0 {
    min-height: 0;
}

.flex-item-full-width {
    width: 100%;
}

.flex-item-full-height {
    height: 100%;
}

/* --------------------------------------------------------------------------
   Variable-driven helpers
   Use these when you need a value that is not covered by the fixed classes.
   Example:
   style="--flex-gap: 18px; --flex-basis: 280px;"
   -------------------------------------------------------------------------- */

.gap-variable {
    gap: var(--flex-gap);
}

.row-gap-variable {
    row-gap: var(--flex-row-gap);
}

.column-gap-variable {
    column-gap: var(--flex-column-gap);
}

.flex-basis-variable {
    flex-basis: var(--flex-basis);
}

.flex-grow-variable {
    flex-grow: var(--flex-grow);
}

.flex-shrink-variable {
    flex-shrink: var(--flex-shrink);
}

.order-variable {
    order: var(--flex-order);
}

/* --------------------------------------------------------------------------
   Common combinations
   Small convenience helpers for frequent layouts.
   -------------------------------------------------------------------------- */

.flex-row-start-center {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.flex-row-end-center {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
}

.flex-row-space-between-center {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.flex-row-center-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.flex-column-start-stretch {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

.flex-column-center-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flex-column-space-between-start {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}