/* =========================
   CAENEN Flex Utilities
   Prefix: cx-
   Breakpoints: Bootstrap 5.1.3
   ========================= */

/* --- Base (no breakpoint) --- */

/* Display */
.cx-flex { display: flex; }
.cx-inline-flex { display: inline-flex; }

/* Direction */
.cx-row { flex-direction: row; }
.cx-col { flex-direction: column; }
.cx-row-rev { flex-direction: row-reverse; }
.cx-col-rev { flex-direction: column-reverse; }

/* Wrap */
.cx-wrap { flex-wrap: wrap; }
.cx-nowrap { flex-wrap: nowrap; }
.cx-wrap-rev { flex-wrap: wrap-reverse; }

/* Justify content */
.cx-jc-start { justify-content: flex-start; }
.cx-jc-center { justify-content: center; }
.cx-jc-end { justify-content: flex-end; }
.cx-jc-between { justify-content: space-between; }
.cx-jc-around { justify-content: space-around; }
.cx-jc-evenly { justify-content: space-evenly; }

/* Align items */
.cx-ai-start { align-items: flex-start; }
.cx-ai-center { align-items: center; }
.cx-ai-end { align-items: flex-end; }
.cx-ai-stretch { align-items: stretch; }
.cx-ai-baseline { align-items: baseline; }

/* Align content (wrap layouts) */
.cx-ac-start { align-content: flex-start; }
.cx-ac-center { align-content: center; }
.cx-ac-end { align-content: flex-end; }
.cx-ac-between { align-content: space-between; }
.cx-ac-around { align-content: space-around; }
.cx-ac-stretch { align-content: stretch; }

/* Align self (child) */
.cx-as-auto { align-self: auto; }
.cx-as-start { align-self: flex-start; }
.cx-as-center { align-self: center; }
.cx-as-end { align-self: flex-end; }
.cx-as-stretch { align-self: stretch; }
.cx-as-baseline { align-self: baseline; }

/* Grow / shrink */
.cx-grow-0 { flex-grow: 0; }
.cx-grow-1 { flex-grow: 1; }
.cx-shrink-0 { flex-shrink: 0; }
.cx-shrink-1 { flex-shrink: 1; }

/* Flex shorthand */
.cx-1 { flex: 1 1 0%; }
.cx-auto { flex: 0 0 auto; }

/* Gap */
.cx-gap-0 { gap: 0; }
.cx-gap-1 { gap: .25rem; }
.cx-gap-2 { gap: .5rem; }
.cx-gap-3 { gap: 1rem; }
.cx-gap-4 { gap: 1.5rem; }
.cx-gap-5 { gap: 3rem; }


/* =========================
   Responsive variants
   Pattern: .cx-{bp}-{utility}
   ========================= */

