@playlistBackgroundColor: #fafafa;
@descriptionLines: 3;

#playlists-container {
  display: flex;
  flex-wrap: wrap;
  padding-top: 1em;

  .playlist {
    margin: 0.5em;
    width: 15em;
    height: 15em !important;
    position: relative;
    overflow: hidden;

    .playlist-card-action-dropdown {
      position: absolute;
      bottom: 0;
      width: 100%;
    }

    .playlist-card-action-button {
      position: absolute;
      bottom: 0;
      border: none;
      padding: 5px;
      &:extend(.btn-block);
      &:extend(.btn-info);
    }

    .info {
      display: block;
      padding: 1em;
      height: 100%;
      width: 100%;
      background-color: @playlistBackgroundColor;
      > * {
        margin: 0.5em 0;
        &:first-child {
          margin: 0;
        }
      }

      /* Pure CSS multiline ellipsis by Sagi Shrieber:
			   http://hackingui.com/a-pure-css-solution-for-multiline-text-truncation/
			*/
      .description {
        overflow: hidden;
        position: relative;
        line-height: 1.2em;
        max-height: @descriptionLines * 1.2em;
        text-align: justify;
        padding-right: 2em;
        &:before {
          content: "...";
          position: absolute;
          right: 1em;
          bottom: 0;
        }
        &:after {
          content: "";
          position: absolute;
          right: 0;
          width: 1em;
          height: 1em;
          margin-top: 0.2em;
          background-color: inherit;
        }
      }
    }
  }
}

.new-playlist {
  margin: 0.5em;
  width: 15em;
  cursor: pointer;
  // using !important to overwrite styles from Card component
  // (not classes but DOM element.style
  background: @blue !important;
  height: initial !important;
  color: white;
  text-align: center;
  > div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size: 2em;
    padding: 1em;
    height: 100%;
    > span {
      // "Create new playlist" text
      line-height: 1.2em;
    }
  }
}

#playlist {
  .playlist-details {
    .title {
      line-height: 1em;
      padding-bottom: 0.5em;
      border-bottom: 1px solid @blue;
    }
    .info {
      display: flex;
      flex-wrap: wrap;
      &:extend(.text-muted);
      margin: 0.5em 0;
      > * {
        padding: 0 0.7em;
      }
    }
  }

  #add-track {
    background-color: @orange;
    > *:first-child {
      display: flex;
      align-items: center;
      color: white;
      font-size: 1.3em;
      font-weight: bold;
    }
    > .search > * {
      width: 95%;
    }
  }
}
// The drag icon used for sorting items in a playlist
.playlist-item-card .main-content .drag-handle {
  align-items: center;
  cursor: move;
  flex: 0;
  display: block;
  align-self: center;
  min-width: 3em;
}

.playlist-sort-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.8em;
}
