/* jquery UI
  ========================================================================================= */
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

@media (prefers-color-scheme: dark) {

    .ui-widget-content {
        color: var(--body-fg) !important;
        background-color: var(--body-bg) !important;
        border-color: var(--hairline-color) !important;
    }

    .ui-widget-header {
        background-color: var(--secondary) !important;
        border-color: var(--secondary) !important;
    }

    .ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default,
    .ui-button,
    html .ui-button.ui-state-disabled:hover,
    html .ui-button.ui-state-disabled:active {
        background-color: var(--border-color) !important;
        border-color: var(--border-color) !important;
    }

    .ui-state-default.ui-state-active {
        background: var(--primary) !important;
        border-color: var(--primary) !important;
    }

    .ui-state-default a,
    .ui-state-default a:link,
    .ui-state-default a:visited,
    a.ui-button,
    a:link.ui-button,
    a:visited.ui-button,
    .ui-button {
        color: var(--body-fg) !important;
    }

    .ui-widget-content a {
        color: var(--link-fg) !important;
    }
}