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

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

        &:before,
        &:after {
            background: var(--divider-color);
            block-size: var(--divider-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%);
        }
    }
}