@font-face {
    font-family: "icomoon";
    src: url("https://raw.githubusercontent.com/abxlfazl/music-player-widget/main/src/assets/icomoon/fonts/icomoon.eot?u8ckod");
    src: url("https://raw.githubusercontent.com/abxlfazl/music-player-widget/main/src/assets/icomoon/fonts/icomoon.eot?u8ckod#iefix")
    format("embedded-opentype"),
    url("https://raw.githubusercontent.com/abxlfazl/music-player-widget/main/src/assets/icomoon/fonts/icomoon.ttf?u8ckod")
    format("truetype"),
    url("https://raw.githubusercontent.com/abxlfazl/music-player-widget/main/src/assets/icomoon/fonts/icomoon.woff?u8ckod")
    format("woff"),
    url("https://raw.githubusercontent.com/abxlfazl/music-player-widget/main/src/assets/icomoon/fonts/icomoon.svg?u8ckod#icomoon")
    format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

#root-media-player [class^="icon-"],
#root-media-player [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#root-media-player .icon-back:before {
    content: "\e900";
    /*color: #827d7b;*/
    color: #bcbcbc;
}
#root-media-player .icon-next:before {
    content: "\e901";
    /*color: #827d7b;*/
    color: #bcbcbc;
}
#root-media-player .icon-pause:before {
    content: "\e902";
    color: #fff;
}
#root-media-player .icon-play:before {
    content: "\e903";
    color: #fff;
}
#root-media-player .icon-playlist:before {
    content: "\e904";
    color: #fff;
}

/*@font-face {
    font-family: Avenir;
    src: url(https://raw.githubusercontent.com/abxlfazl/music-player-widget/main/src/assets/font/AvenirNextRoundedProMedium.TTF);
}*/

html {

    --duration: 1s;
    --ease-slider: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-timeline: cubic-bezier(0.71, 0.21, 0.3, 0.95);
}

/* PUBLIC CLASSES */

#root-media-player .img {
    width: 100%;
    flex-shrink: 0;
    display: block;
    object-fit: cover;
}
#root-media-player .list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#root-media-player .text_trsf-cap {
    text-transform: capitalize;
}
#root-media-player .button {
    all: unset;
    cursor: pointer;
}
#root-media-player .center {
    display: flex;
    align-items: center;
    justify-content: center;
}
#root-media-player .flex-row {
    display: flex;
}
#root-media-player .flex-column {
    display: flex;
    flex-direction: column;
}
#root-media-player ._align_center {
    align-items: center;
}
#root-media-player ._align_start {
    align-items: flex-start;
}
#root-media-player ._align_end {
    align-items: flex-end;
}
#root-media-player ._justify_center {
    justify-content: center;
}
#root-media-player ._justify_start {
    justify-content: flex-start;
}
#root-media-player ._justify_end {
    justify-content: flex-end;
}
#root-media-player ._justify_space-btwn {
    justify-content: space-between;
}
#root-media-player .text_overflow {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    text-overflow: ellipsis;
    font-weight: 600;
}
#root-media-player .loading {
    gap: 0 0.5rem;
    font-size: 5rem;
    font-weight: bold;
}

/* PUBLIC CLASSES */

