ACSS: Divider in Bricks.md

Variables

Damit sie nicht mit Core Framework kollidieren (hat auch eine .divider) habe ich sie hier mit lm- gekennzeichnet

:root {
  --lm-divider-size: 1px;
  --lm-divider-style: solid;
  --lm-divider-inline-size: 100%;
  --lm-divider-gap: var(--content-gap);
  --lm-divider-color-dark: var(--black-20);
  --lm-divider-color-light: var(--white-20);
  --lm-divider: var(--lm-divider-size) var(--lm-divider-style) var(--lm-divider-color-dark);
  --lm-divider-light: var(--lm-divider-size) var(--lm-divider-style) var(--lm-divider-color-light);
  --lm-divider-dark: var(--lm-divider-size) var(--lm-divider-style) var(--lm-divider-color-dark);
}

Klassen

.lm-divider-bottom {
  position: relative;
  overflow: visible;
  margin-block-end: calc(var(--lm-divider-gap) * 2);
}
.lm-divider-bottom::after {
  inset-block-end: calc(var(--lm-divider-gap) * -1 - var(--lm-divider-size));
}
.lm-divider-bottom::after {
  content: "";
  display: block;
  position: absolute;
  inset-inline-start: 0;
  inline-size: var(--lm-divider-inline-size);
  border-block-end: var(--lm-divider);
}
.lm-divider-top {
  position: relative;
  overflow: visible;
  margin-block-start: calc(var(--lm-divider-gap) * 2);
}
.lm-divider-top::after {
  inset-block-start: calc(var(--lm-divider-gap) * -1 - var(--lm-divider-size));
}
.lm-divider-top::after {
  content: "";
  display: block;
  position: absolute;
  inset-inline-start: 0;
  inline-size: var(--lm-divider-inline-size);
  border-block-end: var(--lm-divider);
}
.lm-divider--all {
  row-gap: 0;
}
.lm-divider--all > *:not(:last-child) {
  position: relative;
  overflow: visible;
  margin-block-end: calc(var(--lm-divider-gap) * 2);
}
.lm-divider--all > *:not(:last-child)::after {
  inset-block-end: calc(var(--lm-divider-gap) * -1 - var(--lm-divider-size));
}
.lm-divider--all > *:not(:last-child)::after {
  content: "";
  display: block;
  position: absolute;
  inset-inline-start: 0;
  inline-size: var(--lm-divider-inline-size);
  border-block-end: var(--lm-divider);
}