// Flex component styles using CSS variables
// CSS variables should be defined at :root level and mapped to theme settings

.flex {
  display: var(--hscl-flex-display, flex);
  flex-direction: var(--hscl-flex-direction, row);
  flex-wrap: var(--hscl-flex-wrap, nowrap);
  justify-content: var(--hscl-flex-justifyContent, flex-start);
  align-items: var(--hscl-flex-alignItems, stretch);
  align-content: var(--hscl-flex-alignContent, stretch);
  gap: var(--hscl-flex-gap, 0);
  padding-inline: var(--hscl-flex-paddingInline, 0);
  padding-block: var(--hscl-flex-paddingBlock, 0);
  margin-inline: var(--hscl-flex-marginInline, 0);
  margin-block: var(--hscl-flex-marginBlock, 0);
  max-width: var(--hscl-flex-maxWidth, 100%);
  max-height: var(--hscl-flex-maxHeight, auto);
}
