/*
 * The radio is Octane's own floating player (no AIR layout). Its text takes the AIR face and sizes: regular
 * Ubuntu (HabboAirUbuntu; Octane's `Ubuntu` is the condensed cut), u_bold 12 px for the station names, 11 px
 * (il_regular / il_bold) as the floor for the title, live tag and genres. The dark glass surface keeps its white
 * text: black would not read on it. Icon sizes (react-icons, set on the svg) are left alone.
 */
.radio-widget {
    font-family: HabboAirUbuntu, UbuntuRegular, sans-serif;
    font-feature-settings: "tnum";
}

@layer base {
    .radio-widget :where(*):not(svg, svg *) {
        font-family: HabboAirUbuntu, UbuntuRegular, sans-serif !important;
    }

    .radio-widget :where(.text-\[9px\], .text-\[10px\]):not(svg, svg *) {
        font-size: 11px !important;
    }

    /* The selected station's name (text-sm, 14 px) is u_bold 12 px like the list rows. */
    .radio-widget :where(.text-sm):not(svg, svg *) {
        font-size: 12px !important;
        line-height: 15px !important;
    }
}

.radio-eq {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}

.radio-eq span {
    width: 3px;
    height: 30%;
    border-radius: 2px;
    background: #38bdf8;
    opacity: 0.55;
}

.radio-eq.is-live span {
    opacity: 1;
    animation: radioEq 0.9s ease-in-out infinite;
}

.radio-eq span:nth-child(2) {
    animation-delay: 0.18s;
}

.radio-eq span:nth-child(3) {
    animation-delay: 0.36s;
}

.radio-eq span:nth-child(4) {
    animation-delay: 0.12s;
}

@keyframes radioEq {
    0%,
    100% {
        height: 22%;
    }

    50% {
        height: 100%;
    }
}

.radio-vol .track-0 {
    background-color: #38bdf8;
}

.radio-vol .thumb {
    background-color: #38bdf8;
}