/*
==========================================================

PremiumZone

Version :
1.0.0

File :
assets/css/playlist-detail.css

Description :
PremiumZone Playlist Detail

==========================================================
*/

/* ==========================================================
   ROOT
========================================================== */

.pz-playlist-detail{

    display:flex;

    flex-direction:column;

    gap:16px;

}

/* ==========================================================
   COVER
========================================================== */

.pz-playlist-detail-cover{

    width:120px;

    height:120px;

    border:1px solid rgba(

        0,

        243,

        255,

        .35

    );

    background:#050505;

}

/* ==========================================================
   TITLE
========================================================== */

.pz-playlist-detail-title{

    color:#EFFFFF;

    font-size:22px;

    font-weight:700;

    letter-spacing:1px;

}

/* ==========================================================
   DESCRIPTION
========================================================== */

.pz-playlist-detail-description{

    color:#9FC3C3;

    line-height:1.6;

    font-size:13px;

}

/* ==========================================================
   TRACK LIST
========================================================== */

.pz-playlist-track-list{

    display:flex;

    flex-direction:column;

    gap:10px;

}

/* ==========================================================
   TRACK
========================================================== */

.pz-playlist-track{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px;

    border:1px solid rgba(

        0,

        243,

        255,

        .20

    );

    background:rgba(

        255,

        255,

        255,

        .02

    );

    cursor:pointer;

    transition:.2s;

}

/* ==========================================================
   HOVER
========================================================== */

.pz-playlist-track:hover{

    border-color:#00F3FF;

    box-shadow:

        0 0 10px

        rgba(

            0,

            243,

            255,

            .28

        );

}

/* ==========================================================
   NUMBER
========================================================== */

.pz-track-number{

    width:36px;

    text-align:center;

    color:#00F3FF;

    font-weight:700;

}

/* ==========================================================
   CONTENT
========================================================== */

.pz-track-content{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:4px;

}

/* ==========================================================
   TITLE
========================================================== */

.pz-track-title{

    color:#F2FFFF;

    font-size:14px;

    font-weight:600;

}

/* ==========================================================
   ARTIST
========================================================== */

.pz-track-artist{

    color:#82A6A6;

    font-size:12px;

}

/* ==========================================================
   DURATION
========================================================== */

.pz-track-duration{

    color:#00F3FF;

    font-size:12px;

    min-width:54px;

    text-align:right;

}

/* ==========================================================
   MOBILE
========================================================== */

@media(

max-width:768px

){

.pz-playlist-detail-cover{

    width:90px;

    height:90px;

}

.pz-playlist-detail-title{

    font-size:18px;

}

.pz-track-number{

    width:28px;

}

.pz-track-title{

    font-size:13px;

}

}