/* DING: Desktop Icons New Generation for GNOME Shell
 *
 * Shared optional CSS helpers for HTML widgets.
 *
 * This stylesheet reacts to DOM state that is already applied by the
 * injected Widget API (window.ding).
 *
 * IMPORTANT:
 *  - This file does not require any JavaScript.
 *  - Effects apply immediately when the file is loaded.
 *  - Widgets do not need to listen to host state changes.
 *  - Widgets must not toggle these classes themselves.
 *
 * The host owns state → the DOM reflects it → CSS reacts to it.
 *
 * Widgets may copy, override, or selectively use rules from this file.
 */


/* ==================================================
 * Theme hinting
 * ==================================================
 *
 * The host sets:
 *   body[data-theme="light" | "dark"]
 *
 * This allows widgets to participate in system theming
 * using pure CSS.
 */

body[data-theme="dark"] {
    color-scheme: dark;
}

body[data-theme="light"] {
    color-scheme: light;
}


/* ==================================================
 * Text direction (LTR / RTL)
 * ==================================================
 *
 * The host sets:
 *   html[dir="ltr" | "rtl"]
 *
 * Widgets should rely on logical CSS properties
 * (margin-inline-start, etc.) where possible.
 */

html[dir="rtl"] {
    direction: rtl;
}


/* ==================================================
 * Reduced motion
 * ==================================================
 *
 * The host sets:
 *   body.ding-reduced-motion
 *
 * When present, all CSS animations, transitions,
 * and smooth scrolling are disabled.
 *
 * This matches GNOME’s “Reduce Animations” setting
 * and applies immediately without JavaScript.
 */

body.ding-reduced-motion *,
body.ding-reduced-motion *::before,
body.ding-reduced-motion *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}


/* ==================================================
 * Edit mode helpers
 * ==================================================
 *
 * The host sets:
 *   body.ding-edit-mode
 *
 * Widgets can mark elements that should only be
 * visible while editing.
 */

.ding-only-edit {
    display: none;
}

body.ding-edit-mode .ding-only-edit {
    display: initial;
}


/* ==================================================
 * Selection helpers
 * ==================================================
 *
 * The host sets:
 *   body.ding-selected
 *
 * Widgets can mark elements that should only be
 * visible when the widget is selected.
 */

.ding-only-selected {
    display: none;
}

body.ding-selected .ding-only-selected {
    display: initial;
}


/* ==================================================
 * Optional selection outline helper
 * ==================================================
 *
 * This provides a simple, neutral selection outline.
 * Widgets opt in by applying the class.
 */

.ding-selection-outline {
    outline: 2px solid rgba(128, 128, 128, 0.6);
    outline-offset: 2px;
}

body.ding-selected .ding-selection-outline {
    outline-color: rgba(80, 160, 255, 0.9);
}
