use azul_core::{

    a11y::{AccessibilityInfo, AccessibilityRole},

    callbacks::{CoreCallbackData, VirtualViewCallbackInfo, VirtualViewReturn},

    dom::{

        Dom, EventFilter, HoverEventFilter, IdOrClass, IdOrClass::Class, IdOrClassVec, NodeType,

        TabIndex,

    },

    geom::{LogicalPosition, LogicalRect},

    refany::RefAny,

};

use azul_css::{css::BoxOrStatic, AzString};

#[allow(clippy::wildcard_imports)]

use azul_css::{

    dynamic_selector::{CssPropertyWithConditions, CssPropertyWithConditionsVec},

    props::{

        basic::*,

        layout::*,

        property::{CssProperty, *},

        style::*,

    },

    *,

};

use crate::widgets::button::{Button, ButtonOnClick};

// Colors extracted from flora.css

// Light mode colors

pub const LIGHT_PG: ColorU = ColorU {

    r: 230,

    g: 228,

    b: 223,

    a: 255,

};

pub const LIGHT_SUR: ColorU = ColorU {

    r: 242,

    g: 241,

    b: 237,

    a: 255,

};

pub const LIGHT_DESK: ColorU = ColorU {

    r: 221,

    g: 219,

    b: 213,

    a: 255,

};

pub const LIGHT_STRIP: ColorU = ColorU {

    r: 233,

    g: 231,

    b: 226,

    a: 255,

};

pub const LIGHT_TRACK: ColorU = ColorU {

    r: 231,

    g: 229,

    b: 224,

    a: 255,

};

pub const LIGHT_BD: ColorU = ColorU {

    r: 198,

    g: 195,

    b: 187,

    a: 255,

};

pub const LIGHT_BD2: ColorU = ColorU {

    r: 180,

    g: 177,

    b: 169,

    a: 255,

};

pub const LIGHT_BD3: ColorU = ColorU {

    r: 156,

    g: 152,

    b: 144,

    a: 255,

};

pub const LIGHT_BD4: ColorU = ColorU {

    r: 210,

    g: 207,

    b: 200,

    a: 255,

};

pub const LIGHT_BD5: ColorU = ColorU {

    r: 165,

    g: 161,

    b: 153,

    a: 255,

};

pub const LIGHT_SEP: ColorU = ColorU {

    r: 216,

    g: 213,

    b: 206,

    a: 255,

};

pub const LIGHT_SEP2: ColorU = ColorU {

    r: 224,

    g: 221,

    b: 215,

    a: 255,

};

pub const LIGHT_INK: ColorU = ColorU {

    r: 38,

    g: 37,

    b: 33,

    a: 255,

};

pub const LIGHT_INK2: ColorU = ColorU {

    r: 46,

    g: 44,

    b: 38,

    a: 255,

};

pub const LIGHT_INTRO: ColorU = ColorU {

    r: 78,

    g: 76,

    b: 69,

    a: 255,

};

pub const LIGHT_SOFT1: ColorU = ColorU {

    r: 102,

    g: 100,

    b: 92,

    a: 255,

};

pub const LIGHT_SOFT2: ColorU = ColorU {

    r: 130,

    g: 127,

    b: 118,

    a: 255,

};

pub const LIGHT_SOFT3: ColorU = ColorU {

    r: 116,

    g: 113,

    b: 106,

    a: 255,

};

pub const LIGHT_ICON: ColorU = ColorU {

    r: 86,

    g: 84,

    b: 76,

    a: 255,

};

pub const LIGHT_RT: ColorU = ColorU {

    r: 250,

    g: 249,

    b: 245,

    a: 255,

};

pub const LIGHT_RB: ColorU = ColorU {

    r: 236,

    g: 234,

    b: 228,

    a: 255,

};

pub const LIGHT_HT: ColorU = ColorU {

    r: 254,

    g: 253,

    b: 250,

    a: 255,

};

pub const LIGHT_HB: ColorU = ColorU {

    r: 241,

    g: 239,

    b: 233,

    a: 255,

};

