/* Looks of the device building blocks. Recipes adjust them per device (see build.js). */

/* Shells */
.shell-paper{background:linear-gradient(#e6e4df,#cfcdc7);border-radius:14px;padding:20px;color:#1a1a1a;box-shadow:0 40px 80px -20px #000,inset 0 1px 0 #fff}
.shell-graphite{background:#262625;border-radius:18px;padding:18px;box-shadow:0 40px 80px -20px #000,inset 0 1px 0 #3a3a3a}
.shell-carbon{background:linear-gradient(#2d2d2e,#1d1d1e);border-radius:14px;padding:24px;box-shadow:0 40px 80px -20px #000,inset 0 1px 0 #444}
.shell-metal{background:linear-gradient(135deg,#dde2e6,#b4bcc3);border:6px solid #000;border-radius:36px;padding:16px;color:#000;box-shadow:0 40px 80px -20px #000}

/* Play controls */
.el-play-round{width:48px;height:48px;border-radius:50%;border:1px solid #444;background:transparent;font-size:14px}
.is-playing .el-play-round{background:var(--orange);border-color:var(--orange)}
.el-play-rec{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ff8a55,#c4400f);box-shadow:0 6px 12px #000}
.is-playing .el-play-rec{box-shadow:0 0 24px var(--orange)}
.el-play-switch{width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#9a9a9a 60%,#555);box-shadow:0 8px 14px #000}
.el-play-switch:active{transform:scale(.96)}
.el-play-knob{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,#ff6a2a,#ff1f6a);border:4px solid #000;display:grid;place-items:center}
.el-play-knob span{width:56px;height:56px;border-radius:50%;background:#111;position:relative}
.el-play-knob span::after{content:"";position:absolute;left:50%;top:6px;width:2px;height:14px;background:#fff}

/* Pads */
.el-pads{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.el-pad{aspect-ratio:1;border-radius:6px;background:linear-gradient(#2c2c2c,#121212);box-shadow:0 4px 0 #000,inset 0 1px 0 #555;transition:background .08s}
.el-pad.on{background:linear-gradient(#ff7a45,var(--orange))}
.el-pad--play{background:linear-gradient(#ff7a45,var(--orange));color:#fff;font-size:12px;font-weight:500}
.is-playing .el-pad--play{background:linear-gradient(#777,#444)}

/* Displays */
.el-bars{display:flex;gap:3px;align-items:flex-end}
.el-bars i{flex:1;background:var(--bar,var(--orange));height:4%;border-radius:1px}
.el-faders{display:flex;justify-content:space-between}
.el-fader{position:relative;width:24px;display:flex;justify-content:center}
.el-fader::before{content:"";width:4px;height:100%;background:#0b0b0b;border-radius:2px}
.el-fader i{position:absolute;left:0;width:24px;height:30px;border-radius:3px;background:linear-gradient(#fafafa,#bdbdbd);box-shadow:0 4px 6px #000;top:70px;transition:top .06s}
.el-fader i::after{content:"";position:absolute;left:5px;right:5px;top:14px;height:2px;background:#222}
.el-leds{background:#181818;border-radius:8px;display:flex;flex-direction:column-reverse;gap:3px;padding:10px 16px}
.el-leds i{height:5px;border-radius:3px;background:#333}
.el-leds i.on{background:#fff}
.el-leds i.hot{background:var(--orange)}
.el-vu{position:relative;color:#888;font-size:11px;align-self:center;aspect-ratio:200/110;width:100%}
.el-vu svg{position:absolute;inset:0;width:100%;height:100%}
.el-vu i{position:absolute;left:calc(50% - 1px);bottom:9.1%;width:2px;height:72%;background:#ff6a50;transform-origin:bottom;transform:rotate(-60deg);border-radius:2px}
.el-vu span{position:absolute;top:58%;left:4%}
.el-vu span:last-child{left:auto;right:4%}
.el-dial{width:180px;height:180px;border-radius:50%;border:1px solid #3c3c3c;display:grid;place-items:center;background:#2b2b2a}
.el-dial span{width:72px;height:72px;border-radius:50%;background:#333;box-shadow:0 8px 16px #000,inset 0 1px 0 #555;display:grid;place-items:center;color:var(--orange);font-weight:700}
.el-spool svg{width:100%;display:block;filter:drop-shadow(0 30px 40px #000)}
.el-canvas{width:100%;height:100%;display:block;min-width:0;min-height:0;contain:size}

/* Decoration */
.el-grill--dots{background:radial-gradient(circle,#222 35%,transparent 40%) 0 0/12px 12px,#bbb;border-radius:4px}
.el-grill--lines{background:repeating-linear-gradient(90deg,#111 0 2px,#2e2e2e 2px 5px);border-radius:4px}
.el-led{width:8px;height:8px;border-radius:50%;background:#123}
.is-playing .el-led{background:#33e0b0;box-shadow:0 0 10px #33e0b0}