/* Reserve the same space for the track number and its playback control. */
.tracklist > thead > tr > :first-child,
.tracklist > tbody > tr > :first-child {
    box-sizing: border-box;
    width: 3.5rem;
    min-width: 3.5rem;
    padding-left: 1.5rem;
    padding-right: .5rem;
    text-align: center;
}

.tracklist > thead > tr > :nth-child(2),
.tracklist > tbody > tr > :nth-child(2) {
    padding-left: .5rem;
}

.tracklist-position {
    position: relative;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    font-variant-numeric: tabular-nums;
}

.tracklist-number,
.tracklist-play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.tracklist-play {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.tracklist > tbody > tr:hover .tracklist-number,
.tracklist > tbody > tr:focus-within .tracklist-number,
.artist-tracklist > tbody > tr:hover .tracklist-number,
.artist-tracklist > tbody > tr:focus-within .tracklist-number {
    opacity: 0;
}

.tracklist > tbody > tr:hover .tracklist-play,
.tracklist > tbody > tr:focus-within .tracklist-play,
.artist-tracklist > tbody > tr:hover .tracklist-play,
.artist-tracklist > tbody > tr:focus-within .tracklist-play {
    opacity: 1;
}

@media (hover: none) {
    .tracklist-number { opacity: 0; }
    .tracklist-play { opacity: 1; }
}

/* Keep saved entries readable and their metadata actions usable. Do not dim
   the last cell: it contains the credits dialog as well as its trigger. */
.tracklist > tbody > .track-unavailable > td:not(:last-child),
.catalog-unavailable { opacity: .42; }
.tracklist > tbody > .track-unavailable .tracklist-number { opacity: 1; }
.tracklist > tbody > .track-unavailable .tracklist-play { display: none; }
.playAudio:disabled { opacity: .4; cursor: not-allowed; }