wix-style-react/dist/src/FieldSet/FieldSet.st.css

wix-style-react

@st-import [
  --wds-field-set-gap-small,
  --wds-field-set-gap-medium,
  --wds-field-set-gap-large,

  --wds-field-set-label-gap-small,
  --wds-field-set-label-gap-tiny,
] from "@wix/design-system-tokens/all.st.css";

:vars {
  labelChildrenSpacingMap: st-map(tiny var(--wds-field-set-label-gap-tiny, 9px), small var(--wds-field-set-label-gap-small, 9px));
  labelGap: 6px;
}

.children {
  -st-states: childrenWithInlineLabel,
    alignment(enum(start, center, end)),
    direction(enum(horizontal, vertical)),
    gap(enum(small, medium, large));

  width: 100%;
  display: grid;

  /* default alignment, direction & gap */
  align-items: flex-start;
  grid-auto-flow: column;
  justify-items: stretch;
  gap: var(--wds-field-set-gap-small, 6px);
}

.children:alignment(start) {
  justify-items: start;
  align-items: flex-start;
}

.children:alignment(center) {
  justify-items: center;
  align-items: center;
}

.children:alignment(end) {
  justify-items: end;
  align-items: flex-end;
}

.children:direction(horizontal) {
  grid-auto-flow: column;
  justify-items: stretch;
}

.children:direction(vertical) {
  grid-auto-flow: row;
}

.children:gap(small) {
  gap: var(--wds-field-set-gap-small, 6px);
}

.children:gap(medium) {
  gap: var(--wds-field-set-gap-medium, 12px);
}

.children:gap(large) {
  gap: var(--wds-field-set-gap-large, 18px);
}

.root {
  -st-states: labelPlacement(enum(top, left, right, none)), labelAlignment(enum(top, middle)), hasInlineElements, hasOnlySuffix, labelSize(enum(tiny, small));
  border: none;
  padding: 0;
  margin: 0;
  /* allows label ellipsis */
  min-inline-size: auto;
  display: flex;
  flex-wrap: wrap;
  width: 100%
}

.root:hasInlineElements {
  display: grid;
  grid-template-columns: 1fr max-content;
}

.root:labelAlignment(top) {
  align-items: flex-start;
}

.root:labelPlacement(left) {
  grid-template-columns: max-content 1fr;
}

.root:labelPlacement(left) .labelIndicators {
  order: 1;
}

.root:labelPlacement(left) .children {
  order: 2;
}

.root:labelSize(tiny):labelPlacement(top) .children,
.root:labelSize(tiny):hasOnlySuffix .children {
  padding-top: value(labelChildrenSpacingMap, tiny);
}

.root:labelSize(small):labelPlacement(top) .children,
.root:labelSize(small):hasOnlySuffix .children {
  padding-top: value(labelChildrenSpacingMap, small);
}

.root:labelPlacement(top) .labelRow {
  display: flex;
  align-items: flex-end;
  flex: 1 0 auto;
  max-width: 100%;
  justify-content: space-between;
}

.labelRowMain {
  display: flex;
  min-width: 0;
  gap: value(labelGap);
}

.suffixRow {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.visuallyHidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* st-namespace-reference="../../../src/FieldSet/FieldSet.st.css" */