pub const LIGHT_PT: ColorU = ColorU {

    r: 228,

    g: 225,

    b: 218,

    a: 255,

};

pub const LIGHT_PB: ColorU = ColorU {

    r: 238,

    g: 236,

    b: 230,

    a: 255,

};

pub const LIGHT_FLD: ColorU = ColorU {

    r: 251,

    g: 250,

    b: 246,

    a: 255,

};

pub const LIGHT_FLD2: ColorU = ColorU {

    r: 239,

    g: 237,

    b: 231,

    a: 255,

};

pub const LIGHT_DISBG: ColorU = ColorU {

    r: 235,

    g: 233,

    b: 227,

    a: 255,

};

pub const LIGHT_DISTX: ColorU = ColorU {

    r: 163,

    g: 160,

    b: 153,

    a: 255,

};

pub const LIGHT_QT: ColorU = ColorU {

    r: 110,

    g: 99,

    b: 73,

    a: 255,

};

pub const LIGHT_QT2: ColorU = ColorU {

    r: 79,

    g: 70,

    b: 51,

    a: 255,

};

pub const LIGHT_ACC: ColorU = ColorU {

    r: 47,

    g: 74,

    b: 133,

    a: 255,

};

pub const LIGHT_DEEP: ColorU = ColorU {

    r: 30,

    g: 50,

    b: 96,

    a: 255,

};

pub const LIGHT_SOFT: ColorU = ColorU {

    r: 224,

    g: 228,

    b: 238,

    a: 255,

};

pub const LIGHT_GLOW: ColorU = ColorU {

    r: 122,

    g: 147,

    b: 198,

    a: 255,

};

pub const LIGHT_ON_ACC: ColorU = ColorU {

    r: 244,

    g: 242,

    b: 234,

    a: 255,

};

// Dark mode colors

pub const DARK_PG: ColorU = ColorU {

    r: 26,

    g: 26,

    b: 26,

    a: 255,

};

pub const DARK_SUR: ColorU = ColorU {

    r: 35,

    g: 35,

    b: 35,

    a: 255,

};

pub const DARK_DESK: ColorU = ColorU {

    r: 18,

    g: 18,

    b: 18,

    a: 255,

};

pub const DARK_STRIP: ColorU = ColorU {

    r: 31,

    g: 31,

    b: 31,

    a: 255,

};

pub const DARK_TRACK: ColorU = ColorU {

    r: 21,

    g: 21,

    b: 21,

    a: 255,

};

pub const DARK_BD: ColorU = ColorU {

    r: 63,

    g: 63,

    b: 63,

    a: 255,

};

pub const DARK_BD2: ColorU = ColorU {

    r: 74,

    g: 74,

    b: 74,

    a: 255,

};

pub const DARK_BD3: ColorU = ColorU {

    r: 97,

    g: 97,

    b: 97,

    a: 255,

};

pub const DARK_BD4: ColorU = ColorU {

    r: 52,

    g: 52,

    b: 52,

    a: 255,

};

pub const DARK_BD5: ColorU = ColorU {

    r: 16,

    g: 16,

    b: 16,

    a: 255,

};

pub const DARK_SEP: ColorU = ColorU {

    r: 56,

    g: 56,

    b: 56,

    a: 255,

};

pub const DARK_SEP2: ColorU = ColorU {

    r: 46,

    g: 46,

    b: 46,

    a: 255,

};

pub const DARK_INK: ColorU = ColorU {

    r: 231,

    g: 231,

    b: 231,

    a: 255,

};

pub const DARK_INK2: ColorU = ColorU {

    r: 220,

    g: 220,

    b: 220,

    a: 255,

};

pub const DARK_INTRO: ColorU = ColorU {

    r: 188,

    g: 188,

    b: 188,

    a: 255,

};

pub const DARK_SOFT1: ColorU = ColorU {

    r: 168,

    g: 168,

    b: 168,

    a: 255,

};

