// ====================================
// NextGen Framework Flexbox Utilities
// ====================================

@use '../index' as *;
@use 'sass:map';

// Enable flex
// ------------------------------------
.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

// Flex direction
// ------------------------------------
.flex-row {
  flex-direction: row !important;
}

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

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

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

// Flex wrap
// ------------------------------------
.flex-wrap {
  flex-wrap: wrap !important;
}

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

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

// Flex grow and shrink
// ------------------------------------
.flex-grow-0 {
  flex-grow: 0 !important;
}

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

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

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

// Justify content
// ------------------------------------
.justify-content-start {
  justify-content: flex-start !important;
}

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

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

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

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

// Align items
// ------------------------------------
.align-items-start {
  align-items: flex-start !important;
}

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

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

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

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

// Align self
// ------------------------------------
.align-self-auto {
  align-self: auto !important;
}

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

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

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

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

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

// Gap utilities
// ------------------------------------
.gap-0 {
  gap: 0 !important;
}

.gap-1 {
  gap: $spacer * 0.25 !important;
}

.gap-2 {
  gap: $spacer * 0.5 !important;
}

.gap-3 {
  gap: $spacer !important;
}

.gap-4 {
  gap: $spacer * 1.5 !important;
}

.gap-5 {
  gap: $spacer * 3 !important;
}

// Row gap
.row-gap-0 {
  row-gap: 0 !important;
}

.row-gap-1 {
  row-gap: $spacer * 0.25 !important;
}

.row-gap-2 {
  row-gap: $spacer * 0.5 !important;
}

.row-gap-3 {
  row-gap: $spacer !important;
}

.row-gap-4 {
  row-gap: $spacer * 1.5 !important;
}

.row-gap-5 {
  row-gap: $spacer * 3 !important;
}

// Column gap
.column-gap-0 {
  column-gap: 0 !important;
}

.column-gap-1 {
  column-gap: $spacer * 0.25 !important;
}

.column-gap-2 {
  column-gap: $spacer * 0.5 !important;
}

.column-gap-3 {
  column-gap: $spacer !important;
}

.column-gap-4 {
  column-gap: $spacer * 1.5 !important;
}

.column-gap-5 {
  column-gap: $spacer * 3 !important;
}