/* Indux Dividers */

@layer utilities {

    :where(.divider) {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 1px;
        margin: var(--spacing-field-padding, 0.625rem) 0;
        white-space: nowrap;
        font-size: 0.875rem;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));

        /* Lines before and after content */
        &:before,
        &:after {
            content: "";
            display: inline-flex;
            flex: 1;
            width: auto;
            height: 1px;
            background-color: var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15))
        }

        /* Space between lines and content */
        &:not(:empty) {
            gap: var(--spacing-field-padding, 0.625rem)
        }
    }

    /* Start modifier */
    :where(.divider.start) {
        justify-content: flex-start;
        
        &:before {
            display: none
        }
    }

    /* End modifier */
    :where(.divider.end) {
        justify-content: flex-end;
        
        &:after {
            display: none
        }
    }

    /* Vertical modifier */
    .divider.vertical {
        align-self: stretch;
        flex-flow: column nowrap;
        width: fit-content;
        min-width: 1px;
        height: auto;
        min-height: 100%;
        margin: 0 var(--spacing-field-padding, 0.625rem);

        &:before,
        &:after {
            content: "";
            width: 1px;
            height: auto;
            min-height: 1px;
        }

        /* Icon */
        & [x-icon] {
            flex-shrink: 0;
            min-height: 0.875rem;
            font-size: 0.875rem
        }
    }
}