@import url("../app/control-app.css");

#onplix-recommended .t{
  font-family:'Roboto', sans-serif;
  font-size:14px;
  font-weight:500;
  color:#ffffff;
  line-height:1.4;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#onplix-recommended .m{
  font-family:'Roboto', sans-serif;
  font-size:12px;
  font-weight:400;
  color:#9ca3af;
  margin-top:4px;
}

.onplix-right .onplix-item.is-playing,
#onplix-recommended .onplix-item.is-playing{
  transform:translateX(10px);
}

#onplix-recommended .onplix-item.is-playing .t,
#onplix-recommended .onplix-item.is-playing .duration{
  color:#a855f7;
  font-weight:600;
}

.onplix-right .onplix-item.is-playing:hover,
#onplix-recommended .onplix-item.is-playing:hover{
  transform:translateX(10px);
}

@media (max-width:768px){
  body.mobile-view-library .onplix-created-playlists{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile){
    width:100% !important;
    height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }

  body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) .control-wrapper,
  body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) .onplix-scale,
  body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) .onplix-app,
  body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) .onplix-shell{
    height:100dvh !important;
    max-height:100dvh !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) .onplix-video,
  body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) .onplix-right,
  body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) .onplix-created-playlists,
  body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) .onplix-profile-screen,
  body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) .onplix-player{
    display:none !important;
  }

  body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) .onplix-left{
    display:block !important;
    height:calc(100dvh - 60px - 75px) !important;
    max-height:calc(100dvh - 60px - 75px) !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  body:not(.mobile-view-player):not(.mobile-view-library):not(.mobile-view-profile) #onplix-results{
    height:100% !important;
    max-height:100% !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
  }

  body.mobile-view-results .onplix-header,
  body.mobile-view-library .onplix-header,
  body.mobile-view-profile .onplix-header{
    height:60px !important;
    min-height:60px !important;
    max-height:60px !important;
    padding:0 10px !important;
  }

  body.mobile-view-results .onplix-shell,
  body.mobile-view-library .onplix-shell,
  body.mobile-view-profile .onplix-shell{
    padding-top:60px !important;
  }

  body.mobile-view-results .onplix-logo-img,
  body.mobile-view-library .onplix-logo-img,
  body.mobile-view-profile .onplix-logo-img{
    height:44px !important;
    max-height:44px !important;
  }

  body.mobile-view-results #onplix-mobile-search,
  body.mobile-view-library #onplix-mobile-search{
    width:38px !important;
    height:38px !important;
  }

  body.mobile-view-profile #onplix-mobile-search{
    display:none !important;
  }

  body.mobile-view-results,
  body.mobile-view-library,
  body.mobile-view-profile{
    height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }

  body.mobile-view-results .control-wrapper,
  body.mobile-view-results .onplix-scale,
  body.mobile-view-results .onplix-app,
  body.mobile-view-results .onplix-shell,
  body.mobile-view-library .control-wrapper,
  body.mobile-view-library .onplix-scale,
  body.mobile-view-library .onplix-app,
  body.mobile-view-library .onplix-shell,
  body.mobile-view-profile .control-wrapper,
  body.mobile-view-profile .onplix-scale,
  body.mobile-view-profile .onplix-app,
  body.mobile-view-profile .onplix-shell{
    height:100dvh !important;
    max-height:100dvh !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  body.mobile-view-results .onplix-left,
  body.mobile-view-library .onplix-created-playlists,
  body.mobile-view-profile .onplix-profile-screen{
    height:calc(100dvh - 60px - 75px) !important;
    max-height:calc(100dvh - 60px - 75px) !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
  }

  body.mobile-view-results #onplix-results{
    height:100% !important;
    max-height:100% !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
  }

  body.mobile-view-results #onplix-results{
    padding-bottom:20px !important;
  }

  body.onplix-has-song.mobile-view-results #onplix-results{
    padding-bottom:76px !important;
  }

  body.mobile-view-library .onplix-created-playlists{
    padding-bottom:20px !important;
  }

  body.onplix-has-song.mobile-view-library .onplix-created-playlists{
    padding-bottom:76px !important;
  }

  body.mobile-view-profile .onplix-profile-screen{
    padding:14px 12px 20px !important;
  }

  body.onplix-has-song.mobile-view-profile .onplix-profile-screen{
    padding-bottom:76px !important;
  }

  body.mobile-view-results,
  body.mobile-view-results .onplix-left,
  body.mobile-view-results #onplix-results{
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }

  body.mobile-view-results::-webkit-scrollbar,
  body.mobile-view-results .onplix-left::-webkit-scrollbar,
  body.mobile-view-results #onplix-results::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    display:none !important;
  }

  body.mobile-view-library #onplix-playlists,
  body.mobile-view-library #onplix-smart-playlists,
  body.mobile-view-library #onplix-artists{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow:row !important;
    gap:12px !important;
    width:100% !important;
    margin:0 auto !important;
    padding:16px 8px 24px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    scroll-snap-type:none !important;
    justify-items:stretch !important;
    align-items:start !important;
  }

  body.mobile-view-library #onplix-playlists{
    grid-auto-flow:column !important;
    grid-template-rows:repeat(3, auto) !important;
    grid-template-columns:none !important;
    grid-auto-columns:calc((100% - 24px) / 3) !important;
    gap:12px !important;
    padding:16px 0 24px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
  }

  body.mobile-view-library #onplix-playlists .onplix-pl-card{
    scroll-snap-align:start !important;
  }

  body.mobile-view-library .onplix-pl-card,
  body.mobile-view-library #onplix-smart-playlists .onplix-library-placeholder,
  body.mobile-view-library #onplix-artists .onplix-library-placeholder{
    width:100% !important;
    min-width:0 !important;
    align-items:center !important;
  }

  body.mobile-view-library .onplix-pl-cover,
  body.mobile-view-library #onplix-smart-playlists .onplix-library-cover,
  body.mobile-view-library #onplix-artists .onplix-library-cover{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    aspect-ratio:1 / 1 !important;
  }

  body.mobile-view-library .onplix-pl-name,
  body.mobile-view-library .onplix-pl-count,
  body.mobile-view-library #onplix-smart-playlists .onplix-library-name,
  body.mobile-view-library #onplix-artists .onplix-library-name{
    width:100% !important;
    text-align:center !important;
  }

  body.mobile-view-library .onplix-pl-name{
    font-size:12.5px !important;
    font-weight:600 !important;
    line-height:1.16 !important;
  }

  body.mobile-view-library .onplix-pl-count{
    margin-top:3px !important;
    font-size:11px !important;
    line-height:1.12 !important;
  }

  body.mobile-view-library #onplix-artists{
    grid-auto-flow:column !important;
    grid-template-rows:repeat(3, auto) !important;
    grid-template-columns:none !important;
    grid-auto-columns:calc((100% - 24px) / 3) !important;
    gap:12px !important;
    padding:16px 0 24px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
    justify-items:stretch !important;
    align-items:start !important;
    -webkit-overflow-scrolling:touch !important;
  }

  body.mobile-view-library #onplix-artists .onplix-artist-card{
    width:100% !important;
    min-width:0 !important;
    align-items:center !important;
    justify-content:flex-start !important;
    scroll-snap-align:start !important;
  }

  body.mobile-view-library #onplix-artists .onplix-artist-card .onplix-pl-cover{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    border-radius:999px !important;
  }

  body.mobile-view-player .onplix-right{
    padding:8px 8px 8px 12px !important;
  }

  body.mobile-view-player .onplix-right-top{
    padding-left:0 !important;
  }

  body.mobile-view-player .onplix-right .onplix-item,
  body.mobile-view-player #onplix-recommended .onplix-item{
    transform:none !important;
    padding-left:2px !important;
    padding-right:8px !important;
  }

  body.mobile-view-player .onplix-right .onplix-item:hover,
  body.mobile-view-player #onplix-recommended .onplix-item:hover{
    transform:none !important;
  }

  body.mobile-view-player .onplix-right .onplix-item > div:first-of-type,
  body.mobile-view-player #onplix-recommended .onplix-item > div:first-of-type{
    padding-left:6px !important;
  }

  body.mobile-view-player .onplix-right .actions,
  body.mobile-view-player #onplix-recommended .actions{
    transform:none !important;
    grid-template-columns:32px 32px !important;
    column-gap:10px !important;
    justify-content:end !important;
    margin-left:10px !important;
  }

  body.mobile-view-player #onplix-queue,
  body.mobile-view-player #onplix-recommended{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  body.mobile-view-player #onplix-queue .onplix-item.is-playing{
    transform:translateX(4px) !important;
  }

  body.mobile-view-player #onplix-queue .onplix-item.is-playing:hover{
    transform:translateX(4px) !important;
  }

  body.mobile-view-player .onplix-right .duration,
  body.mobile-view-player #onplix-recommended .duration{
    display:none !important;
  }

  body.mobile-view-player .onplix-right .onplix-item,
  body.mobile-view-player #onplix-recommended .onplix-item{
    grid-template-columns:60px minmax(0, 1fr) auto !important;
  }

  body.mobile-view-player .onplix-right .t,
  body.mobile-view-player #onplix-recommended .t{
    white-space:nowrap !important;
    display:block !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    line-height:1.25 !important;
  }

  body.mobile-view-player .onplix-right .m,
  body.mobile-view-player #onplix-recommended .m{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body.mobile-view-results #onplix-results .onplix-results-loading{
    position:fixed !important;
    top:60px !important;
    right:0 !important;
    bottom:75px !important;
    left:0 !important;
    z-index:20 !important;
    min-height:0 !important;
    pointer-events:none !important;
  }

  #onplix-results.is-loading .onplix-results-loading{
    position:fixed !important;
    top:60px !important;
    right:0 !important;
    bottom:75px !important;
    left:0 !important;
    z-index:20 !important;
    min-height:0 !important;
    pointer-events:none !important;
  }

  body.onplix-pull-refresh-active.mobile-view-results #onplix-results .onplix-item{
    filter:blur(1.1px) !important;
    opacity:.72 !important;
    transform:translateY(var(--onplix-pull-offset, 0px)) !important;
  }
}