:root, :host {
    /**
     * Rollup milestone z-index
     */
    --b-rollup-milestone-z-index : 2;

    /**
     * Size of rolled up milestones
     */
    --b-rollup-milestone-size : .5em;

    /**
     * Rollup primary color
     */
    --b-rollup-primary        : var(--b-color-green);
}

.b-colorize {
    /**
     * Rollup background. By default a shade of its primary color
     */
    --b-rollup-background        : var(--b-primary-70);

    /**
     * Rollup milestone primary color
     */
    --b-rollup-milestone-primary : var(--b-gantt-milestone-primary);
}

.b-task-rollup-wrap {
    grid-area  : rollup;
    display    : block;
    align-self : stretch;
    position   : relative;
    min-height : 3px;
    height     : 0.2em;
    margin-top : .15em;
}

.b-task-rollup {
    position    : absolute;
    height      : 100%;
    opacity     : .8;

    --b-primary : var(--b-rollup-primary);
    background  : var(--b-rollup-background);
}

.b-task-rollup.b-inactive {
    --b-primary : var(--b-gantt-inactive-task-color);
}

.b-rollups {
    .b-baseline-wrap {
        top : 0.6em;
    }

    .b-gantt-task-parent:not(.b-milestone-wrap) .b-gantt-task {
        min-height : 1em;
    }
}

.b-task-rollup:where(.b-milestone) {
    top              : 50%;
    transform        : translateY(-50%) translateX(-50%) rotate(45deg);
    transform-origin : 50% 50%;
    opacity          : .9;
    z-index          : var(--b-rollup-milestone-z-index);

    width            : var(--b-rollup-milestone-size);
    height           : var(--b-rollup-milestone-size);

    --b-primary      : var(--b-rollup-milestone-primary);
}

.b-gantt-rollups-tooltip {
    .b-gantt-task-title:not(:first-child) {
        margin-top : 1em;
    }

    td:last-child {
        padding-inline-start : 1em;
    }
}
