/* The theme loads before the application stylesheets that declare the palette on :root, hence html:root.
   The palette follows the accent chosen by the user, so the overrides take the same color as the components. */
html:root {
    --dxds-font-family-sans-serif: var(--us-font-family, var(--dxds-font-family-segoe-ui), var(--dxds-font-family-system-sans-serif));
    --palette-ThemeDarker: var(--dxbl-accent-color-130);
    --palette-ThemeDark: var(--dxbl-accent-color-110);
    --palette-ThemeDarkAlt: var(--dxbl-accent-color-100);
    --palette-ThemePrimary: var(--dxbl-accent-color-90);
    --palette-ThemeSecondary: var(--dxbl-accent-color-80);
    --palette-ThemeTertiary: var(--dxbl-accent-color-60);
    --palette-ThemeLight: var(--dxbl-accent-color-20);
    --palette-ThemeLighter: var(--dxbl-accent-color-10);
    --palette-ThemeLighterAlt: color-mix(in oklch, var(--dxbl-accent-color-10), #ffffff);
    --palette-Accent: var(--dxbl-accent-color-90);
    --semanticColors-InputBackgroundChecked: var(--dxbl-accent-color-90);
    --semanticColors-InputBackgroundCheckedHovered: var(--dxbl-accent-color-110);
    --semanticColors-InputPlaceholderBackgroundChecked: var(--dxbl-accent-color-10);
    --semanticColors-InputFocusBorderAlt: var(--dxbl-accent-color-90);
    --semanticColors-InputIcon: var(--dxbl-accent-color-90);
    --semanticColors-InputIconHovered: var(--dxbl-accent-color-110);
    --semanticColors-PrimaryButtonBackground: var(--dxbl-accent-color-90);
    --semanticColors-PrimaryButtonBackgroundHovered: var(--dxbl-accent-color-100);
    --semanticColors-PrimaryButtonBackgroundPressed: var(--dxbl-accent-color-110);
    --semanticColors-AccentButtonBackground: var(--dxbl-accent-color-90);
    --semanticColors-MenuIcon: var(--dxbl-accent-color-90);
    --semanticColors-MenuHeader: var(--dxbl-accent-color-90);
    --semanticTextColors-Link: var(--dxbl-accent-color-90);
    --semanticTextColors-LinkHovered: var(--dxbl-accent-color-130);
}

/* Geometry Fluent adds where Blazing Berry declares none; everything else comes from fluent-geometry.css. */
.dxbl-btn .dxbl-btn-caption {
    padding: 0;
}

.dxbl-text-edit > .dxbl-btn,
.dxbl-text-edit > .dxbl-btn-group > .dxbl-btn,
.dxbl-text-edit > .dxbl-btn-group-vertical > .dxbl-btn {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
}

/* The focused editor keeps the same border width on every side, as in the overrides. */
.dxbl-text-edit.dxbl-focused::after,
.dxbl-text-edit:focus-within::after,
.dxbl-text-edit:has(:focus)::after {
    content: none;
}

.dxbl-group > .dxbl-group-body {
    line-height: inherit;
}

.dxbl-fl .dxbl-fl-gd,
.dxbl-fl .dxbl-fl-gt {
    --dxbl-row-item-spacing-x: inherit;
}

.dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container {
    padding: 0;
}

/* The tree expand button keeps the tree colors over .dxbl-btn-text-secondary, as in Blazing Berry. */
.dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-btn {
    --dxbl-btn-color: var(--dxbl-treeview-btn-color);
    --dxbl-btn-bg: var(--dxbl-treeview-btn-bg);
    --dxbl-btn-border-color: var(--dxbl-treeview-btn-border-color);
    --dxbl-btn-hover-color: var(--dxbl-treeview-btn-hover-color);
    --dxbl-btn-hover-bg: var(--dxbl-treeview-btn-hover-bg);
    --dxbl-btn-hover-background: var(--dxbl-treeview-btn-hover-bg);
    --dxbl-btn-hover-border-color: var(--dxbl-treeview-btn-border-hover-color);
    --dxbl-btn-active-color: var(--dxbl-treeview-btn-active-color);
    --dxbl-btn-active-bg: var(--dxbl-treeview-btn-active-bg) !important;
    --dxbl-btn-active-background: var(--dxbl-treeview-btn-active-bg) !important;
    --dxbl-btn-active-border-color: var(--dxbl-treeview-btn-border-color);
    --dxbl-btn-disabled-color: var(--dxbl-treeview-btn-disabled-color);
    --dxbl-btn-disabled-bg: var(--dxbl-treeview-btn-disabled-bg);
    --dxbl-btn-disabled-background: var(--dxbl-treeview-btn-disabled-bg);
    --dxbl-btn-disabled-border-color: var(--dxbl-treeview-btn-border-color);
}

    .dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-btn .dxbl-image {
        color: inherit;
    }

.dxbl-checkbox {
    --dxbl-checkbox-padding: 0;
    --dxbl-checkbox-check-element-checkbox-border-width: 2px;
    --dxbl-checkbox-check-element-checkbox-border-radius: 0.1875rem;
    --dxbl-checkbox-check-element-radio-border-width: 2px;
}

/* Fluent reads the checkbox colors the overrides set for Blazing Berry under other names. */
.dxbl-checkbox {
    --dxbl-checkbox-primary-checked-check-element-bg: var(--palette-ThemePrimary);
    --dxbl-checkbox-primary-checked-check-element-border: var(--palette-ThemePrimary);
    --dxbl-checkbox-primary-checked-hover-check-element-bg: var(--palette-ThemePrimary);
    --dxbl-checkbox-primary-checked-hover-check-element-border: var(--palette-ThemePrimary);
    /* A valid, modified checkbox keeps the accent color instead of turning green. */
    --dxbl-checkbox-success-checked-check-element-bg: var(--palette-ThemePrimary);
    --dxbl-checkbox-success-checked-check-element-border: var(--palette-ThemePrimary);
    --dxbl-checkbox-success-checked-hover-check-element-bg: var(--palette-ThemePrimary);
    --dxbl-checkbox-success-checked-hover-check-element-border: var(--palette-ThemePrimary);
    --dxbl-checkbox-radio-bg: var(--palette-White);
    --dxbl-checkbox-radio-border-width: 2px;
    --dxbl-checkbox-radio-unchecked-border-color: unset;
}

/* Read-only and disabled checkboxes take the Blazing Berry colors; its opacity in fluent-geometry.css fades them. */
.dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio).dxbl-readonly,
.dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio).dxbl-disabled {
    --dxbl-checkbox-check-element-bg: var(--palette-White);
    --dxbl-checkbox-check-element-border: var(--palette-Black);
}

.dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio).dxbl-disabled.dxbl-checkbox-checked {
    --dxbl-checkbox-check-element-bg: var(--palette-Black);
    --dxbl-checkbox-check-element-check-icon-color: var(--palette-White);
}

/* Blazing Berry fades the unchecked radio ring a second time, on the pseudo-element Fluent does not use. */
.dxbl-checkbox.dxbl-checkbox-radio.dxbl-readonly,
.dxbl-checkbox.dxbl-checkbox-radio.dxbl-disabled {
    --dxbl-checkbox-check-element-border: color-mix(in srgb, var(--palette-Black) 50%, transparent);
}

.dxbl-checkbox.dxbl-checkbox-radio.dxbl-readonly.dxbl-checkbox-checked,
.dxbl-checkbox.dxbl-checkbox-radio.dxbl-disabled.dxbl-checkbox-checked {
    --dxbl-checkbox-check-element-border: var(--palette-ThemePrimary);
}

/* Read-only and disabled switches keep their colors; the Blazing Berry opacity in fluent-geometry.css fades them. */
.dxbl-checkbox.dxbl-checkbox-switch {
    --dxbl-checkbox-check-element-switch-border-width: 0px;
    --dxbl-checkbox-primary-checked-check-element-trigger-bg: var(--semanticTextColors-PrimaryButtonText);
    --dxbl-checkbox-primary-checked-hover-check-element-trigger-bg: var(--semanticTextColors-PrimaryButtonText);
    --dxbl-checkbox-primary-checked-hover-check-element-bg: var(--palette-ThemeDark);
    --dxbl-checkbox-primary-checked-hover-check-element-border: var(--palette-ThemeDark);
    --dxbl-checkbox-primary-checked-readonly-check-element-bg: var(--palette-ThemePrimary);
    --dxbl-checkbox-primary-checked-readonly-check-element-trigger-bg: var(--semanticTextColors-PrimaryButtonText);
    --dxbl-checkbox-primary-unchecked-check-element-bg: var(--palette-ThemeLighterAlt);
    --dxbl-checkbox-primary-unchecked-check-element-trigger-bg: var(--semanticTextColors-PrimaryButtonText);
    --dxbl-checkbox-primary-unchecked-hover-check-element-trigger-bg: var(--semanticTextColors-PrimaryButtonText);
    --dxbl-checkbox-check-element-primary-unchecked-hover-bg: var(--palette-ThemeLighter);
    --dxbl-checkbox-primary-unchecked-readonly-check-element-bg: var(--palette-ThemeLighterAlt);
    --dxbl-checkbox-primary-unchecked-readonly-check-element-trigger-bg: var(--semanticTextColors-PrimaryButtonText);
    --dxbl-checkbox-check-element-switch-trigger-transform: 0px;
}

/* The thumb sits where Blazing Berry puts it: its margin from fluent-geometry.css, no extra offset. */
.dxbl-checkbox.dxbl-checkbox-switch .dxbl-checkbox-check-element::before {
    top: 0;
}

.dxbl-checkbox.dxbl-checkbox-switch.dxbl-checkbox-checked .dxbl-checkbox-check-element {
    --dxbl-checkbox-check-element-switch-trigger-transform: calc(var(--dxbl-checkbox-switch-width) - var(--dxbl-checkbox-switch-element-margin) * 2 - var(--dxbl-checkbox-switch-element-size));
}