/*
 * <x-divider>: M3's divider (DividerTokens.kt, androidx Compose Material 3, Apache-2.0) — a single
 * 1px outline-variant line, full-width by default, `data-md-inset` 16px from the start or
 * `data-md-middle` 16px from both ends (docs/reference/m3/components-actions-communication-containment.md
 * § Divider → Specs: "Divider inset left margin 16dp", "Divider middle-inset left/right margin
 * 16dp"). A vertical divider (`data-md-orientation="vertical"`) stretches the height of its row
 * instead of drawing a width.
 *
 * `data-md-divider-heading` draws the divider with a subheader, M3's way to head a group in a list
 * or a menu: the words lead, 4px of gap to the rule that runs on from them, 8px short of the end
 * and 8px above the next row (the same section's "Space between divider & supporting text 4dp",
 * "Divider right margin 8dp", "Divider bottom margin 8dp"). The label, `data-md-divider-text`, is
 * the rich tooltip's subhead type — title-small in on-surface-variant — since the divider's own
 * page names no type role for it.
 */

@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

@layer material.components {
    [data-md-divider] {
        flex-shrink: 0;
        background-color: var(--md-sys-color-outline-variant);
    }

    [data-md-divider][data-md-orientation='horizontal'] {
        width: auto;
        height: 1px;
    }

    [data-md-divider][data-md-orientation='vertical'] {
        width: 1px;
        align-self: stretch;
    }

    [data-md-divider][data-md-orientation='horizontal'][data-md-inset] {
        margin-inline-start: var(--md-sys-measurement-space200);
    }

    [data-md-divider][data-md-orientation='horizontal'][data-md-middle] {
        margin-inline: var(--md-sys-measurement-space200);
    }

    [data-md-divider][data-md-orientation='vertical'][data-md-middle] {
        margin-block: var(--md-sys-measurement-space100);
    }

    [data-md-divider-heading] {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        gap: var(--md-sys-measurement-space50);
        padding-bottom: var(--md-sys-measurement-space100);
    }

    [data-md-divider-heading][data-md-inset] {
        margin-inline-start: var(--md-sys-measurement-space200);
    }

    [data-md-divider-heading][data-md-middle] {
        margin-inline: var(--md-sys-measurement-space200);
    }

    [data-md-divider-text] {
        flex-shrink: 0;
        color: var(--md-sys-color-on-surface-variant);
        font: var(--md-sys-typescale-title-sm);
        letter-spacing: var(--md-sys-typescale-title-sm-tracking);
    }

    [data-md-divider-heading] [data-md-divider] {
        flex: 1 1 0%;
        min-width: 0;
        margin-inline-end: var(--md-sys-measurement-space100);
    }
}