@layer components {
  .rs-divider {
    --rs-divider-color: var(--rs-color-border-neutral-faded);
    display: flex;
    align-items: center;
    gap: var(--rs-unit-x2);
    inline-size: 100%;
    border: 0;
    color: var(--rs-color-foreground-neutral-faded);
    font-size: var(--rs-font-size-caption-1);
    line-height: var(--rs-line-height-caption-1);
  }

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

  .rs-divider[data-tone="neutral"] {
    --rs-divider-color: var(--rs-color-border-neutral);
  }

  .rs-divider[data-align="start"]::before,
  .rs-divider:empty::after {
    content: none;
  }

  .rs-divider[data-vertical] {
    inline-size: auto;
    align-self: stretch;
    flex-direction: column;
    min-block-size: 100%;
  }

  .rs-divider[data-vertical]::before,
  .rs-divider[data-vertical]::after {
    inline-size: 1px;
    block-size: auto;
  }
}