#root-media-player .music-player {
    --color-white: #fff;
    --color-gray: #e5e7ea;
    --color-blue: #78adfe;
    --color-blue-dark: #5781bd;

    --box-shadow: 0 2px 6px 1px #0000001f;

    --color-text-1: #000;
    --color-text-2: #0000006b;

    --cover-size: 3.8125em;
    --border-radius: 1.625em;

    --music-player-height: 24.375em;
    --offset-cover: 1.60125em;

    width: 20.9375em;
    overflow: hidden;
    user-select: none;
    color: var(--color-text-1);
    height: var(--music-player-height);
    border-radius: var(--border-radius);
    background-color: var(--color-white);
}
#root-media-player .slider {
    --shadow-opacity: 1;

    z-index: 0;
    flex-shrink: 0;
    height: 7.125em;
    position: relative;
    border-radius: inherit;
    transition: var(--duration) height var(--ease-timeline);
}
#root-media-player .slider.resize {
    --shadow-opacity: 0;

    height: var(--music-player-height);
}
#root-media-player .slider::after {
    top: 0;
    left: 0;
    right: 0;
    content: "";
    width: 100%;
    z-index: -1;
    height: 100%;
    position: absolute;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: var(--box-shadow);
    opacity: var(--shadow-opacity);
    transition: var(--duration) opacity;
}
#root-media-player .slider__content {
    top: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    border-radius: inherit;
    width: var(--cover-size);
    height: var(--cover-size);
    transition: transform, width, height;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease-timeline);
    transform: translate3d(var(--offset-cover), var(--offset-cover), 0);
}
#root-media-player .slider.resize .slider__content {
    width: 100%;
    height: 17.8125em;
    transform: translate3d(0, 0, 0);
}
#root-media-player .slider__content .button {
    --size: 3em;

    z-index: 1;
    position: absolute;
    width: var(--size);
    height: var(--size);
}
#root-media-player .slider__content i {
    position: absolute;
    pointer-events: none;
    font-size: var(--size);
}
#root-media-player .music-player__playlist-button {
    top: 5.5%;
    left: 5.5%;
    transform: scale(0);
    transition: calc(var(--duration) / 2) transform;
}
#root-media-player .slider.resize .music-player__playlist-button {
    transform: scale(1);
    transition: 0.35s var(--duration) transform cubic-bezier(0, 0.85, 0.11, 1.64);
}
#root-media-player .music-player__broadcast-guarantor .icon-pause,
#root-media-player .music-player__broadcast-guarantor.click .icon-play {
    opacity: 0;
}
#root-media-player .music-player__broadcast-guarantor.click .icon-pause {
    opacity: 1;
}
#root-media-player .slider__imgs {
    width: 100%;
    height: 100%;
    filter: brightness(75%);
    transform: translate3d(calc(var(--index) * 100%), 0, 0);
    transition: var(--duration) transform var(--ease-slider);
}
#root-media-player .slider__imgs > img {
    pointer-events: none;
}
#root-media-player .slider__controls {
    --controls-y: 145%;
    --controls-x: 17.3%;
    --controls-width: 68.4%;
    --controls-resize-width: 88%;
    /* Animation performance is better than transition */

    gap: 0.375em 0;
    flex-wrap: wrap;
    position: absolute;
    align-items: center;
    padding-top: 0.375em;
    width: var(--controls-width);
    transform: translate3d(var(--controls-x), 0, 0);
    animation: var(--controls-animate, "down paused") var(--duration)
    var(--ease-timeline) forwards;
}
@keyframes down {
    100% {
        width: var(--controls-resize-width);
        transform: translate3d(0, var(--controls-y), 0);
    }
}
@keyframes up {
    0% {
        width: var(--controls-resize-width);
        transform: translate3d(0, var(--controls-y), 0);
    }
    100% {
        width: var(--controls-width);
        transform: translate3d(var(--controls-x), 0, 0);
    }
}
#root-media-player .slider__switch-button {
    font-size: 3em;
    height: max-content;
}
#root-media-player .music-player__info {
    width: 56.3%;
    cursor: pointer;
    line-height: 1.8;
    overflow: hidden;
    font-weight: 500;
    padding: 0 0.0625em;
    white-space: nowrap;
}
#root-media-player .music-player__info > * {
    margin: 0 auto;
    pointer-events: none;
}
#root-media-player .music-player__singer-name {
    font-size: 1.25em;
    width: max-content;
}
#root-media-player .music-player__subtitle {
    font-size: 0.85em;
    /*font-weight: bold;*/
    /*color: var(--color-text-2);*/
    color: #bcbcbc;
    font-weight: 500;
}
#root-media-player .slider__controls .music-player__subtitle {
    width: max-content;
}
#root-media-player .music-player__singer-name.animate,
#root-media-player .music-player__subtitle.animate {
    --subtitle-gap: 1.5625em;
    display: flex;
    gap: 0 var(--subtitle-gap);
    animation: subtitle 12s 1.2s linear infinite;
}
@keyframes subtitle {
    80%,
    100% {
        transform: translate3d(calc((100% + var(--subtitle-gap)) / -2), 0, 0);
    }
}
#root-media-player .progress {
    /*width: 90%;*/
    width: 75%;
    height: 1.25em;
    cursor: pointer;
    transition: var(--duration) width var(--ease-timeline);
}
#root-media-player .slider.resize .progress {
    width: 100%;
}
#root-media-player .progress__wrapper {
    width: 100%;
    height: 0.5125em;
    position: relative;
    border-radius: 1em;
    background-color: var(--color-gray);
}
#root-media-player .progress__bar {
    top: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    width: var(--width);
    border-radius: inherit;
    background-color: var(--color-blue);
}
#root-media-player .progress__bar::after {
    --size: 0.7375em;
    left: 97%;
    content: "";
    position: absolute;
    width: var(--size);
    height: var(--size);
    border-radius: 100%;
    background-color: var(--color-blue-dark);
}
#root-media-player .music-player__playlist {
    height: 100%;
    overflow: hidden auto;
    padding: 1.28125em 1.09375em 0 var(--offset-cover);
}
#root-media-player .music-player__song {
    --gap: 0.75em;

    cursor: pointer;
    margin-bottom: var(--gap);
    padding-bottom: var(--gap);
    border-bottom: 1.938px solid #d8d8d859;
}
#root-media-player .music-player__song .music-player__singer-name{
    font-size: inherit;
    display: inline-block;
    animation: subtitle 12s 0.2s linear infinite;
}
#root-media-player .music-player__song audio {
    display: none;
}
#root-media-player .music-player__song-img {
    width: var(--cover-size);
    height: var(--cover-size);
    border-radius: var(--border-radius);
}
#root-media-player .music-player__playlist-info {
    width: 100%;
    overflow: hidden;
    line-height: 1.3;
    font-size: 1.06875em;
    margin-left: 0.7875em;
}
#root-media-player .music-player__song-duration {
    font-weight: bold;
    font-size: 0.7875em;
    /*color: var(--color-text-2);*/
    color: #bcbcbc;
}

