html.light {
    --fill-color: var(--falcon-body-bg) !important;
}

html.dark {
    --fill-color: var(--falcon-body-bg) !important;
    --foreground-on-accent-rest: #ffffff !important;
    --neutral-fill-input-rest: var(--falcon-card-bg) !important;
    --neutral-fill-input-hover: var(--falcon-card-bg) !important;
    --neutral-stroke-input-rest: var(--falcon-card-bg) !important;
    --neutral-layer-floating: var(--falcon-card-bg) !important;
    --neutral-stroke-input-hover: var(--falcon-card-bg) !important;
    --neutral-fill-input-hover: var(--falcon-card-bg) !important;
    --neutral-fill-input-focus: var(--falcon-card-bg) !important;
}


fluent-button {
    --accent-fill-rest: var(--falcon-primary);
    --neutral-fill-stealth-rest: var(--falcon-300);
}

.fluent-messagebar-notification {
    padding: 0px !important;
    border: none !important
}

.fluent-messagebar-notification-close {
    --accent-fill-rest: var(--falcon-primary);
    --neutral-fill-stealth-rest: var(--falcon-300);
}

fluent-combobox {
    background-color: var(--falcon-body-bg);
    --neutral-fill-stealth-rest: var(--falcon-300);
}

fluent-option {
    background-color: var(--falcon-body-bg);
    --neutral-fill-stealth-rest: var(--falcon-300);
}

:host(:not([disabled]):not(:focus-within):hover) .root {
    background: var(--falcon-body-bg) !important;
}

:host(:not([disabled]):focus-within) .root {
    background: var(--falcon-body-bg);

}

fluent-autocomplete-multiselect:: part(root) {
    background-color: var(--falcon-body-bg);
}

fluent-dialog::part(control) {
    --dialog-padding: calc(var(--design-unit) * 6 * 1px);
    position: relative;
    padding: var(--dialog-padding) !important;
    width: calc(var(--dialog-width) - 2 * var(--dialog-padding));
    height: calc(var(--dialog-height) - 2 * var(--dialog-padding));
}