/*
 * Colour button (AUDYT.md B1) — desk.cpl's colour picker button, measured on Display Properties › Appearance: the
 * control edge (win2k: EDGE_RAISED with 3D Light outside), a 22×13 swatch framed in ButtonText, an etched separator
 * and the 5-3-1 drop arrow. A disabled one shows no swatch, its arrow embossed.
 *
 *   <span class="w2k-colorbutton" role="button" tabindex="0" aria-label="Color"><span class="w2k-colorbutton__swatch"
 *         style="background: #3A6EA5"></span></span>
 */
.w2k-colorbutton {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 42px;
  height: 21px;
  background: var(--color-control-face);
  box-shadow: var(--edge-control-raised);
}
.w2k-colorbutton::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 4px;
  width: 2px;
  height: 13px;
  background: var(--edge-etched-v);
}
.w2k-colorbutton::after {
  content: "";
  position: absolute;
  left: 33px;
  top: 9px;
  width: 5px;
  height: 3px;
  background:
    linear-gradient(var(--arrow, var(--sys-btn-text)), var(--arrow, var(--sys-btn-text))) 0 0 / 5px 1px no-repeat,
    linear-gradient(var(--arrow, var(--sys-btn-text)), var(--arrow, var(--sys-btn-text))) 1px 1px / 3px 1px no-repeat,
    linear-gradient(var(--arrow, var(--sys-btn-text)), var(--arrow, var(--sys-btn-text))) 2px 2px / 1px 1px no-repeat;
}
.w2k-colorbutton[aria-disabled="true"] > .w2k-colorbutton__swatch { display: none; }
.w2k-colorbutton[aria-disabled="true"]::after { --arrow: var(--color-disabled-text); filter: drop-shadow(1px 1px 0 var(--color-disabled-emboss)); }
.w2k-colorbutton__swatch {
  position: absolute;
  left: 5px;
  top: 4px;
  width: 22px;
  height: 13px;
  box-sizing: border-box;
  border: 1px solid var(--sys-btn-text);
}