.playlist {
  position: relative;
  z-index: 2;

  &__header {
    display: flex;
    gap: calc(var(--space-between-block) / 2);
    align-items: center;
    margin-bottom: var(--space-between-block);
  }

  &__title {
    margin: 0;
    padding: 0;
    font-size: 32px;

    &.m--margin {
      margin-bottom: 1rem;
    }
  }

  &__back {
    cursor: url('./assets/img/icon/cursor.svg'), auto;

    width: 30px;
    height: 30px;

    background: svg-load('./assets/img/icon/arrow-right.svg', stroke=$color-white) no-repeat 100%;

    transition: all 0.3s ease;

    &:hover {
      background: svg-load('./assets/img/icon/arrow-right.svg', stroke=$color-primary) no-repeat 100%;
    }
  }

  &__edit {
    cursor: url('./assets/img/icon/cursor.svg'), auto;

    width: 30px;
    height: 30px;

    background: svg-load('./assets/img/icon/ellipsis.svg', fill=$color-white) no-repeat 100%;

    transition: all 0.3s ease;

    &:hover {
      background: svg-load('./assets/img/icon/ellipsis.svg', fill=$color-primary) no-repeat 100%;
    }
  }

  &-roster {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--space-between-block) / 2);
    width: 100%;
  }

  &-edit {
    position: relative;
    z-index: 2;

    &__search {
      margin-bottom: var(--space-between-block);
    }

    &__search {
      width: 40%;
      min-width: 320px;
    }

    &__list {
      display: flex;
      gap: var(--space-between-block);
    }

    &__item {
      width: calc(50% - var(--space-between-block) / 2);
    }

    &__title {
      margin-bottom: 1rem;

      font-size: 2rem;
      color: transparent;

      background-image: var(--linear-gradient);
      background-clip: text;
    }

    &__upload {
      cursor: url('./assets/img/icon/cursor.svg'), auto;

      display: flex;
      gap: 10px;

      margin: 0 0 var(--space-between-block);
      padding: 0;

      color: transparent;

      background-image: var(--linear-gradient-highlight);
      background-clip: text;
      border: none;

      transition: all 0.3s ease;

      &::before {
        content: '';
        width: 20px;
        height: 20px;
        background: svg-load('./assets/img/icon/paper-clip.svg', fill=$color-primary) no-repeat 100%;
      }

      &:hover {
        color: var(--color-white);
      }
    }
  }

  &-item {
    cursor: url('./assets/img/icon/cursor.svg'), auto;

    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    min-width: 220px;

    &__cover {
      min-height: 220px;
      margin-bottom: 10px;

      background: svg-load('./assets/img/icon/playlist-item.svg', fill=$color-white) no-repeat 100%;
      border-radius: 10px;

      transition: all 0.3s ease;

      &:hover {
        margin-bottom: 10px;
        background: svg-load('./assets/img/icon/playlist-item.svg', fill=$color-white-opacity) no-repeat 100%;
        border-radius: 10px;
      }
    }

    &.m--create &__cover {
      position: relative;
      background: var(--bg-opacity);

      &::after {
        content: '';

        position: absolute;
        inset: 0;

        width: 63px;
        height: 63px;
        margin: auto;

        background: svg-load('./assets/img/icon/playlist-item-create.svg', fill=$color-white-opacity) no-repeat 100%;

        transition: all 0.3s ease;
      }

      &:hover {
        background: var(--color-primary);

        &::after {
          background: svg-load('./assets/img/icon/playlist-item-create.svg', fill=$color-white) no-repeat 100%;
        }
      }
    }
  }
}