/* ============================================================
   MUSIC DESIGN VARIABLES

   These are the main values to micro-adjust.
============================================================ */

:root {

    --music-icon-size: clamp(32px, 2vw, 64px);

    --music-volume-width: clamp(100px, 10vw, 190px);
    --music-control-height: clamp(32px, 2vw, 64px);

    --music-panel-width:
        calc(
            var(--music-icon-size)
            + var(--music-gap)
            + var(--music-volume-width)
        );

    --music-song-box-height: clamp(32px, 2vw, 60px);
    --music-dropdown-gap: 0px;
    --music-gap: 0px;

    --volume-padding-inline: 18px;

    --volume-track-height: 6px;
    --volume-thumb-size: 18px;

    --volume-fill-color: #a95d27;
    --volume-track-color: #f2d5a0;

    --volume-thumb-color: #fff1d1;
    --volume-thumb-border-color: #7d431f;

    --music-text-color: #442713;
    --music-font-size: clamp(0.7rem, 1vw, 0.95rem);

    --music-hover-scale: 1.05;
    --music-hover-brightness: 1.1;

}

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

.music-ui {

    width: var(--music-panel-width);

    display: flex;
    flex-direction: column;

    gap: var(--music-gap);

    font-family:
        "Playpen Sans Deva",
        cursive;

    color: var(--music-text-color);

}

/* ============================================================
   SHARED BUTTON RESET
============================================================ */

.music-speaker,
.now-playing,
.song-dropdown-item {

    appearance: none;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    font: inherit;
    color: inherit;

    cursor: pointer;

    -webkit-tap-highlight-color:
        transparent;

}

/* ============================================================
   TOP ROW
============================================================ */

.music-top {

    display: flex;

    align-items: center;

    gap: var(--music-gap);

}

/* ============================================================
   SPEAKER
============================================================ */

.music-speaker {

    width: var(--music-icon-size);
    height: var(--music-icon-size);

    flex: 0 0 auto;

    transition:
        transform var(--transition-fast) var(--ease),
        filter var(--transition-fast) var(--ease);

}

@media (hover: hover) {
    .music-speaker:hover {
        transform: scale(var(--music-hover-scale));
        filter: brightness(var(--music-hover-brightness));
    }

    .music-slider:hover::-webkit-slider-thumb {
        transform: scale(1.08);
    }

    .now-playing:hover {
        transform: scale(1.025);
        filter: brightness(var(--music-hover-brightness));
    }

    .song-dropdown-item:hover {
        transform: scale(1.025);
        filter: brightness(var(--music-hover-brightness));
    }
}

.music-speaker:focus-visible {

    outline: 3px solid currentColor;
    outline-offset: 3px;

    border-radius: 18px;

}

.music-speaker-icon {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;

    user-select: none;

}

/* ============================================================
   VOLUME BOX
============================================================ */

.music-volume {

    position: relative;

    width: var(--music-volume-width);
    height: var(--music-control-height);

    flex: 0 0 auto;

}

.music-volume-bg {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: fill;

    pointer-events: none;

    user-select: none;

}

.music-volume-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    padding-inline:
        var(--volume-padding-inline);

}

/* ============================================================
   VOLUME SLIDER
============================================================ */

.music-slider {

    --volume-progress: 0%;

    appearance: none;

    width: 100%;
    height: var(--volume-thumb-size);

    margin: 0;

    background: transparent;

    cursor: pointer;

}

/* Chrome / Edge / Safari track */

.music-slider::-webkit-slider-runnable-track {

    height: var(--volume-track-height);

    border-radius: 999px;

    background:
        linear-gradient(
            to right,

            var(--volume-fill-color)
                0
                var(--volume-progress),

            var(--volume-track-color)
                var(--volume-progress)
                100%
        );

}

/* Chrome / Edge / Safari thumb */

.music-slider::-webkit-slider-thumb {

    appearance: none;

    width: var(--volume-thumb-size);
    height: var(--volume-thumb-size);

    margin-top:
        calc(
            (
                var(--volume-track-height)
                - var(--volume-thumb-size)
            )
            / 2
        );

    border:
        2px solid
        var(--volume-thumb-border-color);

    border-radius: 50%;

    background:
        var(--volume-thumb-color);

    box-shadow:
        0 2px 5px rgb(0 0 0 / 0.25);

    transition:
        transform var(--transition-fast)
        var(--ease);

}

/* Firefox track */

.music-slider::-moz-range-track {

    height: var(--volume-track-height);

    border-radius: 999px;

    background:
        var(--volume-track-color);

}

/* Firefox filled section */

.music-slider::-moz-range-progress {

    height: var(--volume-track-height);

    border-radius: 999px;

    background:
        var(--volume-fill-color);

}

/* Firefox thumb */

