:root {
  --grid-size: 120px;
}

table.tracklist {
  border-collapse: collapse;
  border: none;
  width: calc(100% - 0.5rem);
  margin: 0 0.25rem;

  &:not(.active) {
    display: none;
  }

  tr {
    td:first-child {
      padding-right: 0.5rem;
      width: 3rem;
      text-align: right;

      &::before {
        content: "▶︎ ";
        font-size: 0.9em;
        display: inline-block;
        visibility: hidden;
        transform: translate(-5px, -1px);
      }
    }
    td:last-child {
      text-align: end;
      padding-inline-end: 8px;
    }

    &:hover{
      background-color: silver;
      td:first-child:has(~ td:nth-child(2) a)::before { visibility: visible; }
    }
    
    &:has(td:nth-child(2) a) { cursor: pointer; }
  }
}

.view-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--grid-size));
  gap: 8px;
  width: 100%;

  .grid-category {
    grid-column: 1/-1;
    padding-bottom: 2px;
    border-bottom: 1px solid black;
  }
}

.image-button {
  padding: 3px;
  width: var(--grid-size);
  height: calc(var(--grid-size) * 1.25);

  img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


.playlist-header{
  display: flex;
  padding: 6px;
  margin: 2px;
  box-shadow: var(--border-bevel-pressed);
  background-color: silver;

  #coverPreviewer {
    width: 160px;
    height: 160px;
    background-color: silver;
    flex-shrink: 0;
    margin-inline-end: 8px;
  }
}

.artistProfile:not(.active) {
  display: none;
}

.artistProfile {
  p {
    font-size: 0.95rem;
    line-height: 125%;
  }
}