CSS utilities

<div className="flex items:center">
  <div className="p:small border">Element</div>
  <div className="p:medium border">Element</div>
  <div className="p:small ml:auto borderLeft">Element</div>
</div>

<>
  <div className="mb:medium">
    <div className="block xsm-block sm-none">show on xsmall and smaller</div>
    <div className="none sm-block md-none">show only on small</div>
    <div className="none sm-none md-block lg-none">show only on medium</div>
    <div className="none sm-none md-none lg-block">show on large and up</div>
  </div>

  <div className="c:red xsm-c:red sm-c:grey5 px:xsmall border">red on xsmall and smaller</div>
  <div className="c:grey5 sm-c:red md-c:grey5 px:xsmall border">red only on small</div>
  <div className="c:grey5 sm-c:grey5 md-c:red lg-c:grey5 px:xsmall border">red only on medium</div>
  <div className="c:grey5 sm-c:grey5 md-c:grey5 lg-c:red px:xsmall border">red on large and larger</div>
</>

<div className="flex">
  <div className="p:medium grow:1 mr:medium shadow:medium radius:medium text:center">A</div>
  <div className="border p:medium grow:1 c:bodyDimmed radius:medium bgc:backgroundHover text:center">B</div>
</div>

<>
  <div className="text:mainTitle mb:small">{demoText.title}</div>
  <div className="text:title mb:small">{demoText.medium}</div>
  <div className="text:body">{demoText.long}</div>
</>

<div className="flex">
  <div className="border p:medium grow:1">A</div>
  <div className="border p:medium grow:1 ml:small">B</div>
  <div className="border p:medium shrink:0 mr:small ml:small">C</div>
</div>

<div className="flex items:center">
  <div className="border p:medium">A</div>
  <div className="border p:xlarge ml:small">B</div>
  <div className="border p:medium self:flexEnd mr:small ml:small">C</div>
  <div className="border p:small self:flexStart mr:small ml:small">D</div>
  <div className="border p:medium mr:small ml:small">E</div>
</div>

<div className="flex">
  <div className="text:center relative width:full border p:large">
    Relative
    <div className="absolute right:0 top:0 border">
      <div className="p:small">Absolute</div>
    </div>
  </div>
</div>

<div className="relative bgc:white overflow:auto border" style={{ maxHeight: '10rem' }}>
  {[1, 2, 3].map((letter, index) => (
    <h2 className="text:mainTitle px:medium" key={index}>{letter}</h2>
  ))}
  <div className="sticky top:0 bgc:background p:medium border">Sticky</div>
  {demoText.alphabet.map((letter, index) => (
    <h2 className="text:mainTitle px:medium" key={index}>{letter}</h2>
  ))}
</div>

<>
  <div className="flex mb:medium">
    <div className="minWidth:0">
      <div className="p:small grow:1 border ellipsis">{demoText.long}</div>
    </div>
  </div>
  <div className="flex">
    <div className="p:small grow:1 border ellipsis">{demoText.long}</div>
  </div>
</>

<div className="p:large shadow:medium radius:large">
  <div className="text:title mb:small">{demoText.medium}</div>
  <div className="text:body mb:large">{demoText.long}</div>
  <div className="flex flexWrap items:center">
    <Button className="mr:small">Cancel</Button>
    <Button variant="primary">Save</Button>
    <TextButton className="ml:auto">Options</TextButton>
  </div>
</div>