// Flexbox layout atoms - LLM-friendly semantic classes

/**
 * @section Flex Containers
 */

/** @public Horizontal flex with gap, wraps */
.row {
  display: flex;
  flex-direction: row;
  gap: var(--gap-md);
  flex-wrap: wrap;
}

/** @public Horizontal flex, no wrap */
.row-nowrap {
  display: flex;
  flex-direction: row;
  gap: var(--gap-md);
  flex-wrap: nowrap;
}

/** @public Vertical flex column with gap */
.col {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

/**
 * @section Alignment Shortcuts
 */

/** @public Center both axes */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/** @public Center horizontally */
.center-x {
  display: flex;
  justify-content: center;
}

/** @public Center vertically */
.center-y {
  display: flex;
  align-items: center;
}

/** @public Flex-start both axes */
.start {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

/** @public Flex-start horizontally */
.start-x {
  display: flex;
  justify-content: flex-start;
}

/** @public Flex-start vertically */
.start-y {
  display: flex;
  align-items: flex-start;
}

/** @public Flex-end both axes */
.end {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

/** @public Flex-end horizontally */
.end-x {
  display: flex;
  justify-content: flex-end;
}

/** @public Flex-end vertically */
.end-y {
  display: flex;
  align-items: flex-end;
}

/** @public Space-between with center-y */
.between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/** @public Space-between horizontally */
.between-x {
  display: flex;
  justify-content: space-between;
}

/** @public Space-around with center-y */
.around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/** @public Space-evenly with center-y */
.evenly {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

/**
 * @section Flex Items
 */

/** @public Grow/shrink equally */
.flex-1 {
  flex: 1 1 0%;
}

/** @public Grow/shrink to content */
.flex-auto {
  flex: 1 1 auto;
}

/** @public Don't flex */
.flex-none {
  flex: none;
}

/** @public Allow growing */
.flex-grow {
  flex-grow: 1;
}

/** @public Allow shrinking */
.flex-shrink {
  flex-shrink: 1;
}

/** @public Prevent shrinking */
.flex-no-shrink {
  flex-shrink: 0;
}

// Wrap utilities (internal - typically use .row which wraps by default)
/** @public Enable flex wrap */
.wrap {
  flex-wrap: wrap;
}

/** @public Disable flex wrap */
.nowrap {
  flex-wrap: nowrap;
}

/**
 * @section Small Gap Variants
 */

/** @public Horizontal flex with small gap, wraps */
.row-xs {
  display: flex;
  flex-direction: row;
  gap: var(--gap-sm);
  flex-wrap: wrap;
}

// Internal variant
/** @public XS screen no-wrap row */
.row-xs-nowrap {
  display: flex;
  flex-direction: row;
  gap: var(--gap-sm);
  flex-wrap: nowrap;
}

/** @public Vertical flex column with small gap */
.col-xs {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

/**
 * @section Responsive Variants
 */

// Tablet breakpoint @768px
@media (max-width: 768px) {
  /** @public Direction change to column @768px */
  .md-col {
    flex-direction: column;
  }

  /** @public Direction change to row @768px */
  .md-row {
    flex-direction: row;
  }

  /** @public Center both axes @768px */
  .md-center {
    justify-content: center;
    align-items: center;
  }
}

// Mobile breakpoint @480px
@media (max-width: 480px) {
  /** @public Direction change to column @480px */
  .xs-col {
    flex-direction: column;
  }
  
  /** @public Direction change to row @480px */
  .xs-row {
    flex-direction: row;
  }
  
  /** @public Center both axes @480px */
  .xs-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /** @public Center horizontally @480px */
  .xs-center-x {
    display: flex;
    justify-content: center;
  }
  
  /** @public Center vertically @480px */
  .xs-center-y {
    display: flex;
    align-items: center;
  }
  
  /** @public Flex-start both axes @480px */
  .xs-start {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  
  /** @public Flex-start horizontally @480px */
  .xs-start-x {
    display: flex;
    justify-content: flex-start;
  }
  
  /** @public Flex-start vertically @480px */
  .xs-start-y {
    display: flex;
    align-items: flex-start;
  }
  
  /** @public Flex-end both axes @480px */
  .xs-end {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }
  
  /** @public Flex-end horizontally @480px */
  .xs-end-x {
    display: flex;
    justify-content: flex-end;
  }
  
  /** @public Flex-end vertically @480px */
  .xs-end-y {
    display: flex;
    align-items: flex-end;
  }
  
  /** @public Space-between with center-y @480px */
  .xs-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  /** @public Space-between horizontally @480px */
  .xs-between-x {
    display: flex;
    justify-content: space-between;
  }
  
  /** @public Space-around with center-y @480px */
  .xs-around {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  
  /** @public Space-around horizontally @480px */
  .xs-around-x {
    display: flex;
    justify-content: space-around;
  }
  
  /** @public Space-evenly with center-y @480px */
  .xs-evenly {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  
  /** @public Space-evenly horizontally @480px */
  .xs-evenly-x {
    display: flex;
    justify-content: space-evenly;
  }
}