audio-vis/raw/scss/_playlist.scss

playlist {
  display: flex;
  flex-direction: column;

  div {
    padding: unset;
    position: unset;
  }

  .playlist-content {
    h1 {
      padding: 0 1em;
    }
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    font-size: 1.5em;
    padding: 5px;

    .current {
      font-size: .9em;
    }

    .item {
      cursor: pointer;
      user-select: none;
      border-radius: 5px;
      margin: 0 3px;
      display: flex;
      align-items: center;

      &.inactive {
        color: #aaa;
        pointer-events: none;
        cursor: not-allowed;
      }

      &:hover {
        color: $primary;
      }
    }
  }

  .playlist-item {
    display: flex;
    padding: 5px;
    box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, .08);
    cursor: pointer;
    transition: .5s;

    &.active {
      background-color: rgba(0, 0, 0, .2);

      .playlist-item-title {
        &:before {
          content: '🔊 ';
          padding-right: 5px;
        }
      }
    }

    &-title {
      margin-left: 10px;
      padding: 5px;
      display: flex;
      align-items: center;
    }

    &-number {
      padding: 5px 10px 5px 5px;
      width: 50px;
      display: flex;
      align-items: center;
    }

    &:hover {
      background-color: rgba(0, 0, 0, .4);
    }
  }
}