:root {
    --q-color-qapla: #1d5798;
    --q-color-qapla-light: #2b6ebc;
    --q-color-qapla-dark: #14407d;
}

.q-is-qapla-bg {
    background-color: var(--q-color-qapla)!important;
    border-color: var(--q-color-qapla)!important;
    color: var(--ts-static-gray-50)!important;
}

@media (prefers-color-scheme: light) {
    .q-is-qapla-bg-variant {
        background-color: var(--q-color-qapla-light);
        --accent-color: var(--ts-static-gray-50);
    }
}
@media (prefers-color-scheme: dark) {
    .q-is-qapla-bg-variant {
        background-color: var(--q-color-qapla-dark);
        --accent-color: var(--ts-static-gray-50);
    }
}


.q-is-primary {
    --accent-color: var(--ts-primary-400);
    --accent-foreground-color: var(--ts-static-gray-50);
}
.q-is-warning {
    --accent-color: var(--ts-warning-400);
    --accent-foreground-color: var(--ts-static-gray-800);
}
.q-is-positive {
    --accent-color: var(--ts-positive-400);
    --accent-foreground-color: var(--ts-static-gray-50);
}

.ts-button:is(.is-start-labeled-icon,.is-end-labeled-icon).q-is-primary .ts-icon {
    background-color: var(--ts-primary-500)!important;
}
.ts-button:is(.is-start-labeled-icon,.is-end-labeled-icon).q-is-warning .ts-icon {
    background-color: var(--ts-warning-500)!important;
}
.ts-button:is(.is-start-labeled-icon,.is-end-labeled-icon).q-is-positive .ts-icon {
    background-color: var(--ts-positive-500)!important;
}

.ts-tab.is-pilled.q-is-primary .item.is-active {
    --accent-color:  var(--ts-primary-400);
}

.ts-tab.q-is-primary .item.is-active {
    --accent-color:  var(--ts-primary-400);
}