.xQAB {
    grid-area: QuickActionBar;
    display: flex;
    justify-content: var(--quick-actionbar-justification);
    align-items: var(--quick-actionbar-alignment);
    background-color: var(--quick-actionbar-background-color);
}

/* Quick actionbar button bar
-------------------------------------------- */
.xQABBtns {
    display: flex;
    align-items: center;
    gap: var(--quick-actionbar-button-spacing);
    padding: var(--quick-actionbar-padding);
}

/* Quick actionbar buttons
-------------------------------------------- */

.xQABButton,
.xQABButtonWithImage {
    background-color: var(--quick-actionbar-button-background-color);
    color: var(--text-on-color);
}

.xQABButton:hover,
.xQABButtonWithImage:hover {
    background-color: var(--quick-actionbar-button-background-color--hover);
    color: var(--quick-actionbar-button-text-color--hover);
}

.xQABButtonDisabled,
.xQABButtonWithImageDisabled {
    background-color: var(--quick-actionbar-button-background-color--disabled);
    color: var(--quick-actionbar-button-text-color--disabled);
}

/* Print
-------------------------------------------- */

@media print {
    .xQAB {
        display: none;
    }
}

/* Needs to be organized
--------------------------------------------
--------------------------------------------
--------------------------------------------
-------------------------------------------- */
.xQABBtns > div,
.xQABBtns > div > a {
    display: flex;
    align-items: center;
    gap: calc((4 + (var(--design-unit) * 2 * var(--density))) * 1px);
    text-overflow: ellipsis;
    padding: calc(var(--design-unit) * 1.5px) calc(var(--design-unit) * 18px);
}



.xQABButtonWithImageDisabled img {
    filter: opacity(40%);
}