/* Load after vendor and page styles so Bootstrap and DevExtreme share a palette. */
.dx-icon-wc-run-scan {
    position: relative;
}

.dx-icon-wc-run-scan::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    clip-path: polygon(15% 0, 100% 50%, 15% 100%);
}

.btn > .dx-icon-wc-run-scan {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}

:root {
    --wc-button-primary: #337ab7;
    --wc-button-primary-hover: #286090;
    --wc-button-secondary-background: #fff;
    --wc-button-secondary-color: #212529;
    --wc-button-secondary-border: #dee2e6;
}

.btn-primary {
    --bs-btn-bg: var(--wc-button-primary);
    --bs-btn-border-color: var(--wc-button-primary);
    --bs-btn-hover-bg: var(--wc-button-primary-hover);
    --bs-btn-hover-border-color: var(--wc-button-primary-hover);
    --bs-btn-active-bg: var(--wc-button-primary-hover);
    --bs-btn-active-border-color: var(--wc-button-primary-hover);
    --bs-btn-disabled-bg: var(--wc-button-primary);
    --bs-btn-disabled-border-color: var(--wc-button-primary);
    --bs-btn-focus-shadow-rgb: 51, 122, 183;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-secondary {
    --bs-btn-color: var(--wc-button-secondary-color);
    --bs-btn-bg: var(--wc-button-secondary-background);
    --bs-btn-border-color: var(--wc-button-secondary-border);
    --bs-btn-hover-color: var(--wc-button-secondary-color);
    --bs-btn-hover-bg: #f8f9fa;
    --bs-btn-hover-border-color: #c6ccd2;
    --bs-btn-active-color: var(--wc-button-secondary-color);
    --bs-btn-active-bg: #e9ecef;
    --bs-btn-active-border-color: #c6ccd2;
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: var(--wc-button-secondary-background);
    --bs-btn-disabled-border-color: var(--wc-button-secondary-border);
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
}

body .dx-button.dx-button-mode-contained.dx-button-default {
    background-color: var(--wc-button-primary);
    border-color: var(--wc-button-primary);
    color: #fff;
}

body .dx-button.dx-button-mode-contained.dx-button-default:is(:hover, .dx-state-hover, .dx-state-active) {
    background-color: var(--wc-button-primary-hover);
    border-color: var(--wc-button-primary-hover);
}

body .dx-button:is(.dx-button-mode-outlined.dx-button-default, .dx-button-mode-outlined.dx-button-normal, .dx-button-mode-contained.dx-button-normal) {
    background-color: var(--wc-button-secondary-background);
    border-color: var(--wc-button-secondary-border);
    color: var(--wc-button-secondary-color);
}

body .dx-button:is(.dx-button-mode-outlined.dx-button-default, .dx-button-mode-outlined.dx-button-normal, .dx-button-mode-contained.dx-button-normal):is(:hover, .dx-state-hover) {
    background-color: #f8f9fa;
    border-color: #c6ccd2;
}

body .dx-button:is(.dx-button-mode-outlined.dx-button-default, .dx-button-mode-outlined.dx-button-normal, .dx-button-mode-contained.dx-button-normal).dx-state-active {
    background-color: #e9ecef;
    border-color: #c6ccd2;
}

body .dx-button:is(.dx-button-mode-outlined.dx-button-default, .dx-button-mode-outlined.dx-button-normal, .dx-button-mode-contained.dx-button-normal) :is(.dx-button-text, .dx-icon) {
    color: inherit;
}