/* Tracks */
.player_track td.track-audio {
    display: none;
}

.player_track td div {
    margin: 0;
}

#player_tracks .field--type-entity-reference {
    margin: 0;
}

.player_track .track_number {
    font-weight: bolder;
    font-size: 2em;
    padding: .25em;
    position: relative;
}

/* Display play icon on track hover/focus. */
.player_track .track_number i {
    position:absolute;
    top: 25%;
    left: 25%;
    background-color: lightgrey;
}

.player_track i {
    opacity: 0;
}

tr.player_track:has(audio):focus i,
tr.player_track:has(audio):hover i {
    opacity: 1;
}
tr.player_track:has(audio):focus span,
tr.player_track:has(audio):hover span {
    opacity: 0;
}

#player_tracks tr:has(audio):hover td,
#player_tracks tr:has(audio):focus td {
    background-color: lightgrey;
}

.player_track:has(audio) {
    cursor: pointer;
}

/* Constrain tracks to a scrollable window so details are not so far down. */
.track_scroll_window {
    max-height: clamp(5em,800px,800px);
    overflow-y: auto;
    /* Provide room for the scroll-bar. */
    padding-right: 0.5em;

    /* Scroll shadow. */
    background:
    /* Shadow Cover TOP */
    linear-gradient(
      white 30%,
      rgba(255, 255, 255, 0)
    ) center top,
    
    /* Shadow Cover BOTTOM */
    linear-gradient(
      rgba(255, 255, 255, 0), 
      white 70%
    ) center bottom,
    
    /* Shadow TOP */
    radial-gradient(
      farthest-side at 50% 0,
      rgba(0, 0, 0, 0.33),
      rgba(0, 0, 0, 0)
    ) center top,
    
    /* Shadow BOTTOM */
    radial-gradient(
      farthest-side at 50% 100%,
      rgba(0, 0, 0, 0.33),
      rgba(0, 0, 0, 0)
    ) center bottom;
  
    background-repeat: no-repeat;
    background-size: 100% 60px, 100% 60px, 100% 20px, 100% 20px;
    background-attachment: local, local, scroll, scroll;
}

.track_scroll_window td {
    background: transparent;
}

/* Player */

#player_bar {
    /* Hide to start. */
    display: none;
    background-color: lightgrey;
    padding: 1em;
}

#player_bar_status {
    /* Hide to start. */
    display: none;
}

#player_bar audio {
    width: 100%;
    padding: .2em;
}

#player_bar audio:hover {
    transform: revert;
}