@quoine/core/components/Field/styles.css

.label {
  composes: primary-3 from "@quoine/styles/color.css";
}

/* === */

.main-ratio {
  composes: flex from "@quoine/styles/flex.css";
}
._ratio-child {
  /* prevent element from stretching to contain its children  */
  min-width: 0;
}
.ratio-1 {
  composes: _ratio-child;
  flex: 1 1 0px;
}
.ratio-2 {
  composes: _ratio-child;
  flex: 2 1 0px;
}
.ratio-3 {
  composes: _ratio-child;
  flex: 3 1 0px;
}

/* === */

.main-inline {
  composes: flex from "@quoine/styles/flex.css";
  composes: width-full from "@quoine/styles/size.css";
}
.label-inline {
  composes: fix from "@quoine/styles/flex.css";
  composes: nowrap from "@quoine/styles/text.css";
}
.label-inline:after {
  content: ':';
}
.children-inline {
  composes: auto from "@quoine/styles/flex.css";
  composes: left-small from "@quoine/styles/margin.css";
  composes: break-word from "@quoine/styles/text.css";
}

/* === */

.main-justify {
  composes: flex jc-space-between from "@quoine/styles/flex.css";
}
.label-justify {
  composes: fix from "@quoine/styles/flex.css";
}
.children-justify {
  composes: fix from "@quoine/styles/flex.css";
}


/* === */
/* manually value here to match with line-height 36px */
.main-reverse {
  composes: flex column from "@quoine/styles/flex.css";
  padding-bottom: 4px;
}
/* match with ProductOverviewSmall */
.label-reverse {
  composes: small from "@quoine/styles/text.css";
  line-height: 10px;
  order: 2;
}
.children-reverse {
  composes: large from "@quoine/styles/text.css";
  line-height: 22px;
  order: 1;
}