/* Click a chord to hear it (js/chord-sound.js). Loaded for text tabs, see
   templates/next/tabs/tab-index.php. */

.tab-body .cs-chord,
.tab-body .cs-note {
    cursor: pointer;
    border-radius: 2px;
}

/* .cs-hover: the chord a click would play, also when the mouse is in
   the area around it (chord-sound.js); .cs-near: the mouse is there. */
.tab-body.cs-near {
    cursor: pointer;
}

.tab-body .cs-chord:hover,
.tab-body .cs-chord.cs-hover,
.tab-body .cs-note:hover,
.tab-body .cs-note.cs-hover {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

.tab-body .cs-chord.cs-playing,
.tab-body .cs-note.cs-playing {
    background: #ffe27a;
    box-shadow: 0 0 0 2px #ffe27a;
    color: #000;
}

#chordlist .svg-chord {
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s;
}

#chordlist .svg-chord.cs-playing {
    background: #ffe27a;
    box-shadow: 0 0 0 2px #ffe27a;
}

/* A chord diagram next to a clicked chord when the list is not in view. */
.cs-popup {
    position: absolute;
    z-index: 20;
    padding: 6px 8px 4px;
    background: #fff;
    border: 1px solid #d9dde3;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.cs-popup .svg-chord {
    display: block;
    width: 90px;
    border-radius: 4px;
}

.cs-popup .svg-chord svg {
    display: block;
}

.cs-popup-small {
    padding: 4px 5px 2px;
}

.cs-popup-small .svg-chord {
    width: 64px;
}

.cs-hint {
    margin: 0 0 0.6em;
    color: #6b7280;
    font-size: 0.9em;
}

@media print {
    .cs-hint,
    .cs-popup {
        display: none;
    }

    .tab-body .cs-chord.cs-playing,
    .tab-body .cs-note.cs-playing {
        background: none;
        box-shadow: none;
    }
}