.music-slider::-moz-range-thumb {

    width: var(--volume-thumb-size);
    height: var(--volume-thumb-size);

    border:
        2px solid
        var(--volume-thumb-border-color);

    border-radius: 50%;

    background:
        var(--volume-thumb-color);

    box-shadow:
        0 2px 5px rgb(0 0 0 / 0.25);

}

.music-slider:focus-visible {

    outline: 3px solid currentColor;
    outline-offset: 5px;

    border-radius: 999px;

}

/* ============================================================
   NOW PLAYING
============================================================ */

.now-playing {

    position: relative;

    width: 100%;
    height: var(--music-song-box-height);

    transition:
        transform var(--transition-fast) var(--ease),
        filter var(--transition-fast) var(--ease);

}

.now-playing:focus-visible {

    outline: 3px solid currentColor;
    outline-offset: 3px;

    border-radius: 18px;

}

.now-playing-bg {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: fill;

    pointer-events: none;

    user-select: none;

}

.now-playing-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    /*
     * Extra right padding leaves room for the
     * arrow already drawn inside Now Playing Box.png.
     */
    padding:
        0
        39px
        0
        22px;

    pointer-events: none;

}

/* ============================================================
   SONG TITLE / MARQUEE
============================================================ */

.song-title-viewport,
.song-dropdown-title-viewport {

    width: 100%;

    overflow: hidden;

    white-space: nowrap;

}

.song-title,
.song-dropdown-title {

    width: max-content;
    min-width: 100%;

    font-size: var(--music-font-size);
    font-weight: 600;

    line-height: 1.2;

    white-space: nowrap;

    transform: translateX(0);

}

.song-title.is-scrolling,
.song-dropdown-title.is-scrolling {

    animation:
        music-title-marquee
        var(--marquee-duration, 8s)
        ease-in-out
        1s
        infinite;

}

@keyframes music-title-marquee {

    0%,
    15% {

        transform: translateX(0);

    }

    45%,
    60% {

        transform:
            translateX(
                var(--marquee-distance)
            );

    }

    90%,
    100% {

        transform: translateX(0);

    }

}

.music-speaker:active,
.now-playing:active,
.song-dropdown-item:active {
    /* Mengecil jadi 95% agar terasa seperti tombol ditekan */
    transform: scale(0.95) !important;
}

/* ============================================================
   SONG DROPDOWN
============================================================ */

.song-dropdown {

    display: flex;
    flex-direction: column;

    gap: var(--music-dropdown-gap);

    max-height: 0;

    opacity: 0;

    overflow: hidden;

    pointer-events: none;

    visibility: hidden;

    transform: translateY(-8px);

    transition:
        max-height var(--transition-normal)
            var(--ease),

        opacity var(--transition-normal)
            var(--ease),

        transform var(--transition-normal)
            var(--ease);

}

.song-dropdown.is-open {

    max-height: min(52vh, 520px);

    opacity: 1;

    overflow: visible;

    pointer-events: auto;

    visibility: visible;

    transform: translateY(0);

}

.song-dropdown-item {

    position: relative;

    width: 100%;
    height: var(--music-song-box-height);

    flex: 0 0 auto;

    transition:
        transform var(--transition-fast) var(--ease),
        filter var(--transition-fast) var(--ease);

}

.song-dropdown-item:focus-visible {

    outline: 3px solid currentColor;
    outline-offset: -4px;

    border-radius: 18px;

}

.song-dropdown-bg {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: fill;

    pointer-events: none;

    user-select: none;

}

.song-dropdown-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    padding:
        0
        24px;

    pointer-events: none;

}

/* Optional scrollbar styling */

.song-dropdown {

    scrollbar-width: thin;

    scrollbar-color:
        var(--volume-fill-color)
        transparent;

}

.song-dropdown::-webkit-scrollbar {

    width: 7px;

}

.song-dropdown::-webkit-scrollbar-track {

    background: transparent;

}

.song-dropdown::-webkit-scrollbar-thumb {

    border-radius: 999px;

    background:
        var(--volume-fill-color);

}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 768px) {

    :root {

        /* --music-icon-size: 48px;

        --music-volume-width: 150px;
        --music-control-height: 48px;

        --music-song-box-height: 48px; */

        --music-gap: 0px;
        --music-dropdown-gap: 0px;

        --volume-padding-inline: 14px;

        --volume-track-height: 5px;
        --volume-thumb-size: 15px;

        --music-font-size: 0.78rem;

    }

    .now-playing-overlay {

        padding:
            0
            32px
            0
            10px;

    }

    .song-dropdown-overlay {

        padding:
            0
            18px;

    }

}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .music-speaker,
    .now-playing,
    .song-dropdown,
    .song-dropdown-item,
    .music-slider::-webkit-slider-thumb {

        transition: none;

    }

    .song-title.is-scrolling,
    .song-dropdown-title.is-scrolling {

        animation: none;

        max-width: 100%;

        overflow: hidden;

        text-overflow: ellipsis;

    }

}