pub const DARK_SOFT2: ColorU = ColorU {

    r: 140,

    g: 140,

    b: 140,

    a: 255,

};

pub const DARK_SOFT3: ColorU = ColorU {

    r: 154,

    g: 154,

    b: 154,

    a: 255,

};

pub const DARK_ICON: ColorU = ColorU {

    r: 190,

    g: 190,

    b: 190,

    a: 255,

};

pub const DARK_RT: ColorU = ColorU {

    r: 51,

    g: 51,

    b: 51,

    a: 255,

};

pub const DARK_RB: ColorU = ColorU {

    r: 41,

    g: 41,

    b: 41,

    a: 255,

};

pub const DARK_HT: ColorU = ColorU {

    r: 63,

    g: 63,

    b: 63,

    a: 255,

};

pub const DARK_HB: ColorU = ColorU {

    r: 51,

    g: 51,

    b: 51,

    a: 255,

};

pub const DARK_PT: ColorU = ColorU {

    r: 31,

    g: 31,

    b: 31,

    a: 255,

};

pub const DARK_PB: ColorU = ColorU {

    r: 38,

    g: 38,

    b: 38,

    a: 255,

};

pub const DARK_FLD: ColorU = ColorU {

    r: 29,

    g: 29,

    b: 29,

    a: 255,

};

pub const DARK_FLD2: ColorU = ColorU {

    r: 36,

    g: 36,

    b: 36,

    a: 255,

};

pub const DARK_DISBG: ColorU = ColorU {

    r: 36,

    g: 36,

    b: 36,

    a: 255,

};

pub const DARK_DISTX: ColorU = ColorU {

    r: 102,

    g: 102,

    b: 102,

    a: 255,

};

pub const DARK_QT: ColorU = ColorU {

    r: 196,

    g: 181,

    b: 142,

    a: 255,

};

pub const DARK_QT2: ColorU = ColorU {

    r: 222,

    g: 211,

    b: 180,

    a: 255,

};

pub const DARK_ACC: ColorU = ColorU {

    r: 47,

    g: 74,

    b: 133,

    a: 255,

};

pub const DARK_DEEP: ColorU = ColorU {

    r: 30,

    g: 50,

    b: 96,

    a: 255,

};

pub const DARK_SOFT: ColorU = ColorU {

    r: 224,

    g: 228,

    b: 238,

    a: 255,

};

pub const DARK_GLOW: ColorU = ColorU {

    r: 122,

    g: 147,

    b: 198,

    a: 255,

};

pub const DARK_ON_ACC: ColorU = ColorU {

    r: 244,

    g: 242,

    b: 234,

    a: 255,

};

// ---------------------------------------------------------------------------

// GRADIENTS

// ---------------------------------------------------------------------------

//

// flora.css's `linear-gradient(..)` declarations, transcribed with the angles

// and stops the CSS has; an `rgba(..)` alpha is rounded the way the CSS parser

// rounds it, `(a * 255).round()`. Everything here is `const`: `LinearGradient`

// and its stop vec have const constructors, so a gradient can sit in a `const`

// style slice as well as in a runtime `vec!`. The stop slices are named consts

// rather than inline borrows because a gradient value has drop glue (its stop

// vec implements `Drop`), and a borrowed temporary of such a value is not

// promotable — the shape `tabs.rs` uses for the same reason.

//

// The `RT`/`RB`, `HT`/`HB` and `PT`/`PB` tokens above are the two stops of the

// raised, hovered and pressed control faces — that is what they exist for —

// and the six `*_FACE_*` gradients are those pairs. `flat.rs` keeps flat fills:

// its stop pairs are equal values, which is what lets the same widget code read

// correctly under both themes.

//

// Layer order: a `StyleBackgroundContentVec` is painted first-to-last, so a base

// colour goes FIRST and a translucent overlay after it — the reverse of a CSS

// comma list, whose first layer is on top.

//

// Not transcribed, and why:

// * `--fl-grain` / `--fl-fibre`: `repeating-linear-gradient` with PIXEL stops (`0 1px, transparent

