:root, :host {
    /**
     * Dependency list filter z-index (sticky header)
     */
    --b-dependency-field-list-filter-z-index           : 1;

    /**
     * Border color for the event bar illustration in the dependency field list
     */
    --b-dependency-field-list-event-border-color : var(--b-neutral-75);
}

/* .b-bryntum { */
    /**
     * Color of the illustrational terminals in the dependency field list
     */
    /*--b-dependency-field-list-dependency-terminal-color : var(--b-dependency-tooltip-terminal-color);*/

    /**
     * Background of the event bar illustration in the dependency field list
     */
    /*--b-dependency-field-list-event-background          : var(--b-dependency-tooltip-event-background);*/
/* } */

.b-dependency-list-filter {
    position         : sticky;
    top              : 0;
    z-index          : var(--b-dependency-field-list-filter-z-index);
    background-color : var(--b-list-background);
}

.b-predecessor-list {
    display        : flex;
    flex-direction : column;

    > * {
        flex       : 0 0 auto;
        align-self : stretch;
        width      : auto;
    }

    /* Predecessor picker item */
    > .b-list-item {
        .b-predecessor-item-text {
            flex : 1;
        }

        .b-sch-box {
            width               : 1.2em;
            height              : .9em;
            border-radius       : 2px;
            margin-inline-start : .5em;
            position            : relative;
            pointer-events      : all;

            border              : 1px solid var(--b-dependency-field-list-event-border-color);

            &:after {
                content          : '';
                width            : .5em;
                height           : .5em;
                border-radius    : 50%;
                position         : absolute;
                display          : none;
                top              : 50%;
                translate        : 0 -50%;

                background-color : var(--b-dependency-field-list-dependency-terminal-color, var(--b-dependency-tooltip-terminal-color, var(--b-primary-50)));
            }
        }

        &.b-selected {
            .b-sch-box {
                background-color : var(--b-dependency-field-list-event-background, var(--b-dependency-tooltip-event-background, var(--b-primary-85)));

                &::after {
                    display : block;
                }
            }

            /* Finish to Start */
            &.b-fs {
                .b-sch-box {
                    &.b-from::after {
                        inset-inline-end : -.25em;
                    }

                    &.b-to::after {
                        inset-inline-start : -.25em;
                    }
                }
            }

            /* Start to Finish */
            &.b-sf {
                .b-sch-box {
                    &.b-from::after {
                        inset-inline-start : -.25em;
                    }

                    &.b-to::after {
                        inset-inline-end : -.25em;
                    }
                }
            }

            /* Start to Start */
            &.b-ss {
                .b-sch-box {
                    &.b-from::after {
                        inset-inline-start : -.25em;
                    }

                    &.b-to::after {
                        inset-inline-start : -.25em;
                    }
                }
            }

            /* Finish to Finish */
            &.b-ff {
                .b-sch-box {
                    &.b-from::after {
                        inset-inline-end : -.25em;
                    }

                    &.b-to::after {
                        inset-inline-end : -.25em;
                    }
                }
            }
        }
    }
}
