/* ==========================================================================
   Winamp 2.x  (1998)
   Dense grey panel, hard 1px bevels, bitmap-green readout, zero rounding.
   It really whips the llama's ass.
   ========================================================================== */

html[data-theme="winamp"] {
  --radius: 0px;
  --bg: #101010;
  --chrome: #3f3f3f;
  --chrome-hi: #585858;
  --chrome-lo: #1c1c1c;
  --panel: #2a2a2a;
  --ink: #d6d6d6;
  --ink-dim: #8c8c8c;
  --line: #000;
  --lcd-bg: #000;
  --row-active-ink: #000;
  --font-ui: "MS Sans Serif", "Tahoma", "DejaVu Sans", Verdana, sans-serif;
  --font-lcd: "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace;
  font-size: 12px;
}

html[data-theme="winamp"] body {
  background: #101010;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 2px);
}

/* hard two-tone bevel, the Winamp signature */
html[data-theme="winamp"] .topbar,
html[data-theme="winamp"] .player,
html[data-theme="winamp"] .panel,
html[data-theme="winamp"] .addpop {
  background: var(--chrome);
  box-shadow: inset 1px 1px 0 #6e6e6e, inset -1px -1px 0 #101010;
}
html[data-theme="winamp"] .panel { background: var(--panel); }

html[data-theme="winamp"] .player-titlebar {
  background: repeating-linear-gradient(90deg, #5c5c5c 0 1px, #3a3a3a 1px 2px);
  color: #c8c8c8; font-size: 10px;
  border-bottom: 1px solid #101010;
  box-shadow: inset 0 1px 0 #767676;
}
html[data-theme="winamp"] .player-titlebar .pt-name::before { content: "WINAMP"; letter-spacing: 2px; }
html[data-theme="winamp"] .pt-btns i { width: 9px; height: 9px; background: #6e6e6e; }

/* the black readout well */
html[data-theme="winamp"] .lcd,
html[data-theme="winamp"] .viz,
html[data-theme="winamp"] .art-wrap {
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #555;
  border-color: #000;
}
html[data-theme="winamp"] .lcd-title {
  font-size: 12px; letter-spacing: .6px;
  text-shadow: 0 0 5px color-mix(in srgb, var(--accent) 55%, transparent);
}
html[data-theme="winamp"] .t { color: var(--accent); text-shadow: 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent); }

/* small square hard-bevel buttons */
html[data-theme="winamp"] .tbtn,
html[data-theme="winamp"] .togbtn,
html[data-theme="winamp"] .btn,
html[data-theme="winamp"] .tb-select,
html[data-theme="winamp"] .search {
  background: #4a4a4a;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #6e6e6e, inset -1px -1px 0 #1c1c1c;
  border-radius: 0;
}
html[data-theme="winamp"] .tbtn { width: 36px; height: 30px; padding: 6px 8px; }
html[data-theme="winamp"] .tbtn-play { width: 40px; color: var(--accent); }
html[data-theme="winamp"] .tbtn:active,
html[data-theme="winamp"] .btn:active {
  box-shadow: inset 1px 1px 0 #1c1c1c, inset -1px -1px 0 #6e6e6e;
  background: #3c3c3c;
}
html[data-theme="winamp"] .togbtn { padding: 5px 7px; font-size: 10px; min-height: 30px; }

html[data-theme="winamp"] .seek::before {
  background: #1c1c1c;
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #555;
}
html[data-theme="winamp"] .seek-fill { background: var(--accent); }
html[data-theme="winamp"] .seek-knob {
  width: 13px; height: 14px; margin-left: -6px;
  background: #6e6e6e; border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #909090, inset -1px -1px 0 #2a2a2a;
}

html[data-theme="winamp"] .panel-head,
html[data-theme="winamp"] .statusbar {
  background: repeating-linear-gradient(90deg, #4e4e4e 0 1px, #3a3a3a 1px 2px);
  font-size: 10px;
}
html[data-theme="winamp"] .trow { padding: 5px 9px; border-bottom: 0; }
html[data-theme="winamp"] .tr-title,
html[data-theme="winamp"] .tr-num,
html[data-theme="winamp"] .tr-time { font-family: var(--font-lcd); font-size: 11px; }
html[data-theme="winamp"] .trow:not(.current) .tr-title { color: var(--accent); }
html[data-theme="winamp"] .trow.current { background: #0000c6; color: #fff; }
html[data-theme="winamp"] .trow.current .tr-title { color: #fff; }
html[data-theme="winamp"] .tracklist { background: #1a1a1a; }