//   1px 3px`); a stop here is a percentage.

// * `--fl-rolled-tab`: a `calc()` stop.

// * The `mask-image` gradients (not backgrounds) and the `.docs-card::after` sheen (a keyframe

//   animation).

// * `--fl-band`, `--fl-rolled`, `--fl-rule-metal-bg`, `--fl-gem-sunken`, the `.fl-tab-*` pieces and

//   the scrollbar thumb: tabs, ribbon rules and scrollbars have no theme function in this module

//   yet. They belong with the widget that gets one, not as consts nothing declares.

/// The CSS default direction: `linear-gradient(a, b)` with no angle runs top to

/// bottom.

const TO_BOTTOM: Direction = Direction::FromTo(DirectionCorners {

    dir_from: DirectionCorner::Top,

    dir_to: DirectionCorner::Bottom,

});

/// `<n>deg`, as the CSS writes an explicit angle.

/// A colour stop at `offset` percent.

/// A `background` of these layers, painted first to last.

// -- the raised face --------------------------------------------------------

const RAISED_FACE_LIGHT_STOPS: &[NormalizedLinearColorStop] =

    &[stop(0, LIGHT_RT), stop(100, LIGHT_RB)];

/// `.btn-secondary`: raised paper, the standard command at rest.

///

/// `linear-gradient(var(--fl-rT), var(--fl-rB))` — [`LIGHT_RT`] over

/// [`LIGHT_RB`]. Also `.navbar`, `.btn-hero-secondary`, `.pill`, and the

/// `padding-box` layer of `.btn-hero-primary`, `.hero-badge` and `.pill-soon`.

pub const RAISED_FACE_LIGHT: StyleBackgroundContent =

    StyleBackgroundContent::LinearGradient(LinearGradient {

        direction: TO_BOTTOM,

        extend_mode: ExtendMode::Clamp,

        stops: NormalizedLinearColorStopVec::from_const_slice(RAISED_FACE_LIGHT_STOPS),

    });

const RAISED_FACE_DARK_STOPS: &[NormalizedLinearColorStop] =

    &[stop(0, DARK_RT), stop(100, DARK_RB)];

/// [`RAISED_FACE_LIGHT`] under `:root[data-theme="dark"]`, where the tokens

/// take their dark values. [`DARK_RT`] over [`DARK_RB`].

pub const RAISED_FACE_DARK: StyleBackgroundContent =

    StyleBackgroundContent::LinearGradient(LinearGradient {

        direction: TO_BOTTOM,

        extend_mode: ExtendMode::Clamp,

        stops: NormalizedLinearColorStopVec::from_const_slice(RAISED_FACE_DARK_STOPS),

    });

/// [`RAISED_FACE_LIGHT`] as a one-layer background, for `const` style slices.

const RAISED_FACE_LIGHT_LAYER: &[StyleBackgroundContent] = &[RAISED_FACE_LIGHT];

/// [`RAISED_FACE_DARK`] as a one-layer background, for `const` style slices.

const RAISED_FACE_DARK_LAYER: &[StyleBackgroundContent] = &[RAISED_FACE_DARK];

// -- the hovered face -------------------------------------------------------

const HOVER_FACE_LIGHT_STOPS: &[NormalizedLinearColorStop] =

    &[stop(0, LIGHT_HT), stop(100, LIGHT_HB)];

/// `.btn-secondary:hover`: the raised face lifted toward the light.

///

/// `linear-gradient(var(--fl-hT), var(--fl-hB))` — [`LIGHT_HT`] over

/// [`LIGHT_HB`]. Also `.nav-links a:hover`, `.btn-hero-secondary:hover` and

/// `.mobile-menu a:focus`.

pub const HOVER_FACE_LIGHT: StyleBackgroundContent =

    StyleBackgroundContent::LinearGradient(LinearGradient {

        direction: TO_BOTTOM,

        extend_mode: ExtendMode::Clamp,

        stops: NormalizedLinearColorStopVec::from_const_slice(HOVER_FACE_LIGHT_STOPS),

    });

