:root, :host {
    /**
     * Indicator z-index
     */
    --b-indicator-z-index              : 7;

    /**
     * Height of a range indicator displayed below the task bar (for example early dates, late dates)
     */
    --b-indicator-at-bottom-size       : 6px;

    /**
     * Vertical gap between the task bar and a range indicator displayed below the task bar. Must include a unit
     * (0px instead of 0)
     */
    --b-indicator-at-bottom-gap        : 4px;

    /**
     * Size of a constraint indicator (start no earlier than, finish no later than, etc.)
     */
    --b-indicator-constraint-size      : 5px;

    /**
     * Icon to use for deadline indicators (icon font char)
     */
    --b-indicator-deadline-icon        : '\f024'; /* fa-flag */

    /**
     * Icon to use for must start on / must finish on indicators (icon font char)
     */
    --b-indicator-must-icon            : '\f08d'; /* fa-thumbtack */

    /**
     * Color of the indicator
     */
    --b-indicator-color                : var(--b-border-6);

    /**
     * Color of the icon in a custom indicator
     */
    --b-indicator-custom-icon-color    : var(--b-indicator-color);

    /**
     * Color of the indicator when hovered
     * @state Hovered
     */
    --b-indicator-hover-color          : var(--b-border-4);

    /**
     * Color of the deadline indicator
     */
    --b-indicator-deadline-color       : var(--b-color-red);

    /**
     * Color of the deadline indicator when hovered
     * @state Hovered
     */
    --b-indicator-deadline-hover-color : color-mix(in srgb, var(--b-indicator-deadline-color), var(--b-opposite) 15%);
}

.b-indicator {
    position       : absolute;
    pointer-events : all;
    overflow       : visible;
    white-space    : nowrap;
    transition     : color .2s, border-color .2s;
    z-index        : var(--b-indicator-z-index);

    &.b-has-icon {
        display     : grid;
        place-items : center;

        &::before {
            top : 90%;
        }
    }

    .b-animating & {
        transition : all .2s;
    }

    i {
        font-size : .9em;

        color     : var(--b-indicator-custom-icon-color);
    }

    &:hover {
        z-index      : var(--b-indicator-z-index);

        color        : var(--b-indicator-hover-color);
        border-color : var(--b-indicator-hover-color);
    }

    &.b-bottom {
        margin-top : calc(1px * var(--b-event-size) + var(--b-indicator-at-bottom-gap));
    }

    &.b-early-dates,
    &.b-late-dates {
        border-width : 1px;
        border-style : solid;
        border-top   : none;

        border-color : var(--b-indicator-color);
        height       : var(--b-indicator-at-bottom-size) !important; /* To override height from rendering */

        &:hover {
            border-color : var(--b-indicator-hover-color);
        }
    }

    &.b-constraint-type-muststarton,
    &.b-constraint-type-mustfinishon,
    &.b-deadline-date {
        &::before {
            position    : relative;
            transition  : color .2s;

            font-family : var(--b-widget-icon-font-family);
            font-weight : var(--b-widget-icon-font-weight);
            top         : calc(var(--b-indicator-at-bottom-size) * -1.1);
            font-size   : calc(var(--b-indicator-at-bottom-size) * 2);
        }
    }

    &.b-deadline-date {
        width               : auto;
        margin-inline-start : -2.5px;

        &::before {
            content : var(--b-indicator-deadline-icon);
            color   : var(--b-indicator-deadline-color);
        }

        &:hover {
            --b-indicator-deadline-color : var(--b-indicator-deadline-hover-color);
        }
    }

    &.b-constraint-date {
        width : var(--b-indicator-at-bottom-size);

        &::before {
            transition : border-color .2s, background-color .2s;
        }

        &:hover::before {
            border-color : var(--b-indicator-hover-color);
        }
    }

    &.b-constraint-type-muststarton,
    &.b-constraint-type-mustfinishon {
        border              : none;
        width               : auto;
        margin-inline-start : calc(var(--b-indicator-at-bottom-size) * -.75);

        &::before {
            content : var(--b-indicator-must-icon);
            color   : var(--b-indicator-color);
        }

        &:hover {
            --b-indicator-color : var(--b-indicator-hover-color)
        }
    }

    &.b-constraint-type-startnoearlierthan,
    &.b-constraint-type-startnolaterthan {
        width                   : var(--b-indicator-constraint-size);
        height                  : calc(var(--b-indicator-constraint-size) * 2) !important;
        border-start-end-radius : calc(var(--b-indicator-constraint-size) * 2);
        border-end-end-radius   : calc(var(--b-indicator-constraint-size) * 2);
        border                  : 1px solid var(--b-indicator-color);
        background-color        : var(--b-indicator-color);
    }

    &.b-constraint-type-startnolaterthan {
        background-color : transparent;
    }

    &.b-constraint-type-startnoearlierthan:hover {
        background-color : var(--b-indicator-hover-color);
    }

    &.b-constraint-type-finishnoearlierthan,
    &.b-constraint-type-finishnolaterthan {
        margin-inline-start       : calc(var(--b-indicator-constraint-size) * -1);
        width                     : var(--b-indicator-constraint-size);
        height                    : calc(var(--b-indicator-constraint-size) * 2) !important;
        border-start-start-radius : calc(var(--b-indicator-constraint-size) * 2);
        border-end-start-radius   : calc(var(--b-indicator-constraint-size) * 2);
        border                    : 1px solid var(--b-indicator-color);
        background-color          : var(--b-indicator-color);
    }

    &.b-constraint-type-finishnolaterthan {
        background-color : transparent;
    }

    &.b-constraint-type-finishnoearlierthan:hover {
        background-color : var(--b-indicator-hover-color);
    }
}

/* esbuild does not generate style correctly if this selector is nested */
.b-rtl .b-indicator.b-deadline-date::before {
    rotate : 180deg;
}
