/* Keep unavailable values legible while clearly distinguishing them from editable fields. */
:root {
    --app-locked-field-background: #ededed;
    --app-locked-field-foreground: #616161;
    --app-locked-field-border: #c7c7c7;
}

html[data-theme-mode="dark"] {
    --app-locked-field-background: #303030;
    --app-locked-field-foreground: #bdbdbd;
    --app-locked-field-border: #575757;
}

:is(fluent-text-input, fluent-number-input, fluent-textarea, fluent-text-area,
    fluent-dropdown, fluent-select, input:not([type="checkbox"], [type="radio"], [type="hidden"]), textarea, select):is([disabled], [readonly], [aria-disabled="true"]) {
    --colorNeutralBackground1: var(--app-locked-field-background);
    --colorNeutralForegroundDisabled: var(--app-locked-field-foreground);
    --colorNeutralStrokeDisabled: var(--app-locked-field-border);
    background: var(--app-locked-field-background) !important;
    color: var(--app-locked-field-foreground) !important;
    border-color: var(--app-locked-field-border) !important;
    cursor: not-allowed;
    opacity: 1;
}

:is(fluent-text-input, fluent-number-input, fluent-textarea, fluent-text-area,
    fluent-dropdown, fluent-select):is([disabled], [readonly], [aria-disabled="true"])::part(root),
:is(fluent-text-input, fluent-number-input, fluent-textarea, fluent-text-area,
    fluent-dropdown, fluent-select):is([disabled], [readonly], [aria-disabled="true"])::part(control) {
    background: var(--app-locked-field-background);
    color: var(--app-locked-field-foreground);
    cursor: not-allowed;
    -webkit-text-fill-color: var(--app-locked-field-foreground);
}

:is(fluent-switch, fluent-checkbox, fluent-radio):is([disabled], [readonly], [aria-disabled="true"]) {
    color: var(--app-locked-field-foreground);
    cursor: not-allowed;
}

.data-source-edit-field[tabindex="0"]:focus-visible {
    outline: 2px solid var(--app-accent-color);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (forced-colors: active) {
    :root,
    html[data-theme-mode="dark"] {
        --app-locked-field-background: Canvas;
        --app-locked-field-foreground: GrayText;
        --app-locked-field-border: GrayText;
    }
}