const HOVER_FACE_DARK_STOPS: &[NormalizedLinearColorStop] = &[stop(0, DARK_HT), stop(100, DARK_HB)];

/// [`HOVER_FACE_LIGHT`] in dark mode. [`DARK_HT`] over [`DARK_HB`].

pub const HOVER_FACE_DARK: StyleBackgroundContent =

    StyleBackgroundContent::LinearGradient(LinearGradient {

        direction: TO_BOTTOM,

        extend_mode: ExtendMode::Clamp,

        stops: NormalizedLinearColorStopVec::from_const_slice(HOVER_FACE_DARK_STOPS),

    });

// -- the pressed face -------------------------------------------------------

const PRESSED_FACE_LIGHT_STOPS: &[NormalizedLinearColorStop] =

    &[stop(0, LIGHT_PT), stop(100, LIGHT_PB)];

/// `.btn-secondary:active`: the face pushed in.

///

/// `linear-gradient(var(--fl-pT), var(--fl-pB))` — [`LIGHT_PT`] over

/// [`LIGHT_PB`]: darker at the top, where the near lip shades it. Also

/// `.nav-links a:active`.

pub const PRESSED_FACE_LIGHT: StyleBackgroundContent =

    StyleBackgroundContent::LinearGradient(LinearGradient {

        direction: TO_BOTTOM,

        extend_mode: ExtendMode::Clamp,

        stops: NormalizedLinearColorStopVec::from_const_slice(PRESSED_FACE_LIGHT_STOPS),

    });

const PRESSED_FACE_DARK_STOPS: &[NormalizedLinearColorStop] =

    &[stop(0, DARK_PT), stop(100, DARK_PB)];

/// [`PRESSED_FACE_LIGHT`] in dark mode. [`DARK_PT`] over [`DARK_PB`].

pub const PRESSED_FACE_DARK: StyleBackgroundContent =

    StyleBackgroundContent::LinearGradient(LinearGradient {

        direction: TO_BOTTOM,

        extend_mode: ExtendMode::Clamp,

        stops: NormalizedLinearColorStopVec::from_const_slice(PRESSED_FACE_DARK_STOPS),

    });

// -- the stone: a coloured command's depth -----------------------------------

//

// flora.css draws its accent command as a stone and lays a "depth rig" over it

// in two pseudo-elements: `::after` shades the edges the light does not reach

// and `::before` rakes a specular streak across the face. Their fills are

// translucent, so they go OVER the command's own colour and work for any

// colour — which is how a Success or Danger button, a stone in its own colour,

// gets the same depth as the Primary one. The pseudo-elements' `opacity`

// (0.85 at rest, 1 on hover) is not a background property and is not

// reproduced; the stops are the CSS's own.

const STONE_RIG_TOP_STOPS: &[NormalizedLinearColorStop] = &[

    stop(0, ColorU::new(12, 10, 4, 87)),

    stop(32, ColorU::new(12, 10, 4, 0)),

];

/// `.btn-primary::after`, second layer: the shadow the top edge throws down

/// the face.

///

/// `linear-gradient(180deg, rgba(12, 10, 4, 0.34) 0%, rgba(12, 10, 4, 0) 32%)`.

pub const STONE_RIG_TOP: StyleBackgroundContent =

    StyleBackgroundContent::LinearGradient(LinearGradient {

        direction: deg(180),

        extend_mode: ExtendMode::Clamp,

        stops: NormalizedLinearColorStopVec::from_const_slice(STONE_RIG_TOP_STOPS),

    });

const STONE_RIG_LEFT_STOPS: &[NormalizedLinearColorStop] = &[

    stop(0, ColorU::new(12, 10, 4, 56)),

    stop(15, ColorU::new(12, 10, 4, 0)),

];

/// `.btn-primary::after`, third layer: the same shadow, off the left edge.

///

/// `linear-gradient(90deg, rgba(12, 10, 4, 0.22) 0%, rgba(12, 10, 4, 0) 15%)`.

