@use "../base/color" as cl;

// The global disabled treatment.
//
// The background is forced with `!important` because it has to beat a
// component's own fill: `.qo-btn.qo-btn-primary` is (0,2,0) where this selector
// is (0,1,0), so without it a disabled primary button would keep its blue.
//
// `color` has to be forced for exactly the same reason, and for a long time it
// was not. A solid variant sets `color: $text-light` (white) to be legible on
// its own fill; the moment this rule repainted that fill grey and left the
// colour alone, the label became white on #d9e0e7 — invisible. Advanced Search's
// "Apply Filter" is disabled until the filter is valid, so it spent most of its
// life unreadable.
//
// $text-secondary rather than $text-default: it reads as clearly muted against
// the enabled $text-dark while still holding ~3.7:1 on the disabled grey, where
// $text-default sits nearer 2.6:1 and starts to disappear.
//
// `border-color` is the third declaration that has to be forced, and for the
// same (0,2,0) reason: every solid and outline variant states its own border
// alongside its fill — `.qo-btn.qo-btn-primary` sets #1261e8, `-danger` #ef4444
// — so greying only the inside left a disabled button ringed in its live accent
// colour. A blue-outlined grey block reads as available, which is the one thing
// a disabled control must not do, and on `qo-btn-outline-*` the ring was the
// whole control.
//
// It takes $border-secondary (#c3ccd6) — one step darker than the #d9e0e7 fill,
// not the fill itself. Painting the edge in $background-disabled removed the
// live accent but also removed the control: a disabled field became a grey
// rectangle with no boundary, and on a grey-ish panel it stopped reading as a
// field at all. $border-secondary is the token the enabled control already
// hovers to, so the disabled edge is a measure the system owns rather than a
// new value, and it stays clearly quieter than the $border-primary focus ring.
//
// This is the control's *outer* edge, and it should be visible. Composite
// widgets — a date picker's toggle, a numeric spinner's separator — draw parts
// of themselves on child elements, and those are internal seams that must stay
// flush with the fill instead. That distinction cannot be made here: it needs
// the vendor's class names, so it lives in `procode-lowcode-kendo-widget`
// (`src/assets/styles/_kendo-bridge.scss`). This package states the design
// system and must stay renderer-agnostic — apps consume it without drawing a
// single Kendo widget, and a `.k-*` selector here makes every one of them carry
// a markup contract they never render. Same rule vs-template follows.
//
// `.qo-disabled` is the class form of the same state, for the cases that cannot
// use the attribute — a `div` or `span` standing in for a control, or a control
// that must stay focusable. It was previously handled component by component
// (`.qo-input.qo-disabled` set a fill but no border, `.qo-btn.qo-disabled` set
// only `opacity`), so the same screen could show two different disabled looks
// depending on which way a widget happened to be switched off. One selector,
// one treatment.
*:disabled,
*[disabled],
*.qo-disabled {
  background-color: cl.$background-disabled !important;
  border-color: cl.$border-secondary !important;
  color: cl.$text-secondary !important;
  cursor: not-allowed !important;
}