{"version":3,"mappings":"2vGAKA,MAAMA,EAAOC,IACPC,EAAMC,IACNC,EAAQC,EAuBaL,EAAK,SAAS,qBAEnC,MAAAM,EAAWC,EAA6B,IAAI,EAC5CC,EAAUD,IAChB,IAAIE,EAAmB,KACjB,MAAAC,EAAWH,EAAI,EAAK,EACpBI,EAAA,IAAMP,EAAM,QAASQ,CAAS,EACpC,eAAeA,GAAY,CACrB,GAAAR,EAAM,SAAWI,EAAQ,MAAO,CAClC,MAAMK,GAAY,MAAMC,EAAA,wBAAAC,CAAA,eAAO,4BAAY,EAAG,eAAAA,EAAA,eAEhCN,EAAA,IAAII,EAASL,EAAQ,MAAO,CACxC,UAAW,IACX,QAAS,IAAOE,EAAS,MAAQ,GACjC,MAAQM,GAAQ,CACd,MAAMC,EAAWD,EAAI,SACfE,EAAWF,EAAI,SACrB,GAAI,OAAOC,GAAa,UAAY,OAAOC,GAAa,SACtD,OAEF,MAAMC,EAAOC,EAAM,MAAM,OAAOH,EAAU,CAAC,EAC3CG,EAAM,MAAM,OAAOF,EAAU,EAAG,GAAGC,CAAI,EACvCT,EAAS,MAAQ,EACnB,EACD,OAEDD,GAAA,MAAAA,EAAa,UACCA,EAAA,IAElB,CAEA,MAAMW,EAAQC,EAAS,CACrB,IAAK,IAAMjB,EAAM,MACjB,IAAMgB,GAA8BE,EAAK,eAAgBF,CAAK,EAC/D,EAED,eAAeG,GAAyB,CAGlC,GAFJjB,EAAS,MAAQ,KAEb,EAACF,EAAM,MAAM,OAIb,IACF,MAAMoB,EAAcpB,EAAM,MAAM,IAAKqB,GAAMA,EAAE,UAAU,EACvDnB,EAAS,MAAS,MAAMJ,EAAI,KAAK,0BAA2B,CAC1D,YAAAsB,CAAA,CACD,QACM,EAAG,CACF,cAAM,sCAAuC,CAAC,CACxD,CACF,CACUE,EAAA,IAAMH,GAAwB,EAExCZ,EACE,IAAMP,EAAM,MACZ,IAAMmB,EAAuB,EAC7B,CAAE,KAAM,EAAK,GAGf,SAASI,EAAkBC,EAAoB,SACtC,QAAAC,GAAAC,EAAAxB,EAAS,QAAT,YAAAwB,EAAgB,KAAMC,GAAMA,EAAE,aAAeH,KAA7C,YAAAC,EAA0D,MAAO,EAC1E,CAEA,SAASG,EAAoBJ,EAAoB,CACzC,MAAAK,EAAMN,EAAkBC,CAAU,EACnCK,GAGE,YAAKA,EAAK,QAAQ,CAC3B,CACA,MAAMX,EAAOY,EAIb,SAASC,EACP,EACAP,EACAQ,EACAC,EACA,CAEA,GADKf,EAAA,QAASM,EAAYQ,EAAMC,CAAS,EACrCjC,EAAM,aACR,SAAE,gBAAgB,EAClB,EAAE,eAAe,EACV,EAEX,CAEM,MAAAkC,EAAcjB,EAAS,IACvBjB,EAAM,QACD,MAELA,EAAM,aACD,SAEF,aACR","names":["beta","useBetaStore","api","useApiStore","props","__props","loopData","ref","wrapper","sortableObj","dragging","watch","onReorder","Sortable","__vitePreload","__vite_default__","evt","oldIndex","newIndex","song","songs","computed","emit","getLoopMultitrackLinks","songNumbers","i","onMounted","getMultitracksUrl","songNumber","_b","_a","l","goToMultitracksLink","url","__emit","onClick","slug","songTitle","componentIs"],"ignoreList":[],"sources":["../../Vue/src/components/Common/SongListTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { FESearchResult } from \"@/models/frontend-only/FESearchResult\";\r\nimport { LoopMultitrack } from \"@/models/LoopMultitrack\";\r\nimport { SongSearchResult } from \"@/models/SongSearchResult\";\r\n\r\nconst beta = useBetaStore();\r\nconst api = useApiStore();\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    songs: FESearchResult[];\r\n    showRank?: boolean;\r\n    classes?: string;\r\n    loadingNumber?: number | null;\r\n    dontGoToSong?: boolean;\r\n    reorder?: boolean;\r\n    hideExtraIcons?: boolean;\r\n    showAlbumArtwork?: boolean;\r\n    dataTitle?: string;\r\n    showWeeklyTrends?: boolean;\r\n    largeAlbumArtwork?: boolean;\r\n    showChartData?: boolean;\r\n    showBadges?: boolean;\r\n  }>(),\r\n  {\r\n    showRank: false,\r\n    classes: undefined,\r\n    dataTitle: \"\",\r\n    loadingNumber: null,\r\n  },\r\n);\r\nconst enableSongVersions = beta.features.recordingFocusLayout;\r\n\r\nconst loopData = ref<LoopMultitrack[] | null>(null);\r\nconst wrapper = ref<HTMLDivElement>();\r\nlet sortableObj: any = null;\r\nconst dragging = ref(false);\r\nwatch(() => props.reorder, onReorder);\r\nasync function onReorder() {\r\n  if (props.reorder && wrapper.value) {\r\n    const Sortable = (await import(\"sortablejs\")).default;\r\n\r\n    sortableObj = new Sortable(wrapper.value, {\r\n      animation: 150,\r\n      onStart: () => (dragging.value = true),\r\n      onEnd: (evt) => {\r\n        const oldIndex = evt.oldIndex;\r\n        const newIndex = evt.newIndex;\r\n        if (typeof oldIndex !== \"number\" || typeof newIndex !== \"number\") {\r\n          return;\r\n        }\r\n        const song = songs.value.splice(oldIndex, 1);\r\n        songs.value.splice(newIndex, 0, ...song);\r\n        dragging.value = false;\r\n      },\r\n    });\r\n  } else {\r\n    sortableObj?.destroy();\r\n    sortableObj = null;\r\n  }\r\n}\r\n\r\nconst songs = computed({\r\n  get: () => props.songs,\r\n  set: (songs: SongSearchResult[]) => emit(\"update:songs\", songs),\r\n});\r\n\r\nasync function getLoopMultitrackLinks() {\r\n  loopData.value = null;\r\n\r\n  if (!props.songs.length) {\r\n    return;\r\n  }\r\n\r\n  try {\r\n    const songNumbers = props.songs.map((i) => i.songNumber);\r\n    loopData.value = (await api.post(\"/GetLoopMultitrackLinks\", {\r\n      songNumbers,\r\n    })) as LoopMultitrack[];\r\n  } catch (e) {\r\n    console.error(\"Error getting loop multitrack links\", e);\r\n  }\r\n}\r\nonMounted(() => getLoopMultitrackLinks());\r\n\r\nwatch(\r\n  () => props.songs,\r\n  () => getLoopMultitrackLinks(),\r\n  { deep: true },\r\n);\r\n\r\nfunction getMultitracksUrl(songNumber: string) {\r\n  return loopData.value?.find((l) => l.songNumber === songNumber)?.url || false;\r\n}\r\n\r\nfunction goToMultitracksLink(songNumber: string) {\r\n  const url = getMultitracksUrl(songNumber);\r\n  if (!url) {\r\n    return;\r\n  }\r\n  window.open(url, \"_blank\");\r\n}\r\nconst emit = defineEmits<{\r\n  (e: \"click\", songNumber: string, slug: string, songTitle: string): void;\r\n  (e: \"update:songs\", songs: SongSearchResult[]): void;\r\n}>();\r\nfunction onClick(\r\n  e: Event,\r\n  songNumber: string,\r\n  slug: string,\r\n  songTitle: string,\r\n) {\r\n  emit(\"click\", songNumber, slug, songTitle);\r\n  if (props.dontGoToSong) {\r\n    e.stopPropagation();\r\n    e.preventDefault();\r\n    return false;\r\n  }\r\n}\r\n\r\nconst componentIs = computed(() => {\r\n  if (props.reorder) {\r\n    return \"div\";\r\n  }\r\n  if (props.dontGoToSong) {\r\n    return \"button\";\r\n  }\r\n  return \"router-link\";\r\n});\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    v-if=\"loadingNumber\"\r\n    class=\"song-list-table\"\r\n  >\r\n    <div>\r\n      <div>\r\n        <span\r\n          v-for=\"i of loadingNumber\"\r\n          :key=\"i\"\r\n          class=\"song-item block\"\r\n          :class=\"classes\"\r\n        >\r\n          <div class=\"flex items-center gap-2\">\r\n            <div\r\n              v-if=\"showRank\"\r\n              class=\"col-rank\"\r\n            >\r\n              <div class=\"rank-position\">\r\n                <span class=\"placeholder\" />\r\n              </div>\r\n            </div>\r\n            <div\r\n              class=\"col-play\"\r\n              :class=\"{ large: largeAlbumArtwork }\"\r\n            >\r\n              <span class=\"placeholder\" />\r\n            </div>\r\n            <div class=\"flex-1 items-center justify-between xl:flex\">\r\n              <div class=\"flex-1 max-md:mb-1\">\r\n                <div class=\"title\">\r\n                  <span class=\"placeholder\" />\r\n                </div>\r\n                <div class=\"authors\">\r\n                  <span class=\"placeholder\" />\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"flex items-center\">\r\n                <div class=\"product-icon\">\r\n                  <span class=\"product-target\">\r\n                    <span class=\"placeholder\" />\r\n                  </span>\r\n                </div>\r\n                <div class=\"product-icon\">\r\n                  <span class=\"product-target\">\r\n                    <span class=\"placeholder\" />\r\n                  </span>\r\n                </div>\r\n                <div class=\"product-icon\">\r\n                  <span class=\"product-target\">\r\n                    <span class=\"placeholder\" />\r\n                  </span>\r\n                </div>\r\n                <div class=\"product-icon\">\r\n                  <span class=\"product-target\">\r\n                    <span class=\"placeholder\" />\r\n                  </span>\r\n                </div>\r\n                <div class=\"product-icon\">\r\n                  <span class=\"product-target\">\r\n                    <span class=\"placeholder\" />\r\n                  </span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"product-icon\">\r\n              <span class=\"placeholder\" />\r\n            </div>\r\n          </div>\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    v-else\r\n    class=\"song-list-table\"\r\n  >\r\n    <div>\r\n      <!-- <div\r\n        v-if=\"showChartData && showWeeklyTrends\"\r\n        class=\"table-header\"\r\n      >\r\n        <div class=\"flex w-full items-center gap-2\">\r\n          <div class=\"flex-1\"></div>\r\n          <div class=\"weeks-on-chart-label\">Weeks on chart</div>\r\n        </div>\r\n      </div> -->\r\n      <div\r\n        ref=\"wrapper\"\r\n        class=\"wrapper\"\r\n        :class=\"{ reorder: reorder, dragging: dragging }\"\r\n      >\r\n        <component\r\n          :is=\"componentIs\"\r\n          v-for=\"song of songs\"\r\n          :key=\"song.songNumber\"\r\n          class=\"song-item block\"\r\n          :data-menu-item=\"dataTitle ? dataTitle + ' - ' + song.title : ''\"\r\n          :class=\"classes\"\r\n          :to=\"\r\n            (!dontGoToSong && `/songs/${song.songNumber}/${song.slug}`) ||\r\n            undefined\r\n          \"\r\n          :data-songNumber=\"song.songNumber\"\r\n          :data-slug=\"song.slug\"\r\n          @click=\"\r\n            (e: Event) =>\r\n              !reorder && onClick(e, song.songNumber, song.slug, song.title)\r\n          \"\r\n        >\r\n          <div class=\"flex items-start gap-2 lg:items-center\">\r\n            <div\r\n              v-if=\"showRank && !reorder\"\r\n              class=\"col-rank\"\r\n            >\r\n              <div class=\"rank-position\">{{ song.rank }}</div>\r\n              <div\r\n                v-if=\"song.rankMovement && showWeeklyTrends\"\r\n                class=\"rank-movement\"\r\n                :class=\"{\r\n                  up: song.rankMovement > 0,\r\n                  down: song.rankMovement < 0,\r\n                }\"\r\n              >\r\n                <FAIcon\r\n                  v-if=\"song.rankMovement > 0\"\r\n                  class=\"fa-solid fa-caret-up\"\r\n                />\r\n                <FAIcon\r\n                  v-if=\"song.rankMovement < 0\"\r\n                  class=\"fa-solid fa-caret-down\"\r\n                />\r\n                {{ Math.abs(song.rankMovement) }}\r\n              </div>\r\n            </div>\r\n            <div\r\n              v-if=\"reorder\"\r\n              class=\"mr-2\"\r\n            >\r\n              <FAIcon class=\"fa-light fa-grip-dots px-1 pr-3 text-secondary\" />\r\n            </div>\r\n            <div\r\n              class=\"col-play mr-2\"\r\n              :class=\"{ large: largeAlbumArtwork }\"\r\n            >\r\n              <SongRowPreview\r\n                v-if=\"song.soundSample?.audioUrl && !reorder\"\r\n                :title=\"song.title\"\r\n                :preview-url=\"song.soundSample.audioUrl\"\r\n                :album-cover-url=\"song.soundSample.imageUrl\"\r\n                class=\"preview\"\r\n                :always-white=\"showAlbumArtwork\"\r\n                :with-album-cover=\"showAlbumArtwork || song.enableSongVersion\"\r\n              />\r\n              <Image\r\n                v-else-if=\"song.soundSample.imageUrl\"\r\n                :src=\"song.soundSample.imageUrl\"\r\n                :alt=\"song.title\"\r\n                class=\"album-artwork\"\r\n                :restrict-width=\"80\"\r\n              />\r\n              <div\r\n                v-else-if=\"showAlbumArtwork\"\r\n                class=\"album-artwork-placeholder\"\r\n              >\r\n                <FAIcon class=\"fa-solid fa-music\" />\r\n              </div>\r\n            </div>\r\n            <div class=\"flex-1 items-center justify-between gap-4 xl:flex\">\r\n              <div class=\"flex-1 items-center justify-between gap-2 xl:flex\">\r\n                <div class=\"flex-1 max-md:mb-1\">\r\n                  <div\r\n                    class=\"title\"\r\n                    :class=\"{\r\n                      'asian-text': hasAsianText(song.title),\r\n                    }\"\r\n                  >\r\n                    {{ song.title }}\r\n                    <span\r\n                      v-if=\"song.enableSongVersion\"\r\n                      class=\"based-on-recording-badge\"\r\n                      :title=\"$t('SV.LIT_BasedOnRecording')\"\r\n                    >\r\n                      <i\r\n                        class=\"based-on-recording-icon fa-light fa-microphone-stand text-primary\"\r\n                      />\r\n                    </span>\r\n                  </div>\r\n                  <div\r\n                    v-if=\"song.enableSongVersion\"\r\n                    class=\"authors\"\r\n                    :class=\"{\r\n                      'asian-text': hasAsianText(\r\n                        (song.album || '') +\r\n                          (song.artist || '') +\r\n                          song.authors.join(','),\r\n                      ),\r\n                    }\"\r\n                  >\r\n                    {{ song.album }} / {{ song.artist }} /\r\n                    {{ song.authors.join(\", \") }}\r\n                  </div>\r\n                  <div\r\n                    v-else\r\n                    class=\"authors\"\r\n                    :class=\"{\r\n                      'asian-text': hasAsianText(song.authors.join(',')),\r\n                    }\"\r\n                  >\r\n                    {{ song.authors.join(\", \") }}\r\n                  </div>\r\n                </div>\r\n                <ChartBadges\r\n                  v-if=\"showChartData && showWeeklyTrends && showBadges\"\r\n                  :badges=\"song.badges\"\r\n                  class=\"chart-badges\"\r\n                />\r\n              </div>\r\n\r\n              <!-- <div\r\n                v-if=\"song.weeksOnChart && showChartData && showWeeklyTrends\"\r\n                class=\"weeks-on-chart\"\r\n              >\r\n                {{ song.weeksOnChart }}\r\n              </div> -->\r\n              <div\r\n                v-if=\"!reorder\"\r\n                class=\"md:w-100 grid w-52 grid-cols-5\"\r\n              >\r\n                <div class=\"product-icon\">\r\n                  <router-link\r\n                    v-if=\"song.productExists.lyrics && !hideExtraIcons\"\r\n                    :to=\"`/songs/${song.songNumber}/${song.slug}/viewlyrics`\"\r\n                    class=\"product-target\"\r\n                  >\r\n                    <FAIcon\r\n                      class=\"fa-kit fa-ccli-lyrics\"\r\n                      :title=\"$t('SV.LIT_HasLyrics')\"\r\n                    />\r\n                  </router-link>\r\n                  <FAIcon\r\n                    v-else-if=\"song.productExists.lyrics && hideExtraIcons\"\r\n                    class=\"fa-kit fa-ccli-lyrics\"\r\n                    :title=\"$t('SV.LIT_HasLyrics')\"\r\n                  />\r\n                </div>\r\n                <div class=\"product-icon\">\r\n                  <router-link\r\n                    v-if=\"song.productExists.chords && !hideExtraIcons\"\r\n                    :to=\"`/songs/${song.songNumber}/${song.slug}/viewchordsheet`\"\r\n                    class=\"product-target\"\r\n                  >\r\n                    <FAIcon\r\n                      class=\"fa-kit fa-ccli-chord\"\r\n                      :title=\"$t('SV.LIT_HasChords')\"\r\n                    />\r\n                  </router-link>\r\n                  <FAIcon\r\n                    v-else-if=\"song.productExists.chords && hideExtraIcons\"\r\n                    class=\"fa-kit fa-ccli-chord\"\r\n                    :title=\"$t('SV.LIT_HasChords')\"\r\n                  />\r\n                </div>\r\n                <div class=\"product-icon\">\r\n                  <router-link\r\n                    v-if=\"song.productExists.lead && !hideExtraIcons\"\r\n                    :to=\"`/songs/${song.songNumber}/${song.slug}/viewleadsheet`\"\r\n                    class=\"product-target\"\r\n                  >\r\n                    <FAIcon\r\n                      class=\"fa-kit fa-ccli-lead\"\r\n                      :title=\"$t('SV.LIT_HasLeadSheet')\"\r\n                    />\r\n                  </router-link>\r\n                  <FAIcon\r\n                    v-else-if=\"song.productExists.lead && hideExtraIcons\"\r\n                    class=\"fa-kit fa-ccli-lead\"\r\n                    :title=\"$t('SV.LIT_HasLeadSheet')\"\r\n                  />\r\n                </div>\r\n                <div class=\"product-icon\">\r\n                  <router-link\r\n                    v-if=\"song.productExists.vocal && !hideExtraIcons\"\r\n                    :to=\"`/songs/${song.songNumber}/${song.slug}/viewvocalsheet`\"\r\n                    class=\"product-target\"\r\n                  >\r\n                    <FAIcon\r\n                      class=\"fa-kit fa-ccli-vocal\"\r\n                      :title=\"$t('SV.LIT_HasVocalSheet')\"\r\n                    />\r\n                  </router-link>\r\n                  <FAIcon\r\n                    v-else-if=\"song.productExists.vocal && hideExtraIcons\"\r\n                    class=\"fa-kit fa-ccli-vocal\"\r\n                    :title=\"$t('SV.LIT_HasVocalSheet')\"\r\n                  />\r\n                </div>\r\n                <div class=\"product-icon\">\r\n                  <a\r\n                    v-if=\"getMultitracksUrl(song.songNumber) && !hideExtraIcons\"\r\n                    :href=\"getMultitracksUrl(song.songNumber) || ''\"\r\n                    class=\"product-target\"\r\n                    target=\"_blank\"\r\n                    data-loopcommunity-link=\"Search Result\"\r\n                    :data-songnumber=\"song.songNumber\"\r\n                    @click.stop.prevent=\"goToMultitracksLink(song.songNumber)\"\r\n                  >\r\n                    <FAIcon\r\n                      class=\"fa-kit fa-loop-logo text-loop-green\"\r\n                      :title=\"$t('SV.LIT_HasMultitracks')\"\r\n                    />\r\n                  </a>\r\n                  <FAIcon\r\n                    v-else-if=\"\r\n                      getMultitracksUrl(song.songNumber) && hideExtraIcons\r\n                    \"\r\n                    class=\"fa-kit fa-loop-logo text-loop-green\"\r\n                    :title=\"$t('SV.LIT_HasMultitracks')\"\r\n                  />\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div\r\n              v-if=\"!reorder && !hideExtraIcons\"\r\n              class=\"product-icon\"\r\n            >\r\n              <AddToFavorites\r\n                class=\"mr-0\"\r\n                :title=\"song.title\"\r\n                :song-number=\"song.songNumber\"\r\n                @click.stop.prevent\r\n              />\r\n            </div>\r\n          </div>\r\n        </component>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.song-list-table {\r\n  @apply w-full;\r\n}\r\n:deep() {\r\n  .product-target,\r\n  button.favorite {\r\n    @apply px-2 py-1;\r\n    &:hover {\r\n      @apply rounded bg-light-100;\r\n    }\r\n  }\r\n}\r\n\r\n.product-target .placeholder {\r\n  @apply mx-1;\r\n}\r\n\r\n.table {\r\n  .col-play,\r\n  .product-icon {\r\n    @apply w-0;\r\n  }\r\n}\r\n\r\n.product-icon {\r\n  @apply text-lg text-primary;\r\n}\r\n.title {\r\n  @apply mb-1 line-clamp-1 text-left text-lg leading-5;\r\n  &:not(.asian-text) {\r\n    padding-bottom: 0.14em;\r\n  }\r\n}\r\n.table {\r\n  @apply w-full;\r\n}\r\n.authors {\r\n  @apply line-clamp-1 text-left text-sm leading-4 text-gray-600;\r\n  &:not(.asian-text) {\r\n    padding-bottom: 0.14em;\r\n  }\r\n}\r\n.wrapper:not(.reorder) .song-item {\r\n  @apply transition-all;\r\n}\r\n\r\n.song-item {\r\n  @apply w-full bg-base-100 px-5 py-4;\r\n  :deep() {\r\n    .favorite:not(.favorite-active) {\r\n      @apply text-light-900;\r\n    }\r\n  }\r\n}\r\n\r\n.song-item-add-to-list {\r\n  @apply px-0 md:px-5;\r\n}\r\n.wrapper:not(.dragging) .song-item {\r\n  &:hover,\r\n  &:focus-visible {\r\n    @apply bg-black/5;\r\n\r\n    :deep() {\r\n      .favorite:not(.favorite-active) {\r\n        @apply text-gray-100;\r\n      }\r\n      .authors {\r\n        @apply text-gray-700;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.col-rank {\r\n  @apply w-[50px] shrink-0 text-center xl:w-[100px];\r\n}\r\n.rank-position {\r\n  @apply font-display text-2xl font-extrabold xl:text-6xl;\r\n}\r\n.rank-movement {\r\n  @apply font-display font-bold xl:text-lg;\r\n  &.up {\r\n    @apply text-ccli-green;\r\n  }\r\n  &.down {\r\n    @apply text-ccli-red;\r\n  }\r\n}\r\n\r\n.col-rank .placeholder {\r\n  width: 75px;\r\n}\r\n\r\n.col-play .placeholder {\r\n  @apply block h-12 w-12 rounded-lg text-2xl;\r\n}\r\n.col-play.large .placeholder {\r\n  @apply h-16 w-16 lg:h-20 lg:w-20;\r\n}\r\n.title .placeholder {\r\n  width: 200px;\r\n}\r\n.authors .placeholder {\r\n  width: 300px;\r\n}\r\n.product-icon .placeholder {\r\n  @apply text-xl;\r\n  width: 1em;\r\n}\r\n.col-play {\r\n  @apply relative flex h-12 w-12 items-center justify-center max-md:hidden;\r\n  .album-artwork-placeholder {\r\n    @apply flex h-full w-full items-center justify-center rounded-lg bg-base-300;\r\n  }\r\n  &.large {\r\n    @apply h-16 w-16 lg:h-20 lg:w-20;\r\n    &:deep(button.with-album-cover) {\r\n      @apply h-full w-full;\r\n    }\r\n    &:deep(.album-artwork-wrapper) {\r\n      @apply h-full w-full;\r\n    }\r\n  }\r\n}\r\n\r\n.wrapper:deep() {\r\n  .sortable-drag {\r\n    opacity: 0;\r\n  }\r\n  .sortable-chosen {\r\n    @apply bg-primary text-white;\r\n    .authors {\r\n      @apply text-white;\r\n    }\r\n    i,\r\n    svg {\r\n      @apply text-white;\r\n    }\r\n  }\r\n}\r\n\r\n.weeks-on-chart {\r\n  @apply w-32 shrink-0 text-center text-lg font-bold max-xl:hidden;\r\n}\r\n.table-header {\r\n  @apply px-5 max-xl:hidden;\r\n}\r\n.weeks-on-chart-label {\r\n  @apply mr-[246px] w-32 text-center;\r\n}\r\n.chart-badges {\r\n  @apply my-1;\r\n}\r\n.based-on-recording-badge {\r\n  @apply ml-1 inline-flex aspect-square items-center justify-center rounded bg-light-300 px-2 py-1;\r\n  img {\r\n    @apply h-4 w-auto;\r\n  }\r\n}\r\n.dark .based-on-recording-badge {\r\n  @apply bg-gray-900;\r\n}\r\n/* .chart-badges-desktop.song-badges {\r\n    @apply max-lg:hidden;\r\n  } */\r\n</style>\r\n"],"file":"assets/SongListTable-CRDj9F2Q.js"}