/* The rules of the device pf-slab (src/devices/pf-slab.js). index.html loads this file after src/tokens.css, so at the same
   specificity a rule of this file wins over a rule of tokens.css. */
pf-slab { --color: #3e3e3e; --radius-device: .56; --ink: #646464; --label-size: .34; --keybed: #161616; }
pf-slab[material] > *, pf-slab .metal > * { --gap: .11; --seat-radius: .08; --seat-edge: .05; --seat-free: 1; }   /* thin dark frames round the keys */
pf-slab .metal { --color: #a3a3a3; --radius-device: .56 0 0 .56; --shadow-length: .3; }   /* the panel of metal: square on the side of the face, round at the corners of the case on its left, and a short step down to the face */
pf-slab pf-key { --color: #444444; --radius: .06; --mark: #767676; --label-size: .375; --legend-weight: 600; --legend-y: .185; --legend-align: start; --legend-inset: .198; --legend-line: .58; --legend-next-size: .331; --legend-next-color: #5c5c5c; }   /* the print in two lines from the top left */
pf-slab [label="strip mode"] { --legend-next-size: .375; --legend-next-color: #767676; }
pf-slab pf-key.pad { --color: #3b3b3b; }
/* The LED of each pad, from the top left, in the hues of the reference. */
pf-slab [label="pad 1"] > pf-led { --color: #8a4dff; } pf-slab [label="pad 2"] > pf-led { --color: #c04dff; } pf-slab [label="pad 3"] > pf-led { --color: #ff4dc4; } pf-slab [label="pad 4"] > pf-led { --color: #ff4d6d; }
pf-slab [label="pad 5"] > pf-led { --color: #2dff9a; } pf-slab [label="pad 6"] > pf-led { --color: #2de8ff; } pf-slab [label="pad 7"] > pf-led { --color: #3d8bff; } pf-slab [label="pad 8"] > pf-led { --color: #5a5dff; }
pf-slab [label="pad 9"] > pf-led { --color: #ffd42d; } pf-slab [label="pad 10"] > pf-led { --color: #c8ff2d; } pf-slab [label="pad 11"] > pf-led { --color: #7dff3d; } pf-slab [label="pad 12"] > pf-led { --color: #2dff5a; }
pf-slab [label="pad 13"] > pf-led { --color: #ff2d2d; } pf-slab [label="pad 14"] > pf-led { --color: #ff5a1f; } pf-slab [label="pad 15"] > pf-led { --color: #ff8a1f; } pf-slab [label="pad 16"] > pf-led { --color: #ffb21f; }
/* The colors of the decks, which a pad takes in a mode (slab.js view()): chords, melody, bass and drums, and white */
pf-slab pf-key.pad > pf-led.deck0 { --color: #8a4dff; } pf-slab pf-key.pad > pf-led.deck1 { --color: #2de8ff; } pf-slab pf-key.pad > pf-led.deck2 { --color: #ffd42d; } pf-slab pf-key.pad > pf-led.deck3 { --color: #ff5a1f; } pf-slab pf-key.pad > pf-led.white { --color: #ffffff; }
pf-slab .metal pf-key { --color: #a6a6a6; --mark: #ffffff; --legend-y: .25; }
pf-slab .metal :is([label=redo], [label=forward], [label="dial mode"]) { --legend-align: end; }   /* the right key of a pair */
pf-slab .metal pf-key.round { --color: #9c9c9c; --radius: 99; --gap: .16; --seat-radius: auto; }   /* a round hole */
pf-slab [label=record] { --icon-size: .3025; } pf-slab [label=record] > pf-led { --color: #ff2a00; }   /* a red dot and a green arrow, lit with power */
pf-slab [label=play] { --icon-size: .2755; } pf-slab [label=play] > pf-led { --color: #1eea2a; }
pf-slab pf-knob[variant] { --color: #474747; }
pf-slab .metal pf-knob[variant] { --color: #a8a8a8; }
pf-slab .window { --radius: .16; --gap: 0; }   /* the window of the OLED */
pf-slab .screen[variant] { --color: #141414; --ink: #d4d4d4; --radius: .16; --resolution: 128 56; --subpixels: mono; --pixel-fill: .9; --pixel-glow: .4; }   /* a white OLED of 128 by 56 */
pf-slab pf-led { --color: #ffffff; }
pf-slab pf-meter { --color: #ffffff; --keybed: #262626; }
pf-slab pf-plate { --color: #383838; }
pf-slab .logo { --label-size: .8; color: #ececec; letter-spacing: .3em; font-weight: 700; }
pf-slab .jack { --label-size: .62; color: #ececec; } pf-slab .metal .jack { color: #2e2e2e; }   /* in and out: as large as on the other devices, and clear on the face and on the metal */