pub const STONE_RIG_LEFT: StyleBackgroundContent =

    StyleBackgroundContent::LinearGradient(LinearGradient {

        direction: deg(90),

        extend_mode: ExtendMode::Clamp,

        stops: NormalizedLinearColorStopVec::from_const_slice(STONE_RIG_LEFT_STOPS),

    });

const STONE_STREAK_STOPS: &[NormalizedLinearColorStop] = &[

    stop(6, ColorU::new(255, 248, 215, 0)),

    stop(15, ColorU::new(255, 248, 215, 51)),

    stop(22, ColorU::new(255, 248, 215, 15)),

    stop(32, ColorU::new(255, 248, 215, 0)),

];

/// `.btn-primary::before`: the specular streak raked across the face at rest.

///

/// `linear-gradient(115deg, rgba(255, 248, 215, 0) 6%, rgba(255, 248, 215,

/// 0.20) 15%, rgba(255, 248, 215, 0.06) 22%, rgba(255, 248, 215, 0) 32%)`.

pub const STONE_STREAK: StyleBackgroundContent =

    StyleBackgroundContent::LinearGradient(LinearGradient {

        direction: deg(115),

        extend_mode: ExtendMode::Clamp,

        stops: NormalizedLinearColorStopVec::from_const_slice(STONE_STREAK_STOPS),

    });

const STONE_STREAK_HOVER_STOPS: &[NormalizedLinearColorStop] = &[

    stop(4, ColorU::new(255, 248, 215, 0)),

    stop(14, ColorU::new(255, 248, 215, 87)),

    stop(23, ColorU::new(255, 248, 215, 26)),

    stop(34, ColorU::new(255, 248, 215, 0)),

];

/// `.btn-primary:hover::before`: the streak, brighter and wider, as the face

/// turns toward the light.

///

/// `linear-gradient(115deg, rgba(255, 248, 215, 0) 4%, rgba(255, 248, 215,

/// 0.34) 14%, rgba(255, 248, 215, 0.10) 23%, rgba(255, 248, 215, 0) 34%)`.

pub const STONE_STREAK_HOVER: StyleBackgroundContent =

    StyleBackgroundContent::LinearGradient(LinearGradient {

        direction: deg(115),

        extend_mode: ExtendMode::Clamp,

        stops: NormalizedLinearColorStopVec::from_const_slice(STONE_STREAK_HOVER_STOPS),

    });

// The stone pressed. flora.css's sunken stone (`.nav-links a.active::after`,

// `.lang-grid button.active::after`) is "lit from below the near edge instead

// of above it: the light falls INTO the well, so the top edge darkens and the

// bottom lifts. That inversion is the whole difference between pressed and

// raised" — so it is what a coloured command shows while it is held down.

const SUNKEN_RIG_TOP_STOPS: &[NormalizedLinearColorStop] = &[

    stop(0, ColorU::new(8, 6, 2, 122)),

    stop(42, ColorU::new(8, 6, 2, 0)),

];

/// `.nav-links a.active::after`, second layer: the near lip's shadow, deeper

/// than the raised rig's.

///

/// `linear-gradient(180deg, rgba(8, 6, 2, 0.48) 0%, rgba(8, 6, 2, 0) 42%)`.

pub const SUNKEN_RIG_TOP: StyleBackgroundContent =

    StyleBackgroundContent::LinearGradient(LinearGradient {

        direction: deg(180),

        extend_mode: ExtendMode::Clamp,

        stops: NormalizedLinearColorStopVec::from_const_slice(SUNKEN_RIG_TOP_STOPS),

    });

const SUNKEN_RIG_LEFT_STOPS: &[NormalizedLinearColorStop] = &[

    stop(0, ColorU::new(8, 6, 2, 77)),

    stop(18, ColorU::new(8, 6, 2, 0)),

];

/// `.nav-links a.active::after`, third layer: the same shadow, off the left

/// edge.

///

/// `linear-gradient(90deg, rgba(8, 6, 2, 0.30) 0%, rgba(8, 6, 2, 0) 18%)`.

