.b-bryntum {
    --station-background      : var(--b-neutral-90);
    --station-color           : var(--b-neutral-50);
    --event-color             : #9a9a9a;
    --parent-background       : var(--b-neutral-90);
    --parent-hover-background : var(--b-neutral-80);
    --parent-color            : var(--b-neutral-30);
}

/* Parent styling */
.b-sch-event-wrap.b-nested-events-parent {
    --b-nested-events-container-background          : transparent;
    --b-nested-events-container-hover-background    : transparent;
    --b-nested-events-container-selected-background : transparent;

    /* Gray backdrop, extending outside of the event */
    &::before {
        content          : '';
        opacity          : 0.5;
        position         : absolute;
        inset            : -5px;
        transition       : background-color 0.2s;

        background-color : var(--parent-background);
        border-radius    : var(--b-widget-border-radius);
    }

    /* Alter backdrop on hover */
    &:hover,
    &.b-selected {
        --parent-background : var(--parent-hover-background);
    }

    > .b-sch-event:where(:not(.b-milestone)) {
        color : var(--parent-color);

        > .b-sch-event-content {
            margin-inline-start : 0.35em;
            align-self          : start;

            i.fa {
                font-size        : 1.2em;
                margin           : 0;
                position         : absolute;
                top              : 0.1em;
                inset-inline-end : 0.5em;
                opacity          : 0.7;
                transition       : opacity .2s;
                cursor           : pointer;

                &:hover {
                    opacity : 1;
                }
            }
        }

        > .b-task-percent-bar-outer {
            display : none;
        }
    }

    &.exceeded {
        --parent-color : var(--b-color-red);

        &::before {
            border : 1px solid red;
        }
    }
}

/* Nested event styling */
.b-sch-event-wrap.b-nested-event {
    --b-sch-event-background            : currentColor;
    --b-sch-event-hover-background      : color-mix(in srgb, currentColor, var(--b-opposite) 5%);
    --b-sch-event-selected-background   : color-mix(in srgb, currentColor, var(--b-opposite) 10%);
    --b-sch-event-border-radius         : 3px;
    --b-percent-bar-background          : color-mix(in srgb, currentColor, var(--b-opposite) 20%);
    --b-percent-bar-hover-background    : color-mix(in srgb, currentColor, var(--b-opposite) 25%);
    --b-percent-bar-selected-background : color-mix(in srgb, currentColor, var(--b-opposite) 30%);

    .b-sch-event-wrap > .b-sch-event,
    .b-sch-event-resizing .b-sch-event-wrap:not(.b-nested-events-parent) > .b-sch-event {
        /* Create some space between nested events horizontally */
        width              : calc(100% - 6px);
        inset-inline-start : 3px;
    }

    .b-sch-event-content {
        color : #fff;
    }
}

.b-grid-cell[data-column=name] {
    display               : grid;
    grid-template-columns : 3em 1fr;
    gap                   : 0.5em 1em;
    align-content         : center;

    i {
        grid-row         : 1 / 3;
        font-size        : 1.5em;
        min-width        : 2em;
        height           : 2em;
        border-radius    : 50%;
        display          : flex;
        align-items      : center;
        justify-content  : center;
        background-color : var(--station-background);
        color            : var(--station-color);
    }

    .name {
        font-weight : bold;
    }
}