/* Menu music (assets/js/menu-music.js): its on/off button, in each layout's own style. It sits at the
   end of the launcher's toolbar, and in Windows 11-style it is the taskbar tray's speaker. */

.oss-music {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 44px; padding: 0 14px; border: 1px solid #30363d; border-radius: 8px;
  background: #161b22; color: #8b949e; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.oss-music svg { width: 18px; height: 18px; flex: none; }
.oss-music:hover { color: #e6edf3; }
.oss-music:focus-visible { outline: 2px solid #58a6ff; outline-offset: 1px; }
.oss-music[aria-pressed="true"] { color: #e6edf3; }
.oss-music[aria-pressed="true"] svg { color: #58a6ff; filter: drop-shadow(0 0 4px rgba(88, 166, 255, 0.45)); }
.oss-music .oss-music-off { display: none; }
.oss-music[aria-pressed="false"] .oss-music-off { display: inline; }
.oss-music[aria-pressed="false"] .oss-music-on { display: none; }

/* The layouts other than the grid: one more place in the bar above the layout, after the tabs */
#launcher.oss-alt.active {
  grid-template-columns: auto minmax(140px, 1fr) auto auto auto;
  grid-template-areas: "brand search upload tabs music" "stage stage stage stage stage" "foot foot foot foot foot";
}
#launcher.oss-alt .launcher-tabs { margin-right: 0; }
#launcher.oss-alt .oss-music { grid-area: music; align-self: stretch; margin: 6px 18px 6px 0; padding: 0 12px; }
@media (max-width: 820px) {
  #launcher.oss-alt.active {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "brand brand tabs" "search music upload" "stage stage stage" "foot foot foot";
  }
  #launcher.oss-alt .launcher-tabs { margin: 8px 12px 0 0; }
  #launcher.oss-alt .oss-music { margin: 0; padding: 0 10px; min-width: 40px; }
  #launcher.oss-alt .oss-music-text { display: none; }
}
#launcher.oss-layout-win11 .toolbar .oss-music { display: none; }

/* Light glyph on see-through glass over the darker layouts, as their tabs are */
#launcher:is(.oss-layout-coverflow, .oss-layout-ps4, .oss-layout-xmb, .oss-layout-metro, .oss-layout-mobile) .oss-music {
  background: rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.72);
}
#launcher:is(.oss-layout-coverflow, .oss-layout-ps4, .oss-layout-xmb, .oss-layout-metro, .oss-layout-mobile) .oss-music:hover,
#launcher:is(.oss-layout-coverflow, .oss-layout-ps4, .oss-layout-xmb, .oss-layout-metro, .oss-layout-mobile) .oss-music[aria-pressed="true"] { color: #fff; }
#launcher:is(.oss-layout-coverflow, .oss-layout-ps4, .oss-layout-xmb, .oss-layout-metro, .oss-layout-mobile) .oss-music[aria-pressed="true"] svg { color: #fff; filter: none; }

/* Cover Flow: a dark, glossy pill */
#launcher.oss-layout-coverflow .oss-music { background: linear-gradient(#3b3e45, #1c1e23); border-color: #55585f; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
#launcher.oss-layout-coverflow .oss-music[aria-pressed="true"] svg { filter: drop-shadow(0 0 4px rgba(150, 200, 255, 0.6)); }

/* Channels: white and rounded, the console blue when on */
#launcher.oss-layout-channels .oss-music { background: #fff; border-color: #c9d2da; border-radius: 999px; color: #6b7782; }
#launcher.oss-layout-channels .oss-music:hover { color: #136f96; }
#launcher.oss-layout-channels .oss-music[aria-pressed="true"] { background: #e3f6fd; color: #136f96; box-shadow: inset 0 0 0 1px #9fdcf3; }
#launcher.oss-layout-channels .oss-music[aria-pressed="true"] svg { color: #1a9fd4; filter: none; }

/* XMB: no box, a glowing glyph as on its family row */
#launcher.oss-layout-xmb .oss-music { background: transparent; border-color: transparent; }
#launcher.oss-layout-xmb .oss-music[aria-pressed="true"] svg { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.75)); }
#launcher.oss-layout-xmb .oss-music:hover { background: rgba(255, 255, 255, 0.1); }

/* PS4-style: a rounded square that lights up */
#launcher.oss-layout-ps4 .oss-music { border-radius: 10px; }
#launcher.oss-layout-ps4 .oss-music[aria-pressed="true"] { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.4); }

/* Metro: square and flat, the tile blue when on */
#launcher.oss-layout-metro .oss-music { border-radius: 0; }
#launcher.oss-layout-metro .oss-music[aria-pressed="true"] { background: #0063b1; border-color: #0063b1; }

/* Mobile Mode: a round control, as on a phone */
#launcher.oss-layout-mobile .oss-music { border-radius: 999px; }
#launcher.oss-layout-mobile .oss-music[aria-pressed="true"] { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.3); }

/* Windows 11-style: the tray's speaker */
.oss-music.oss-music-tray {
  gap: 0; width: 36px; min-width: 0; height: 40px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: inherit; font-weight: inherit;
}
.oss-music.oss-music-tray svg { width: 16px; height: 16px; color: inherit; filter: none; }
.oss-music.oss-music-tray:hover { background: rgba(255, 255, 255, 0.08); }
.oss-music.oss-music-tray:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }