/* Mouse Properties demo applet — page coordinates (the page's origin is screen (9, 49) in the references). */
.mo { position: absolute; inset: 0; }
.mo > * { position: absolute; }
.mo > span { white-space: pre; }

/* Buttons */
.mo__g-config { left: 15px; top: 13px; width: 356px; height: 145px; box-sizing: border-box; }
.mo__right { left: 25px; top: 38px; }
.mo__left { left: 125px; top: 38px; }
.mo__lb { left: 24px; top: 62px; }
.mo__lb1-dash { left: 33px; top: 78px; }
.mo__lb1 { left: 42px; top: 78px; }
.mo__lb2-dash { left: 33px; top: 91px; }
.mo__lb2 { left: 42px; top: 91px; }
.mo__picture { left: 151px; top: 64px; }
.mo__rb { left: 259px; top: 62px; }
.mo__rb1-dash { left: 268px; top: 78px; }
.mo__rb1 { left: 277px; top: 78px; }
.mo__rb2-dash { left: 268px; top: 91px; }
.mo__rb2 { left: 277px; top: 91px; }
.mo__g-files { left: 15px; top: 165px; width: 356px; height: 62px; box-sizing: border-box; }
.mo__folder { left: 30px; top: 184px; }
.mo__single { left: 76px; top: 182px; }
.mo__double { left: 76px; top: 204px; }
/* Win32 centres box and text separately in the control's height: in these taller controls the text sits 1px lower
   against the circle than the component's default (measured). */
.mo__single > .w2k-check__text, .mo__double > .w2k-check__text,
.mo--motion > .w2k-radio > .w2k-check__text { position: relative; top: 1px; }
.mo__g-dbl { left: 15px; top: 236px; width: 356px; height: 109px; box-sizing: border-box; }
.mo__dbl-slow { left: 30px; top: 283px; }
.mo__dbl-fast { left: 220px; top: 283px; }
.mo > .mo__dbl { left: 61px; top: 285px; width: 153px; height: 24px; }
.mo__test-label { left: 225px; top: 252px; }
.mo__test { left: 282px; top: 251px; width: calc(76px + 2 * var(--metric-client-edge)); height: calc(81px + 2 * var(--metric-client-edge)); }   /* the 76×81 picture in the edge */
.mo__test > img { display: block; }

/* Pointers */
.mo__g-scheme { left: 15px; top: 13px; width: 267px; height: 86px; box-sizing: border-box; }
.mo > .mo__scheme { left: 24px; top: 36px; width: 248px; }
.mo > .mo__save { left: 115px; top: 65px; }
.mo > .mo__delete { left: 196px; top: 65px; }
/* In a 1px static edge (frame.css; its white lines own the top-right and bottom-left corners — measured). */
.mo__preview { left: 291px; top: 20px; width: 80px; height: 78px; padding: 1px; }
.mo__preview > img { display: block; }
.mo__preview > img.mo__preview-cursor { margin: 22px 0 0 23px; }
.mo__customize { left: 15px; top: 109px; }
.mo > .mo__pointers { left: 15px; top: 127px; width: 356px; height: 184px; --metric-list-item-height: 34px; }
.mo__pointers [role="option"] { position: relative; height: 34px; padding-left: 5px; line-height: 34px; }
.mo__pointers [role="option"] > img { position: absolute; left: 299px; top: 1px; }
.mo__shadow { left: 15px; top: 320px; }
.mo > .mo__default { left: 214px; top: 321px; }
.mo > .mo__browse { left: 295px; top: 321px; }

/* Motion */
.mo__g-speed { left: 12px; top: 10px; width: 356px; height: 89px; box-sizing: border-box; }
.mo__speed-icon { left: 24px; top: 31px; }
.mo__speed-text { left: 63px; top: 35px; }
.mo > .mo__speed { left: 130px; top: 61px; width: 120px; height: 24px; }
.mo__slow { left: 101px; top: 75px; }
.mo__fast { left: 259px; top: 75px; }
.mo__g-accel { left: 12px; top: 108px; width: 356px; height: 89px; box-sizing: border-box; }
.mo__accel-icon { left: 24px; top: 132px; }
.mo__accel-text { left: 63px; top: 132px; }
.mo__none { left: 58px; top: 173px; }
.mo__low { left: 140px; top: 173px; }
.mo__medium { left: 211px; top: 173px; }
.mo__high { left: 290px; top: 173px; }
.mo__g-snap { left: 12px; top: 205px; width: 356px; height: 80px; box-sizing: border-box; }
.mo__snap-icon { left: 33px; top: 231px; }
.mo__snap { left: 79px; top: 238px; }
.mo__snap > .w2k-check__text { position: relative; top: -1px; }   /* 1px higher against its box than Pointers' check box (measured) */