pub const SUNKEN_RIG_LEFT: StyleBackgroundContent =

    StyleBackgroundContent::LinearGradient(LinearGradient {

        direction: deg(90),

        extend_mode: ExtendMode::Clamp,

        stops: NormalizedLinearColorStopVec::from_const_slice(SUNKEN_RIG_LEFT_STOPS),

    });

const SUNKEN_RIG_BOTTOM_STOPS: &[NormalizedLinearColorStop] = &[

    stop(0, ColorU::new(255, 253, 238, 26)),

    stop(14, ColorU::new(255, 253, 238, 0)),

];

/// `.nav-links a.active::after`, fourth layer: the far wall's light lifting

/// the bottom edge.

///

/// `linear-gradient(0deg, rgba(255, 253, 238, 0.10) 0%, rgba(255, 253, 238, 0)

/// 14%)`.

pub const SUNKEN_RIG_BOTTOM: StyleBackgroundContent =

    StyleBackgroundContent::LinearGradient(LinearGradient {

        direction: deg(0),

        extend_mode: ExtendMode::Clamp,

        stops: NormalizedLinearColorStopVec::from_const_slice(SUNKEN_RIG_BOTTOM_STOPS),

    });

/// A coloured command is a stone: its own colour, then the rig

/// `.btn-primary::after` lays on it, then the streak of `::before`.

///

/// The colour is the base layer because layers paint first-to-last; the rig is

/// translucent, so the colour shows through it.

    ]

/// The stone held down: its pressed colour under the sunken rig.

    ]

// -- the orb's gloss --------------------------------------------------------

const ORB_GLOSS_STOPS: &[NormalizedLinearColorStop] = &[

    stop(0, ColorU::new(255, 255, 255, 158)),

    stop(52, ColorU::new(255, 255, 255, 56)),

    stop(100, ColorU::new(255, 255, 255, 8)),

];

/// `.fl-orb-gloss`: "the specular cap. Hard along the top, dissolving at the

/// equator."

///

/// `linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255,

/// 0.22) 52%, rgba(255, 255, 255, 0.03) 100%)`. The CSS puts it on a separate

/// element covering the dome's upper half; here it spans the whole box it is

/// laid over, so it reads as a top-lit sheen on a domed knob.

pub const ORB_GLOSS: StyleBackgroundContent =

    StyleBackgroundContent::LinearGradient(LinearGradient {

        direction: deg(180),

        extend_mode: ExtendMode::Clamp,

        stops: NormalizedLinearColorStopVec::from_const_slice(ORB_GLOSS_STOPS),

    });

#[must_use]

        Some(ButtonOnClick {

    };

    ];

    // Resolved before `btn`'s fields are moved into the tree below.

    // A caller who injected a container style (`Some`) chose every property in

    // it — resting face, dark colours and states included. The chrome widgets

    // hand in part styles complete with their own hover/pressed pairs, and

    // anything this theme appended after them would win the cascade (inline

    // resolution is last-match) and paint the theme's greys over the ribbon's

    // blue. So the theme adds to its OWN default only.

        } else {

        }

    } else {

    };

        });

    // Add dark mode colors to container style

        // The resting face, in flora.css's terms. The standard command is raised

        // paper (`.btn-secondary`: `linear-gradient(var(--fl-rT), var(--fl-rB))`),

        // with its dark twin. A coloured command is a stone: its own colour in

        // both modes, under the depth rig and the streak the CSS lays on its

        // accent stone. The Link button has no surface and keeps what it had, the

        // dark surface included. It is part of the BASE: after the widget's flat

        // fill, which it wins over, and before the states, which win over it.

        {

            use crate::widgets::button::ButtonType;

            }

        }

        // Dark ink and dark borders belong to the NEUTRAL surface (raised

        // paper); a coloured stone keeps its own text and edge colours in

        // both modes, and the link has no face to border. Same rule as the

        // resting face above, from the one place it lives:

        // `ButtonType::surface`.

        // Here we could wrap the button in decorative DOM nodes for the skeumorphic flora look.

        // For now, we apply basic properties to test the theming engine.

        // The interactive states go LAST. Inline declarations resolve last-match

        // wins and a `dark_theme(..)` rule matches in every pseudo-state, so any

        // dark resting colour pushed after a `dark_on_hover` / `dark_on_focus` twin

        // would shadow it — no ring, no hover face, in dark mode.