/* sm ≥ 576px */
@media (min-width: 576px) {
  .cx-sm-flex { display: flex; }
  .cx-sm-inline-flex { display: inline-flex; }

  .cx-sm-row { flex-direction: row; }
  .cx-sm-col { flex-direction: column; }
  .cx-sm-row-rev { flex-direction: row-reverse; }
  .cx-sm-col-rev { flex-direction: column-reverse; }

  .cx-sm-wrap { flex-wrap: wrap; }
  .cx-sm-nowrap { flex-wrap: nowrap; }
  .cx-sm-wrap-rev { flex-wrap: wrap-reverse; }

  .cx-sm-jc-start { justify-content: flex-start; }
  .cx-sm-jc-center { justify-content: center; }
  .cx-sm-jc-end { justify-content: flex-end; }
  .cx-sm-jc-between { justify-content: space-between; }
  .cx-sm-jc-around { justify-content: space-around; }
  .cx-sm-jc-evenly { justify-content: space-evenly; }

  .cx-sm-ai-start { align-items: flex-start; }
  .cx-sm-ai-center { align-items: center; }
  .cx-sm-ai-end { align-items: flex-end; }
  .cx-sm-ai-stretch { align-items: stretch; }
  .cx-sm-ai-baseline { align-items: baseline; }

  .cx-sm-ac-start { align-content: flex-start; }
  .cx-sm-ac-center { align-content: center; }
  .cx-sm-ac-end { align-content: flex-end; }
  .cx-sm-ac-between { align-content: space-between; }
  .cx-sm-ac-around { align-content: space-around; }
  .cx-sm-ac-stretch { align-content: stretch; }

  .cx-sm-as-auto { align-self: auto; }
  .cx-sm-as-start { align-self: flex-start; }
  .cx-sm-as-center { align-self: center; }
  .cx-sm-as-end { align-self: flex-end; }
  .cx-sm-as-stretch { align-self: stretch; }
  .cx-sm-as-baseline { align-self: baseline; }

  .cx-sm-grow-0 { flex-grow: 0; }
  .cx-sm-grow-1 { flex-grow: 1; }
  .cx-sm-shrink-0 { flex-shrink: 0; }
  .cx-sm-shrink-1 { flex-shrink: 1; }

  .cx-sm-1 { flex: 1 1 0%; }
  .cx-sm-auto { flex: 0 0 auto; }

  .cx-sm-gap-0 { gap: 0; }
  .cx-sm-gap-1 { gap: .25rem; }
  .cx-sm-gap-2 { gap: .5rem; }
  .cx-sm-gap-3 { gap: 1rem; }
  .cx-sm-gap-4 { gap: 1.5rem; }
  .cx-sm-gap-5 { gap: 3rem; }
}

/* md ≥ 768px */
@media (min-width: 768px) {
  .cx-md-flex { display: flex; }
  .cx-md-inline-flex { display: inline-flex; }

  .cx-md-row { flex-direction: row; }
  .cx-md-col { flex-direction: column; }
  .cx-md-row-rev { flex-direction: row-reverse; }
  .cx-md-col-rev { flex-direction: column-reverse; }

  .cx-md-wrap { flex-wrap: wrap; }
  .cx-md-nowrap { flex-wrap: nowrap; }
  .cx-md-wrap-rev { flex-wrap: wrap-reverse; }

  .cx-md-jc-start { justify-content: flex-start; }
  .cx-md-jc-center { justify-content: center; }
  .cx-md-jc-end { justify-content: flex-end; }
  .cx-md-jc-between { justify-content: space-between; }
  .cx-md-jc-around { justify-content: space-around; }
  .cx-md-jc-evenly { justify-content: space-evenly; }

  .cx-md-ai-start { align-items: flex-start; }
  .cx-md-ai-center { align-items: center; }
  .cx-md-ai-end { align-items: flex-end; }
  .cx-md-ai-stretch { align-items: stretch; }
  .cx-md-ai-baseline { align-items: baseline; }

  .cx-md-ac-start { align-content: flex-start; }
  .cx-md-ac-center { align-content: center; }
  .cx-md-ac-end { align-content: flex-end; }
  .cx-md-ac-between { align-content: space-between; }
  .cx-md-ac-around { align-content: space-around; }
  .cx-md-ac-stretch { align-content: stretch; }

  .cx-md-as-auto { align-self: auto; }
  .cx-md-as-start { align-self: flex-start; }
  .cx-md-as-center { align-self: center; }
  .cx-md-as-end { align-self: flex-end; }
  .cx-md-as-stretch { align-self: stretch; }
  .cx-md-as-baseline { align-self: baseline; }

  .cx-md-grow-0 { flex-grow: 0; }
  .cx-md-grow-1 { flex-grow: 1; }
  .cx-md-shrink-0 { flex-shrink: 0; }
  .cx-md-shrink-1 { flex-shrink: 1; }

  .cx-md-1 { flex: 1 1 0%; }
  .cx-md-auto { flex: 0 0 auto; }

  .cx-md-gap-0 { gap: 0; }
  .cx-md-gap-1 { gap: .25rem; }
  .cx-md-gap-2 { gap: .5rem; }
  .cx-md-gap-3 { gap: 1rem; }
  .cx-md-gap-4 { gap: 1.5rem; }
  .cx-md-gap-5 { gap: 3rem; }
}