/*Add css*/
#root-media-player {
    position: fixed;
    bottom: 20px;   /* cách mép dưới 20px */
    right: 20px;    /* cách mép phải 20px */
    z-index: 9999;  /* nổi lên trên các thành phần khác */
    /* Thêm style cho box nếu muốn: */
    /* width/height tuỳ bạn */
}
#root-media-player .progress{
    background: none;
}
#root-media-player .music-player{
    background: rgb(0 0 0 / 50%);
}
#root-media-player .slider{
    background: rgb(0 0 0 / 49%);
}
#root-media-player .icon-back,
#root-media-player .icon-next{
    color: #bcbcbc;
}
#root-media-player .music-player__info,
#root-media-player .music-player__playlist-info{
    color: #fff;
}
#root-media-player {
    overflow: auto; /* Có scroll khi cần */
    scrollbar-width: thin; /* Firefox: thu nhỏ */
    scrollbar-color: #bcbcbc transparent; /* Firefox: màu thanh cuộn */
}

/* Chrome, Edge, Safari */
#root-media-player .music-player__playlist::-webkit-scrollbar {
    width: 1px;
    /*height: 3px;*/
}
#root-media-player .music-player__playlist::-webkit-scrollbar-thumb {
    background: #bcbcbc;
    border-radius: 3px;
}
#root-media-player .music-player__playlist::-webkit-scrollbar-track {
    background: transparent;
}
#root-media-player button:focus{
    outline: none;
}
#root-media-player .music-player__info .music-player__subtitle{
    display: none;
}
#root-media-player .playlist-btn{
    font-size: 25px;
    margin-left: 5px;
}
#root-media-player.hide-player .music-player{
    height: fit-content;
}
#root-media-player.hide-player .music-player__playlist{
    display: none;
}
#root-media-player .music-is-playing .play_list_title_item{
    --subtitle-gap: 1.5625em;
    width: max-content;
    font-size: inherit;
    display: inline-block;
    animation: subtitle 12s 0.2s linear infinite;
}

@media screen and (min-width: 1366px) {
    #root-media-player .music-player {
        /*font-size: 1.17132vw;*/
        font-size: 14px;
    }
}
@media screen and (max-width: 768px) {
    #root-media-player {
        bottom: 10px;
        right: 10px;
    }
    /*Thu nhỏ media*/
    #root-media-player .slider__controls{
        gap: 0;
        padding-top: 0;
        width: 85%;
        transform: translate3d(12%, 0, 0);
    }
    #root-media-player .slider__switch-button{
        font-size: 2em;
    }
    #root-media-player .music-player{
        width: 16.9375em;
        border-radius: 1em;
        height: 17em;
    }
    #root-media-player .music-player__singer-name{
        font-size: 1em;
    }
    #root-media-player .progress{
        width: 65%;
    }
    #root-media-player .slider{
        height: 4.125em;
    }
    #root-media-player .slider__content{
        transform: translate3d(0.4em, 0.4em, 0);
        width: 3.3em;
        height: 3.3em;
    }
    #root-media-player .music-player__playlist{
        padding: 10px;
    }
    #root-media-player .music-player__song-img{
        width: 3.3em;
        height: 3.3em;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }
    /*End Thu nhỏ media*/
}
@media screen and (max-width: 480px) {
    #root-media-player .music-player {
        font-size: 0.8rem;
    }
    /*Thu nhỏ media*/
    /*#root-media-player {
        bottom: 5px;
        right: 5px;
    }*/
    /*End Thu nhỏ media*/
}
@media screen and (max-width: 280px) {
    #root-media-player .music-player {
        font-size: 0.6rem;
    }
}