/*
 * Mixx Pro Player 2027 — Styles
 *
 * ออกแบบให้ inherit จากธีมหลักเป็นหลัก
 * ใช้ CSS custom properties เพื่อให้ปรับแต่งได้ง่าย
 * override ผ่าน theme CSS ได้โดยตรง
 */

/* ════════════════════════════════════════
   CSS VARIABLES — override ใน theme ได้เลย
   ════════════════════════════════════════
   ตัวอย่างใน style.css ของธีม:
   .mixx27-controls { --mixx27-accent: #your-color; }
*/

.mixx27-soundfont-picker,
.mixx27-midi-folder-picker,
.mixx27-playlist-wrap,
.mixx27-controls {
    --mixx27-accent:     currentColor;
    --mixx27-radius:     4px;
    --mixx27-gap:        8px;
    font-family:         inherit;
    color:               inherit;
    font-size:           inherit;
}

/* ════════════════════════════════════════
   BUTTONS — transport controls
   ════════════════════════════════════════ */
.mixx27-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    font-family:     inherit;
    font-size:       inherit;
    background:      transparent;
    border:          1px solid currentColor;
    border-radius:   var(--mixx27-radius);
    padding:         6px 14px;
    white-space:     nowrap;
    text-decoration: none;
    opacity:         1;
    transition:      opacity 0.15s;
}
.mixx27-btn:hover { opacity: 0.6; }

/* ปุ่มที่มีรูป — เอากรอบและ padding ออก แสดงแค่รูป */
.mixx27-btn:has(.mixx27-btn-img) {
    border:     none;
    background: none;
    padding:    0;
}

/* รูปภาพในปุ่ม transport */
.mixx27-btn-img {
    display:    block;
    max-height: 2.5em;
    width:      auto;
    height:     auto;
    cursor:     pointer;
}

/* ════════════════════════════════════════
   LINK STYLE — soundfont & midi picker
   ════════════════════════════════════════ */
.mixx27-link-sf,
.mixx27-link-midi {
    display:         inline;
    cursor:          pointer;
    color:           #0003ff;
    font-weight:     bold;
    font-size:       inherit;
    font-family:     inherit;
    text-decoration: none;
    background:      none;
    border:          none;
    padding:         0;
    margin:          0;
}
.mixx27-link-sf:hover,
.mixx27-link-midi:hover {
    text-decoration: underline;
}

/* ════════════════════════════════════════
   SOUNDFONT PICKER
   ════════════════════════════════════════ */
.mixx27-soundfont-picker {
    display:     flex;
    align-items: center;
    gap:         var(--mixx27-gap);
    flex-wrap:   wrap;
    position:    relative;
    padding:     4px 0;
}
.mixx27-sf-name,
.mixx27-sf-status {
    font-size: 0.85em;
    opacity:   0.7;
}

/* Loading overlay — หน้า SF picker */
.mixx27-soundfont-picker .mixx27-loading-overlay {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    gap:             8px;
    background:      rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    border-radius:   var(--mixx27-radius);
    padding:         0 12px;
    z-index:         10;
}
.mixx27-loading-text { font-size: 0.85em; }

/* ════════════════════════════════════════
   MIDI FOLDER PICKER
   ════════════════════════════════════════ */
.mixx27-midi-folder-picker {
    display:     flex;
    align-items: center;
    gap:         var(--mixx27-gap);
    flex-wrap:   wrap;
    padding:     4px 0;
}
.mixx27-midi-count {
    font-size: 0.85em;
    opacity:   0.7;
}

/* ════════════════════════════════════════
   PLAYLIST
   ════════════════════════════════════════ */
.mixx27-playlist-wrap {
    overflow-y: auto;
    margin:     8px 0;
}
.mixx27-playlist-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         5px 0;
    font-size:       inherit;
    position:        sticky;
    top:             0;
    background:      inherit;
    z-index:         1;
}
.mixx27-clear-btn {
    background:  transparent;
    border:      none;
    padding:     2px 8px;
    font-size:   inherit;
    cursor:      pointer;
    font-family: inherit;
}

.mixx27-playlist {
    list-style: none;
    margin:     0;
    padding:    0;
}
.mixx27-playlist-item {
    display:    flex;
    align-items: center;
    gap:         6px;
    padding:     5px 0;
    cursor:      pointer;
    font-size:   inherit;
}
.mixx27-playlist-item.active { font-weight: 600; }

.mixx27-item-num {
    min-width:  20px;
    text-align: right;
    font-size:  inherit;
}
.mixx27-item-name {
    flex:          1;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}
.mixx27-item-play,
.mixx27-item-del {
    background: transparent;
    border:     none;
    cursor:     pointer;
    padding:    2px 4px;
    font-size:  0.85em;
    opacity:    0;
    transition: opacity 0.15s;
    font-family: inherit;
    color: inherit;
}
.mixx27-playlist-item:hover .mixx27-item-play,
.mixx27-playlist-item:hover .mixx27-item-del { opacity: 0.7; }
.mixx27-item-play:hover { opacity: 1; }
.mixx27-item-del:hover  { opacity: 1; }

/* Scrollbar */
.mixx27-playlist-wrap::-webkit-scrollbar       { width: 4px; }
.mixx27-playlist-wrap::-webkit-scrollbar-thumb { background: currentColor; opacity: 0.3; border-radius: 2px; }

/* ════════════════════════════════════════
   CONTROLS
   ════════════════════════════════════════ */
.mixx27-controls {
    padding: 6px 0;
}
.mixx27-transport {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
    margin-bottom: 8px;
}

/* Toggle labels (loop / shuffle / ch9) */
.mixx27-toggle-label {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    font-size:     0.85em;
    cursor:        pointer;
    padding:       4px 8px;
    border-radius: var(--mixx27-radius);
    opacity:       0.75;
    transition:    opacity 0.15s;
    font-family:   inherit;
}
.mixx27-toggle-label:hover { opacity: 1; }
.mixx27-toggle-label input { cursor: pointer; }

/* ────── Progress ────── */
.mixx27-progress-row {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin:      4px 0;
}
.mixx27-progress {
    -webkit-appearance: none;
    appearance:         none;
    flex:               1;
    min-width:          80px;
    height:             4px;
    border-radius:      2px;
    background:         rgba(128,128,128,0.3);
    cursor:             pointer;
    outline:            none;
}
.mixx27-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:              14px;
    height:             14px;
    border-radius:      50%;
    background:         currentColor;
    cursor:             pointer;
    transition:         transform 0.1s;
}
.mixx27-progress::-webkit-slider-thumb:hover { transform: scale(1.2); }

.mixx27-time-cur,
.mixx27-time-tot {
    font-size:            0.8em;
    min-width:            32px;
    opacity:              0.6;
    font-variant-numeric: tabular-nums;
}

/* ────── Now Playing ────── */
.mixx27-now-playing {
    font-size:     0.85em;
    opacity:       0.8;
    margin-top:    6px;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

/* ════════════════════════════════════════
   SPINNER
   ════════════════════════════════════════ */
.mixx27-spinner {
    width:         20px;
    height:        20px;
    border:        2px solid rgba(128,128,128,0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation:     mixx27-spin 0.8s linear infinite;
    flex-shrink:   0;
}
@keyframes mixx27-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */
@media (max-width: 480px) {
    .mixx27-btn         { padding: 5px 10px; font-size: 0.9em; }
    .mixx27-transport   { gap: 4px; }
    .mixx27-progress    { min-width: 60px; }
}