/* public/css/playlist-controls.css */

.playlist-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0; /* Remove gap so they touch */
}

/* Base style for the integrated ARP buttons - Updated sizing */
.playlist-control-btn {
  width: 24px; /* Reduced from 28.75px */
  height: 24px; /* Reduced from 28.75px */
  padding: 0;
  border: 1px solid var(--color-border-secondary);
  background-color: var(--color-windows-bg) !important; /* Inactive: Secondary color group (Windows BG) */
  color: var(--color-accent-highlight-1); /* Inactive: Font is Highlight 1 */
  font-family: var(--font-sections, sans-serif);
  font-size: 0.65rem; /* Reduced from 0.75rem */
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease-out;
  margin: 0;
}

/* Ensure play/pause icon in queue updates */
#play-pause-icon.fa-pause,
#play-pause-icon.fa-play {
    transition: transform 0.2s ease;
}

/* Ensure borders don't double up */
.playlist-control-btn:not(:first-child) {
    border-left: none;
}

/* specific shapes for the pill integration */
#artist-playlist-btn {
    border-radius: 16px 0 0 16px; /* Left pill (A) */
}

#random-playlist-btn {
    border-radius: 0; /* Flat middle (R) */
}

#playlist-btn {
    border-radius: 0 16px 16px 0; /* Right pill (P) */
}

.playlist-control-btn:hover {
  filter: brightness(1.1);
}

/* 'Pushed' state updated for colors */
.playlist-control-btn.pushed {
  background-color: var(--color-tertiary) !important; /* Active: Tertiary */
  color: var(--color-accent-highlight-2, #3b82f6); /* Active: Font is Highlight 2 */
  border-color: rgba(0,0,0,0.5);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}