@import "../../TOKENS";
.playlist-menu-item {
  display: flex;

  position: relative;
  cursor: pointer;

  &.cloner {
    position: absolute;
    left: 10px;

    opacity: 0.7;
    width: calc(100% - 20px);
  }

  &:after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    background-color: rgba(238, 238, 238, 0.01);

    $transition-property: background, transform;
    $transition-duration: 0.25s;
    $transition-timing: ease-out;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);

  }

  &.target-playlist-item {

    transform: scale(1);

    &:after {

      background-color: rgba(238, 238, 238, 1);
    }
  }

  align-items: center;
  background-color: #fff;
  transform: scale(1);
  $transition-property: background, transform;
  $transition-duration: 0.25s;
  $transition-timing: ease-out;
  @include apply_transition($transition-property, $transition-duration, $transition-timing);

  user-select: none;

  &:hover, &.current-playlist-item {
    background-color: #eeeeee;

    .the-sort-handle {
      transform: scale(1.2);
    }
  }

  &.current-playlist-item {

    .the-sort-handle {
      opacity: 0;
    }
  }


  .the-sort-handle {
    padding: 5px;

    transform: scale(1);
    opacity: 1;

    $transition-property: opacity, transform;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }

  .pi-thumb-con {
    width: 50px;

    flex: 0 0 auto;

    margin-right: 10px;

    .pi-thumb {
      width: 100%;
      padding-top: 100%;
    }
  }

  & + .playlist-menu-item {
    margin-top: 5px;
  }

  .pi-meta-con {
    width: auto;
    flex: 100;
    min-width: 0;


    text-overflow: ellipsis;
    overflow: hidden;

  }

  .pi-the-artist {
    font-size: 11px;
    opacity: 0.7;
    margin-bottom: 5px;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .pi-the-name {
    font-size: 13px;
    font-weight: bold;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
  }

}