.divider {
  --color-accent: currentcolor;

  display: flex;
  align-items: center;
  align-self: stretch;

  &:where(:not(:empty)) {
    gap: var(--divider-gap, calc(var(--spacing) * 3));
  }

  &::before,
  &::after {
    content: "";
    flex-grow: 1;
    border: 0;
    border-block-start:
      1px solid color-mix(
        in var(--divider-border-block-color-space, srgb),
        var(--divider-border-block-color, var(--color-accent)) var(--divider-border-block-color-opacity, 15%),
        var(--divider-border-block-color-mix, transparent)
      );
  }

  &:where(.flex-col) {
    &::before,
    &::after {
      border: 0;
      border-inline-start:
        1px solid color-mix(
          in var(--divider-border-inline-color-space, srgb),
          var(--divider-border-inline-color, var(--color-accent)) var(--divider-border-inline-color-opacity, 15%),
          var(--divider-border-inline-color-mix, transparent)
        );
    }
  }
}