@mussonindustrial/pyro-mui-joy/src/classes/divider.css

A port of Material UI Joy Theme for Ignition by Inductive Automation

/* A divider is a thin line that groups content in lists and layouts. */
[psc='Joy/Container/divider-horizontal'],
[psc='Joy/Container/divider-vertical'] {
    --joy-Divider-thickness: 1px;
    --joy-Divider-lineColor: var(--joy-palette-divider);
    --joy-Divider-gap: 8px;
    --joy-Divider-childPosition: 50%;
    white-space: nowrap;
    border: 0px;
    font-family: var(--joy-joy-fontFamily-body);
    font-size: var(--joy-joy-fontSize-sm);
    padding: 0px !important;

    &:empty {
        background-color: var(--joy-Divider-lineColor);

        &:before,
        &:after {
            content: none;
        }
    }

    &:before,
    &:after {
        position: relative;
        background-color: var(--joy-Divider-lineColor);
        content: '';
    }

    &:before {
        flex-basis: var(--joy-Divider-childPosition);
    }

    &:after {
        flex-basis: calc(100% - var(--joy-Divider-childPosition));
    }

    &[psc='Joy/Container/card-overflow'] {
        --joy-_Divider-inset: var(--joy-Divider-inset, 0px);
    }
}

[psc='Joy/Container/divider-horizontal'] {
    margin-inline: var(--joy-_Divider-inset);
    margin-block: initial;

    &:empty {
        inline-size: initial;
        block-size: var(--joy-Divider-thickness);
    }

    &:before,
    &:after {
        inline-size: initial;
        block-size: var(--joy-Divider-thickness);
    }

    &:before {
        margin-inline-end: min(
            var(--joy-Divider-childPosition) * 999,
            var(--joy-Divider-gap)
        );
        margin-block-end: initial;
    }

    &:after {
        margin-inline-start: min(
            (100% - var(--joy-Divider-childPosition)) * 999,
            var(--joy-Divider-gap)
        );
        margin-block-start: initial;
    }
}

[psc='Joy/Container/divider-vertical'] {
    margin-inline: initial;
    margin-block: var(--joy-_Divider-inset);

    &:empty {
        inline-size: var(--joy-Divider-thickness);
        block-size: initial;
    }

    &:before,
    &:after {
        inline-size: var(--joy-Divider-thickness);
        block-size: initial;
    }

    &:before {
        margin-inline-end: initial;
        margin-block-end: min(
            var(--joy-Divider-childPosition) * 999,
            var(--joy-Divider-gap)
        );
    }

    &:after {
        margin-inline-start: initial;
        margin-block-start: min(
            (100% - var(--joy-Divider-childPosition)) * 999,
            var(--joy-Divider-gap)
        );
    }
}