:root {
    --color                   : var(--b-neutral-20);
    --parent-background       : var(--b-neutral-100);
    --parent-color            : var(--b-neutral-40);
    --border-color            : var(--b-neutral-80);
    --time-axis-background    : var(--b-neutral-97);
    --shadow                  : 0 0 5px #99999960;
    --selected-shadow         : 0 0 8px #99999975;
    --nested-hover-background : var(--b-neutral-95);
}

.b-theme-material3-dark,
.b-theme-svalbard-dark,
.b-theme-stockholm-dark,
.b-theme-visby-dark {
    --shadow          : 0 0 5px #00000060;
    --selected-shadow : 0 0 8px #00000075;
}

/* region 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;

    > .b-sch-event:not(.b-milestone) {
        background-color : var(--parent-background);
        border-radius    : 10px;
        border           : 1px solid var(--border-color);
        box-shadow       : var(--shadow);

        /* Don't alter event appearance on hover or selection */
        &:hover,
        &.b-sch-event-selected,
        &.b-sch-event-selected:hover {
            --shadow         : var(--selected-shadow);

            background-image : none;

            > .b-sch-event-content,
            > .b-sch-event-content * {
                color : var(--parent-color);
            }
        }

        > .b-sch-event-content {
            font-size       : 0.9em;
            /* Required for tooltip to be able to align to the pin icon */
            overflow        : visible;
            justify-content : center;

            color           : var(--parent-color);

            i {
                position         : absolute;
                inset-inline-end : .75em;
                animation        : ShowPin 0.5s ease;
                rotate           : 20deg;
                cursor           : pointer;
            }
        }

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

/* endregion */

/* region Nested event styling */

.b-nested-event > .b-sch-event {
    background-color : transparent;
    border-radius    : 8px;
    border           : 1px solid var(--border-color);

    &:hover {
        background : var(--nested-hover-background);
    }

    .b-sch-event-content {
        color       : var(--color);
        font-weight : 300;
    }

    .b-task-percent-bar-outer {
        border-radius : 7px;
    }
}

.b-dragging-event .b-nested-events-parent .b-sch-event:hover .b-nested-events-container {
    background-image : none;
}

.b-task-percent-bar {
    background-color : var(--b-primary-90);

    &[data-percent="90"],
    &[data-percent="91"],
    &[data-percent="92"],
    &[data-percent="93"],
    &[data-percent="94"],
    &[data-percent="95"],
    &[data-percent="96"],
    &[data-percent="97"],
    &[data-percent="98"],
    &[data-percent="99"],
    &[data-percent="100"] {
        background-color : #00ff0040;

        .b-sch-event-selected & {
            background-color : #00ff0060;
        }
    }
}

/* endregion */

/* region Scheduler styling */

.b-scheduler-pro.b-widget {
    --b-grid-cell-background : var(--time-axis-background);
}

.b-grid-header-container .b-grid-splitter {
    background : transparent;
}

.b-grid-body-container .b-grid-splitter {
    background-color : var(--time-axis-background);
}

.toolbar-container {
    position      : absolute;
    right         : 1.5em;
    bottom        : 1.5em;
    box-shadow    : var(--shadow);
    border-radius : 8px;
    border        : 1px solid var(--border-color);
    overflow      : hidden;
    z-index       : 10;

    .b-toolbar {
        --b-toolbar-background : var(--b-neutral-100);

        .b-widget.b-label {
            font-weight : 500;
        }
    }
}

/* endregion */

/* region Terminal styling */

.b-sch-terminal {
    animation : ShowTerminal 0.2s ease-in;
}

.b-hiding-terminals > .b-sch-event > .b-sch-terminal {
    animation : HideTerminal 0.2s ease-out forwards;
}

@keyframes ShowTerminal {
    0% {
        opacity : 0;
        scale   : 0;
    }

    100% {
        opacity : 1;
        scale   : 1
    }
}

@keyframes HideTerminal {
    0% {
        opacity : 1;
        scale   : 1;
    }

    100% {
        opacity : 0;
        scale   : 0
    }
}

@keyframes ShowPin {
    0% {
        opacity   : 0;
        translate : 10px -15px;
        scale     : 2;
        rotate    : 75deg;
    }

    10% {
        rotate : 75deg;
    }

    50% {
        opacity : 1;
    }

    100% {
        opacity   : 1;
        translate : 0 0;
        scale     : 1;
        rotate    : 20deg;
    }
}

/* endregion */

/* region Resource styling */

.b-grid-cell {
    &.expedition {
        display            : grid;
        align-content      : center;
        justify-content    : start;
        gap                : 1em;
        grid-template-rows : 1em 1em 1em;
    }

    .name {
        font-size   : 1.2em;
        font-weight : 600;
        grid-column : 1 / 3;
    }

    .label {
        grid-column : 1 / 2;
        font-size   : 0.9em;
        color       : #777;
    }

    .height, .country {
        font-size   : 0.9em;
        grid-column : 2 / 3;
    }

    .country {
        font-size : 1.5em;
    }
}

/* endregion */