use crate::widgets::check_box::CheckBox;

#[must_use]

    use azul_core::{

        callbacks::{CoreCallback, CoreCallbackData},

        dom::{EventFilter, HoverEventFilter},

    };

    ));

        ))

        )

            } else {

            }),

        })

                ))

        )

use crate::widgets::text_input::{

    default_on_focus_lost, default_on_focus_received, default_on_mouse_hover,

    default_on_text_input, default_on_virtual_key_down, TextInput, TEXT_INPUT_CONTAINER_CLASS,

    TEXT_INPUT_LABEL_CLASS,

};

#[must_use]

    use azul_core::{

        callbacks::{CoreCallback, CoreCallbackData},

        dom::{

            AttributeType, DomVec, EventFilter, FocusEventFilter, HoverEventFilter,

            IdOrClass::Class, TabIndex,

        },

    };

    // Resolved before `ti.text_input_state` is moved out below, and through the

    // widget's own resolver rather than a second copy of its default — the point

    // of the resolver is that flat and flora cannot drift on this answer.

    ));

    ));

    ));

    ));

    ));

    ));

    // The interactive states the widget no longer declares. Appended LAST —

    // after the base style and after the theme's own dark resting colours —

    // because the last matching inline declaration wins: a `dark_theme` border

    // pushed after these would beat the dark hover/focus ring. One array so

    // half of them cannot ship.

    ));

            ]

        )

                ]))]

        )

#[must_use]

    use azul_core::dom::{IdOrClass::Class, IdOrClassVec};

    use AzString;

    static LABEL_CLASS: &[IdOrClass] = &[Class(AzString::from_const_str("__azul-native-label"))];

    // Resolved before `l.string` is moved out below.

#[must_use]

    // Resolved up front: the knob's Dom is built after `s.switch_state` has

    // been moved into the callback's RefAny, and the resolver needs the whole

    // widget.

    use azul_core::{

        callbacks::{CoreCallback, CoreCallbackData},

        dom::{Dom, EventFilter, HoverEventFilter, IdOrClassVec, TabIndex},

    };

        ))

        )

                } else {

                },

            ]),

        })

                ))

        )

// -----------------------------------------------------------------------------

// PROGRESSBAR

// -----------------------------------------------------------------------------

#[must_use]

    )

    ]))

/// The render core behind [`ProgressBar::render_bar`] (percentage widths,

/// `bounds_px: None`) and the `VirtualView` callback (absolute pixel sizes

/// computed from the node's known bounds, `Some((width, height))`).

///

/// The split exists because the two contexts size differently. Percentages

/// inside a `VirtualView` DO resolve correctly against the view's bounds

/// (the child DOM lays out against its own viewport - it briefly resolved

/// against the WINDOW, fixed 2026-08-29, pinned by

/// `a_virtual_view_child_lays_out_against_the_view_bounds_not_the_window`),

/// but the bounds mode stays PIXEL-based for what percentages cannot

/// express: the container is sized to `bounds - 2px borders` so its 1px

/// border ring lands INSIDE the box - with the normal-flow sizing (content

/// height + borders) the ring overflowed the VV node and was clipped away

/// at the right and bottom ("oddly cut off", user report 2026-08-29) - and

/// the fill is an exact device-pixel split of the known content width.

#[allow(clippy::too_many_lines)]

#[must_use]

    {

        use azul_core::dom::DomVec;

        // Sizes resolved per context (see fn docs). The bounds branch

        // subtracts the container's 1px border ring so children + borders

        // exactly fill the VV box.

            }

        };

        };