:root, :host {
    /**
     * Baseline wrap size, as a fraction of the event size. This is the height of the baseline wrap, shared by all
     * baselines
     */
    --b-baseline-wrap-size           : 0.6; /* Part of --b-event-size */

    /**
     * Baseline border width
     */
    --b-baseline-border-width        : null;

    /**
     * Baseline border color
     */
    --b-baseline-border-color        : null;

    /**
     * Baseline margin top
     */
    --b-baseline-margin-top          : 1px;

    /**
     * Baseline transition duration
     */
    --b-baseline-transition-duration : 0.2s;

    /**
     * Baseline flex
     */
    --b-baseline-flex                : 0.5;

    /**
     * Baseline border radius
     */
    --b-baseline-border-radius       : 2px;

    --b-baseline-background : var(--b-neutral-90);
}

/* Baseline wraps are positioned on same level as task wraps */
.b-baseline-wrap {
    display        : flex;
    flex-direction : column;
    position       : absolute;
    transition     : none;
    /* z-index        : $event-zindex; */

    /* This puts them below the task wrap, keeping calculations simple */
    translate      : 0 calc(1px * (1 - var(--b-baseline-wrap-size)) * var(--b-event-size));
    height         : calc(1px * var(--b-baseline-wrap-size) * var(--b-event-size));
}

.b-task-baseline {
    /* font-size        : $event-font-size; */
    /* Baselines are shifted to before/after the task */
    position            : relative;
    transition-property : flex, border, font-size;
    pointer-events      : all;

    /* Baselines are hidden by flexing down to zero height by default */
    flex                : var(--b-baseline-flex);
    border              : var(--b-baseline-border-width) solid var(--b-baseline-border-color);
    border-radius       : var(--b-baseline-border-radius);
    transition-duration : var(--b-baseline-transition-duration);
    background          : var(--b-baseline-background);
    margin-top          : var(--b-baseline-margin-top);

    .b-animating & {
        transition-property : flex, border-width, font-size, width, inset-inline-start;
    }

    &:not(.b-milestone-wrap) {
        min-width : var(--b-gantt-task-min-width);
    }
}

/* Shrink tasks when using baselines, to fit baselines below */
.b-baselines .b-gantt-task-wrap.b-has-baselines {
    /* Height reduced with size of baseline wrap */
    height : calc(1px * (1 - var(--b-baseline-wrap-size)) * var(--b-event-size));

    /* Also shrink milestone icons */
    &.b-milestone-wrap {
        --b-milestone-size : calc(var(--b-event-size) * 0.6px);

        transition         : flex var(--b-baseline-transition-duration), font-size var(--b-baseline-transition-duration);
    }
}

.b-task-baseline-milestone {
    border : none;

    &::before {
        position         : absolute;
        top              : 50%;
        left             : 50%;
        content          : ' ';
        /* TODO 0.3 could be calculated */
        height           : calc(0.707107 * var(--b-event-size) * 0.3 * 1px);
        width            : calc(0.707107 * var(--b-event-size) * 0.3 * 1px);
        transform-origin : 50% 50%;
        transform        : translate(-50%, -50%) rotate(45deg);
        background-image : inherit;
        background-color : inherit;
    }
}
