.coveo-table-actions-container {
    position: sticky;
    top: 0;
    z-index: $table-header-z-index;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    box-sizing: content-box; // Make sure $table-actions-container-height is respected with or without the mod-border-top class.
    min-height: $table-actions-container-height;

    // Workaround to make the action bar have a border between multiple rows

    background: repeating-linear-gradient(
        var(--grey-20),
        var(--grey-20) $table-actions-container-height,
        var(--grey-40) $table-actions-container-height,
        var(--grey-40) ($table-actions-container-height + 1)
    );

    &.mod-border-top {
        border-top: 1px solid var(--grey-40);
    }
}

.coveo-table-actions {
    display: flex;
    align-items: center;
    box-sizing: border-box; // Cancel the box-sizing: content-box for coveo-table-actions-container children.
    height: $table-actions-container-height;
    padding: 0 $table-actions-margin;

    .actions-row {
        display: flex;
        align-items: center;
    }

    .admin-select {
        &.dropdown {
            vertical-align: super;
        }
    }

    .action {
        line-height: 0; // Fix to make sure the action respect its children height.
        border: 1px solid transparent;
        border-radius: 2px;
        cursor: pointer;
        user-select: none;

        .state-disabled {
            cursor: default;
            opacity: 0.3;
        }

        & + .action {
            margin-left: $table-actions-margin;
        }

        &.dropdown {
            margin-right: -$table-actions-dropdown-padding-x;
            margin-left: calc(#{$table-actions-margin} - #{$table-actions-dropdown-padding-x});
            padding: 3px $table-actions-dropdown-padding-x;

            .dropdown-toggle {
                padding: 0;
            }

            &.open {
                background-color: var(--deprecated-light-grey);
                border-color: var(--grey-40);
            }

            &:first-child {
                margin-left: -$table-actions-dropdown-padding-x;
            }
        }

        .action-label {
            margin-top: 1px; // Hack to fix label vertical alignment...
            margin-left: $table-action-margin-left;
            color: var(--navy-blue-80);
            font-weight: var(--main-font-bolder);
            font-size: var(--default-font-size);
            line-height: 11px;
            text-transform: none;
        }

        .action-icon,
        .action-icon svg {
            display: inline-block;
            width: $action-icons-size;
            height: $action-icons-size;
        }

        &.prompt-action {
            margin-left: $button-margin-width;
            padding: $button-padding-y $button-padding-x;
        }
    }
}

.coveo-table-actions {
    border-left: $table-border;
}

.coveo-table-actions:first-child {
    border-left: none;
}

.coveo-table-actions.predicate-filters + .coveo-table-actions:last-child {
    padding-left: 0;
    border-left: none;
}

&.mod-align-header .coveo-table-actions:last-child {
    padding-right: $header-padding;
}

.item-filter {
    flex-grow: 1;
}

.item-filter-item {
    display: inline-block;
    margin: 0 $table-item-filter-padding-x;
    color: var(--cerulean-blue-50);
}

.item-filter-clear {
    padding: 0;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
}

.small-actions-container {
    .coveo-table-actions {
        padding: 0 ($table-actions-margin * 0.5);

        .action-label {
            margin-left: $table-action-margin-left * 0.5;
            font-size: $button-small-font-size;
        }

        .action + .action {
            margin-left: ($table-actions-margin * 0.5);
        }
    }
}