.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 types of buttons 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 {
    background: transparent;
    border: none;

    &.disabled,
    &:disabled,
    &.active:not(:hover),
    &:active:not(:hover) {
        background: transparent !important;
        border: none !important;
    }
}

/* 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 {
    padding: var(--padding-xxs) var(--padding-xs) !important;
}