@layer components {
  .divider {
    --divider-color: var(--color-ink-lighter);

    align-items: center;
    display: flex;
    gap: var(--inline-space);

    &::before,
    &::after {
      background: var(--divider-color);
      block-size: 1px;
      content: "";
      flex: 1;
    }
  }

  .divider--fade {
    &::before {
      background: linear-gradient(to right, transparent, var(--divider-color) 50%);
    }

    &::after {
      background: linear-gradient(to left, transparent, var(--divider-color) 50%);
    }
  }
}