.GanttFloatingToolbar {
    border-radius: var(--border-radius-default);
    box-shadow: 0 0 8px 0 rgb(53 53 53 / 51%);
    background: var(--deep-black);
    color: var(--neutral-grey-13);
    padding: var(--padding-xxs);
    display: flex;
    align-items: center;
    gap: var(--padding-xxs);
    width: fit-content;

    & .btn {
        /* Selecting the .btn class directly to cover all bootstrap btns including toggle and dropdown btns */
        height: 28px;
        padding: var(--padding-xxs);
        display: flex;
        align-items: center;
        justify-content: center;

        --fa-width: 20px;
    }
}

.GanttFloatingToolbar-btn-transparent {
    border: transparent !important;

    &:is(:disabled, .is-disabled) {
        color: var(--surface-disabled) !important;
    }

    &:not(:hover:not(:disabled, .is-disabled)) {
        background: transparent !important; /* Keep the background transparent when not hovering */
    }
}

/* Match the Btn variant="default" style so the summary fits the toolbar group consistently. */
.GanttFloatingToolbar-summary {
    color: var(--secondary);
    background: var(--surface-subtle-light);
    border: 1px solid var(--secondary);

    /* because we're using the .btn class directly we need to revert some of the button styles that don't make sense */
    cursor: auto !important;
    user-select: auto !important;
}

.GanttFloatingToolbar-summary,
.GanttFloatingToolbar-summary-dropdown .Btn,
.GanttFloatingToolbar-summary-dropdown .btn {
    padding: var(--padding-xxs) var(--padding-xs) !important;
}