/* lg ≥ 992px */
@media (min-width: 992px) {
  .cx-lg-flex { display: flex; }
  .cx-lg-inline-flex { display: inline-flex; }

  .cx-lg-row { flex-direction: row; }
  .cx-lg-col { flex-direction: column; }

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

  .cx-lg-jc-start { justify-content: flex-start; }
  .cx-lg-jc-center { justify-content: center; }
  .cx-lg-jc-end { justify-content: flex-end; }
  .cx-lg-jc-between { justify-content: space-between; }
  .cx-lg-jc-around { justify-content: space-around; }
  .cx-lg-jc-evenly { justify-content: space-evenly; }

  .cx-lg-ai-start { align-items: flex-start; }
  .cx-lg-ai-center { align-items: center; }
  .cx-lg-ai-end { align-items: flex-end; }
  .cx-lg-ai-stretch { align-items: stretch; }

  .cx-lg-grow-0 { flex-grow: 0; }
  .cx-lg-grow-1 { flex-grow: 1; }

  .cx-lg-gap-0 { gap: 0; }
  .cx-lg-gap-1 { gap: .25rem; }
  .cx-lg-gap-2 { gap: .5rem; }
  .cx-lg-gap-3 { gap: 1rem; }
  .cx-lg-gap-4 { gap: 1.5rem; }
  .cx-lg-gap-5 { gap: 3rem; }
}

/* xl ≥ 1200px */
@media (min-width: 1200px) {
  .cx-xl-flex { display: flex; }
  .cx-xl-inline-flex { display: inline-flex; }

  .cx-xl-row { flex-direction: row; }
  .cx-xl-col { flex-direction: column; }

  .cx-xl-jc-start { justify-content: flex-start; }
  .cx-xl-jc-center { justify-content: center; }
  .cx-xl-jc-end { justify-content: flex-end; }
  .cx-xl-jc-between { justify-content: space-between; }

  .cx-xl-ai-start { align-items: flex-start; }
  .cx-xl-ai-center { align-items: center; }
  .cx-xl-ai-end { align-items: flex-end; }

  .cx-xl-gap-0 { gap: 0; }
  .cx-xl-gap-1 { gap: .25rem; }
  .cx-xl-gap-2 { gap: .5rem; }
  .cx-xl-gap-3 { gap: 1rem; }
  .cx-xl-gap-4 { gap: 1.5rem; }
  .cx-xl-gap-5 { gap: 3rem; }
}

/* xxl ≥ 1400px */
@media (min-width: 1400px) {
  .cx-xxl-flex { display: flex; }
  .cx-xxl-inline-flex { display: inline-flex; }

  .cx-xxl-row { flex-direction: row; }
  .cx-xxl-col { flex-direction: column; }

  .cx-xxl-jc-start { justify-content: flex-start; }
  .cx-xxl-jc-center { justify-content: center; }
  .cx-xxl-jc-end { justify-content: flex-end; }
  .cx-xxl-jc-between { justify-content: space-between; }

  .cx-xxl-ai-start { align-items: flex-start; }
  .cx-xxl-ai-center { align-items: center; }
  .cx-xxl-ai-end { align-items: flex-end; }

  .cx-xxl-gap-0 { gap: 0; }
  .cx-xxl-gap-1 { gap: .25rem; }
  .cx-xxl-gap-2 { gap: .5rem; }
  .cx-xxl-gap-3 { gap: 1rem; }
  .cx-xxl-gap-4 { gap: 1.5rem; }
  .cx-xxl-gap-5 { gap: 3rem; }
}