.main-player-mixin();
.tweaks-mixin();
.header-mixin();
.menu-mixin();
.sidebar-mixin();

body:not(.mq-playing) {
    .playlist-list-mixin();
}

.g-mn {
    .playlist-page-mixin();
    .main-page-mixin();
}

@modify-play-page: true; //: name: 修改播放页面 | type: checkbox
.play-page-mixin();

@main-player-left: 7%;
@main-player-width: clamp(200px, 25%, 500px);
@main-player-margin: 2em;
@main-player-max-width: 60em;
@main-player-height: 6em; // hardcoded in ncm css

.menu-mixin() {

    .m-layer:not(.m-layer *),
    .m-card:not(.m-card *) {
        background: rgba(255, 255, 255, 0.5) !important;
        backdrop-filter: blur(var(--layer-blur));

        body.mq-playing.rnp-dark &,
        body.mq-playing.rnp-auto.rnp-system-dark &,
        body:not(.mq-playing):not(.s-theme-white) & {
            background: rgba(46, 46, 46, 0.5) !important;
        }

        body.mq-playing.rnp-light &,
        body.mq-playing.rnp-auto.rnp-system-light & {
            background: rgba(255, 255, 255, 0.5) !important;
        }

        &.m-card-arrow-left::before,
        &.m-card-arrow-right::before {
            border-color: var(--layer-background) transparent transparent var(--layer-background);
        }

        .lyct,
        .zcnt,
        .m-card,
        .m-layer {
            background: none !important;
        }

        * {
            color: rgb(0, 0, 0) !important;

            body.mq-playing.rnp-dark &,
            body.mq-playing.rnp-auto.rnp-system-dark &,
            body:not(.mq-playing):not(.s-theme-white) & {
                color: rgb(255, 255, 255) !important;
            }

            body.mq-playing.rnp-light &,
            body.mq-playing.rnp-auto.rnp-system-light & {
                color: rgb(0, 0, 0) !important;
            }

            &.u-ibtn1 {
                color: rgb(255, 255, 255) !important;

                body.mq-playing.rnp-dark &,
                body.mq-playing.rnp-auto.rnp-system-dark &,
                body:not(.mq-playing):not(.s-theme-white) & {
                    color: rgb(0, 0, 0) !important;
                }

                body.mq-playing.rnp-light &,
                body.mq-playing.rnp-auto.rnp-system-light & {
                    color: rgb(255, 255, 255) !important;
                }
            }

            &.u-ibtn1,
            &.u-ibtn5 {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                border-radius: 5px;
            }
        }
    }

    div .u-lg32.logo {
        background-color: transparent;
    }

    div.m-card-sharecard li:hover {
        background: rgba(0, 0, 0, 0.1);

        body.mq-playing.rnp-dark &,
        body.mq-playing.rnp-auto.rnp-system-dark &,
        body:not(.mq-playing):not(.s-theme-white) & {
            background: rgba(255, 255, 255, 0.1);
        }

        body.mq-playing.rnp-light &,
        body.mq-playing.rnp-auto.rnp-system-light & {
            background: rgba(0, 0, 0, 0.1);
        }
    }

    .m-layer,
    .m-card,
    .sltwrap,
    .u-arrlay,
    div.u-arrlay {
        background: rgba(255, 255, 255, 0.5) !important;
        backdrop-filter: blur(var(--layer-blur));

        body.mq-playing.rnp-dark &,
        body.mq-playing.rnp-auto.rnp-system-dark &,
        body:not(.mq-playing):not(.s-theme-white) & {
            background: rgba(46, 46, 46, 0.5) !important;
        }

        body.mq-playing.rnp-light &,
        body.mq-playing.rnp-auto.rnp-system-light & {
            background: rgba(255, 255, 255, 0.5) !important;
        }

        .m-card &,
        .m-layer & {
            background: none !important;
            backdrop-filter: none !important;

            body.mq-playing.rnp-dark &,
            body.mq-playing.rnp-auto.rnp-system-dark &,
            body:not(.mq-playing):not(.s-theme-white) & {
                background: none !important;
            }

            body.mq-playing.rnp-light &,
            body.mq-playing.rnp-auto.rnp-system-light & {
                background: none !important;
            }
        }
    }

    .m-timeline {
        .head.f-cb {
            display: flex;
            align-items: center;
            flex-direction: row;

            h2 {
                padding: 0 10px;
            }
        }

        .m-timeline-head {
            a {
                backdrop-filter: blur(30px);
            }
        }
    }
}

.tweaks-mixin() {
    #portal_root {
        background: linear-gradient(#c3dce2, #deebef, #c4dce2);
        opacity: 1;

        body:not(.s-theme-white) & {
            background: linear-gradient(#020e3b, #1b1e27);
        }
    }

    body {
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    header {
        background: transparent !important;
    }

    .f-ff1 {
        font-family: inherit;
    }

    .m-tabwrap {
        background: transparent;
    }

    .g-sd {
        border-top-right-radius: 8px;
        background-color: transparent;
        transition: background-color 0.3s ease, backdrop-filter 0.3s ease;

        &:hover {
            background-color: var(--layer-background);
            backdrop-filter: blur(var(--layer-blur));
        }
    }

    .m-skswitch {
        display: none;
    }

    .u-resize {
        opacity: 0;
    }

    .fullscreen {

        .u-resize,
        .u-resize2,
        .u-resize3 {
            display: none;
        }
    }

    .bg {
        background: transparent !important;
    }

    .ico {
        font-family: Arial, Helvetica, sans-serif;
    }

    ::-webkit-scrollbar-track {
        background: none !important;
    }

    // remove white backgrounds
    .m-timeline .m-dtool,
    .g-setHd,
    .g-sd-set,
    .g-mn-set,
    .m-uinfo {
        background: transparent !important;
    }

    .dowlod.z-store-hide {
        display: none;
    }

    //
    body {
        --layer-background: rgba(255, 255, 255, 0.5);
        --layer-blur: 100px;
        --icnTheme: #000000;
        --themeC1: #000000;
        --themeC1-rgb: 0, 0, 0;
        --themeC1-hvr: #2a2a2a;
        --ncm-text: #000000;
        // lyric bar plugin support
        --bottombar-elevation: @main-player-margin;
        --bottombar-height: @main-player-height;

        &:not(.s-theme-white) {
            --layer-background: rgba(46, 46, 46, 0.5);
            --icnTheme: #ffffff;
            --themeC1: #ffffff;
            --themeC1-rgb: 255, 255, 255;
            --themeC1-hvr: #d8d8d8;
            --ncm-text: #ffffff;
        }
    }

    .lyric-bar {
        border-radius: 5px;
        background: var(--layer-background);
        backdrop-filter: blur(var(--layer-blur));
        box-shadow: 0 0 20px 10px rgb(0 0 0 / 5%);

        &.posx-left {
            left: 70px !important;
        }

        &.posy-bottom.posx-left {
            left: calc(50% - @main-player-max-width / 2) !important;
        }

        &.posy-bottom.posx-right {
            right: calc(50% - @main-player-max-width / 2) !important;
        }
    }
}

.playlist-list-mixin() {
    .m-playlist.z-show {
        box-shadow: 1px 2px 6px rgb(0 0 0 / 14%);
        background: var(--layer-background);
        backdrop-filter: blur(var(--layer-blur));
        bottom: 0;
        border-top-left-radius: 8px;

        ul {
            padding-bottom: 100px;
        }
    }
}

.header-mixin() {
    .m-logo {
        display: none;
    }

    .g-hd:after {
        background: none;
    }

    .m-leftbox {
        left: 0 !important;

        .m-topbox {
            .mq-playing & {
                visibility: hidden;
            }

            .m-hst>*,
            .m-sch>input,
            .j-listentosong>a {
                background: transparent !important;
                border-radius: 5px !important;
            }

            .m-sch {
                width: 150px;
                height: 30px;
                border: none;

                &::before,
                &::after {
                    content: "";
                    clip-path: polygon(100% 0,
                            100% 25%,
                            25% 25%,
                            25% 100%,
                            0 100%,
                            0% 0%);
                    background: var(--themeC1);
                    position: absolute;

                    width: 10px;
                    height: 10px;
                }

                &::before {
                    left: 0;
                    top: 0;
                }

                &::after {
                    right: 0;
                    bottom: 0;
                    transform: rotateZ(180deg);
                }

                .sch-btn {
                    left: 0;
                    top: 0;
                    margin: 0;
                    width: 100%;
                    height: 100%;

                    svg {
                        display: none;
                    }

                    pointer-events: none;

                    &::before {
                        content: "S E A R C H";
                        font-weight: 800;
                        font-size: 12px;
                        text-align: center;
                        opacity: 1;
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        transition: opacity 0.2s;
                    }
                }

                .j-search-body {
                    left: 45px;
                }

                input {
                    padding: 5px;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                    transition: opacity 0.2s;
                    font-size: 15px;
                    text-align: center;
                    line-height: 30px;

                    &::-webkit-input-placeholder {
                        font-size: 12px;
                    }
                }

                &:hover input {
                    opacity: 1;
                }

                &:hover .sch-btn::before {
                    opacity: 0;
                }
            }
        }
    }
}

.main-player-mixin() {
    body {

        // adjust height
        .g-mn {
            bottom: 0px;
            padding-bottom: @main-player-height;
        }
    }

    // remove ncm's default open animation
    .m-player,
    .m-player .spk.z-silence:after,
    .m-pinfo .info-new {
        transition: none !important;
    }

    .fmplay {
        transform: translateY(-100px);
    }

    // Play info
    .m-pinfo {
        bottom: calc(@main-player-height - 3 * @main-player-margin);
        margin: @main-player-margin calc(50% - @main-player-max-width / 2);
        max-width: 20em;
        pointer-events: none;

        .u-cover {

            &,
            & * {
                border-radius: 5px !important;
            }

            .lnk {
                -webkit-mask-image: none;
            }
        }

        h3>*,
        .j-title,
        .btns>* {
            pointer-events: auto;
        }

        // Cover
        .pic,
        .cover,
        .lnk {
            border-radius: 3px !important;
        }

        .cover {
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.459);
        }
    }

    #main-player,
    .m-player {
        box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.05);
        bottom: calc(@main-player-height - 3 * @main-player-margin);
        margin: @main-player-margin auto;
        max-width: @main-player-max-width;
        border-top: none;
        background: var(--layer-background);
        backdrop-filter: blur(var(--layer-blur));
        border-radius: 5px;

        body:not(.s-theme-white) & {
            box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.2);
        }

        // Progress bar
        .prg {
            top: 0 !important;
            left: 0;
            right: 0;
            height: 10px;
            margin: 0;

            &>* {
                border-radius: 1.5px !important;
            }

            &:hover>* {
                border-radius: 2.5px !important;
            }

            .ctrl {
                opacity: 0;
            }

            .track,
            .download {
                padding: 0;
                top: 0;
            }

            .has {
                top: 0;
                background: var(--icnTheme);

                .mq-playing & {
                    background: var(--rnp-accent-color-shade-2);
                }
            }
        }

        // hide time
        time {
            display: none;
        }

        // Buttons
        .btnc,
        .btnp,
        .type,
        .word {
            background: transparent;
            margin-top: 7px;

            .mq-playing & {
                margin-top: 0;
            }
        }

        .mq-playing & {
            max-width: none;
        }
    }

    // Sidebar
    .g-sd {
        bottom: 0;
    }
}

.main-page-mixin() {
    .m-banner {
        display: none;
    }
}

.playlist-page-mixin() {
    .itm {
        border-radius: 3px;
        font-weight: 700;
        padding-top: 6px !important;
        padding-bottom: 6px !important;

        &:not(:hover):not(.z-sel) {
            background: transparent !important;
        }
    }

    .user {
        .u-face {
            display: none;
        }

        .uname {
            margin-left: 0;
            font-weight: 700;
            color: var(--themeC1);
        }
    }

    .name {
        .f-ust {
            font-size: 40px;
            line-height: 50px;
        }
    }

    .u-rtag {
        display: none;
    }

    .u-cover .ply {
        transition: all 0.1s ease-in 0s;

        &>* {
            filter: invert(0.8);
        }
    }

    .firstbtn() {
        color: rgba(255, 255, 255, 0.8);
        background: var(--themeC1) !important;

        &:hover {
            background: var(--themeC1-hvr) !important;
        }

        body:not(.s-theme-white) & {
            color: rgba(0, 0, 0, 0.8);

            &>* {
                filter: invert(0.8);
            }
        }
    }

    .btns,
    .buttons,
    .hd.g-wrap5,
    .m-search .oper {
        &>*:nth-child(1) {
            .firstbtn();
        }
    }

    .u-ibtn1 {
        .firstbtn();
    }

    .btns,
    .buttons,
    .m-search .oper,
    .hd,
    .hd>*,
    .head {

        &>.u-ibtn5b,
        &>.u-ibtn5,
        &>.u-ibtn1,
        &>button {
            border-radius: 6px;
            margin: 0;
            border: none;
            text-align: left;
            background: rgba(var(--themeC1-rgb), 0.02);

            &:hover {
                background: rgba(var(--themeC1-rgb), 0.05);
            }
        }
    }

    .btns,
    .buttons,
    .m-search .oper {
        display: flex;
        overflow: hidden;
        align-items: stretch;
        flex-direction: column;
        width: max-content;
        border-radius: 6px;
        padding: 0;

        .u-ibtn5b,
        button {
            border-radius: 0 !important;
            width: 100% !important;
        }
    }

    .m-search .oper {
        padding: 0;
        margin: 15px 20px;
    }

    .inf,
    .mnum,
    .intr {
        display: none;
    }

    .g-wrap0 {
        padding-bottom: 0;
    }

    .u-tab2 {
        &>*:nth-child(1) {
            border-bottom: 1px solid rgba(0, 0, 0, 0.349);

            * {
                font-size: 14px;
            }

            .j-flxg:not(.z-sel) {
                color: gray;
            }

            .z-sel {
                font-size: 14px;

                &::before {
                    width: 100%;
                    bottom: -2px;
                    background: var(--themeC1);
                    border-radius: 0 !important;
                }
            }
        }
    }

    .u-micn-loved,
    .u-micn {
        background: var(--themeC1);
    }

    .u-playinglocation {
        margin: 0 !important;
        right: 52px;
        bottom: 52px;
        box-shadow: 0 0 20px 20px rgb(0 0 0 / 5%);
    }
}

.play-page-mixin() when (@modify-play-page) {
    #rnp-settings-menu>div.rnp-settings-menu-inner {
        &>.rnp-group:nth-child(1)>*:nth-child(7) {
            display: none;
        }
    }

    // font color
    body.rnp-light.mq-playing,
    body.rnp-auto.rnp-system-light.mq-playing {

        .s-fc4,
        a.s-fc4.z-nohvr:hover {
            &:not(.rnp-settings-menu *, .rnp-lyrics-switch *, .content *) {
                color: rgba(0, 0, 0, 0.4);
            }
        }

        .s-fc3 {
            &:not(.rnp-settings-menu *, .rnp-lyrics-switch *, .content *) {
                color: rgba(0, 0, 0, 0.6);
            }
        }

        .n-single .head .title,
        .s-fc1,
        .u-ibtn5,
        .u-load,
        a,
        textarea,
        input,
        button,
        select,
        keygen,
        legend,
        & {
            &:not(.rnp-settings-menu *, .rnp-lyrics-switch *, .content *) {
                color: rgba(0, 0, 0, 0.8);
            }
        }

        .n-single .head .detail svg,
        .u-ibtn5-inplay svg,
        .u-ibtn5 svg {
            &:not(.rnp-settings-menu *, .rnp-lyrics-switch *, .content *) {
                fill: rgba(0, 0, 0, 0.8);
            }
        }

        .g-single-program .n-single .mn .program-recommend {
            &:not(.rnp-settings-menu *, .rnp-lyrics-switch *, .content *) {
                border-top: 1px solid rgba(0, 0, 0, 0.2);
            }
        }

        .u-ibtn5 {
            &:not(.rnp-settings-menu *, .rnp-lyrics-switch *, .content *) {
                border-color: rgba(0, 0, 0, 0.2);
            }
        }
    }

    #main-player.z-shadow {
        box-shadow: unset !important;
        backdrop-filter: unset !important;
        width: @main-player-width;
        max-width: none;
        margin: -10px 0 0 @main-player-left;
        bottom: 8%;
        background: none !important;
        transition: opacity 0.2s ease !important;

        .lyric-only:not(.mq-playing-program) & {
            bottom: 0;
        }

        .lyric-only.mq-playing-scroll:not(.mq-playing-program) &:not(:hover) {
            opacity: 0.3 !important;
        }

        .lyric-only.center-lyric:not(.mq-playing-program) & {
            margin: 0;
            left: 50%;
            transform: translateX(-50%);
        }

        &>*:not(.btnc):not(.btnp):not(.prg):not(.prg-spk) {
            display: none;
        }

        .btnc,
        .btnp,
        .type,
        .word {
            margin-top: 7px !important;
        }

        .j-vol {
            &.prg-spk {
                opacity: 0.4 !important;
                display: block !important;
                background: transparent;
                backdrop-filter: none !important;
                position: absolute;
                height: 105px;
                top: -45vh;

                .lyric-only:not(.mq-playing-program) & {
                    left: -34vw;
                }

                *,
                *:not(.track):not(.has)::before {
                    background: transparent;
                    width: 10px;
                }

                .has::before {
                    background: var(--rnp-accent-color-shade-2);
                }

                *,
                *::before {
                    border-radius: 5px !important;
                }

                left: -2%;

                .has,
                .track {
                    opacity: 0;
                    transition: opacity 0.1s;
                    margin-left: -15px;
                }

                .ctrl {
                    margin: 0;
                    padding: 0;
                }

                &:hover {
                    opacity: 1 !important;

                    .has,
                    .track {
                        opacity: 1;
                    }
                }

                &::before {
                    display: block;
                    content: "VOLUME";
                    position: absolute;
                    writing-mode: vertical-lr;
                    letter-spacing: 10px;
                    top: 15px;
                    z-index: 10;
                    color: rgba(var(--rnp-accent-color-shade-2-rgb), 0.45);
                    font-weight: 900;
                }
            }

            svg {
                display: none;
            }
        }
    }

    body:not(.mq-playing-fm) .m-pinfo:not(.z-show) {
        margin: 0 0 0 @main-player-left;
        padding: 0;
        width: @main-player-width;
        max-width: none;

        .lyric-only:not(.mq-playing-program) & {
            display: none;
        }

        .oper {
            pointer-events: auto;
            top: 10px;
        }

        overflow: visible;

        .info-new {
            -webkit-transform: translateY(0px) !important;
        }

        .btns {
            // margin-left: 2.5px;
            transform: translateY(-10px);
            width: 100%;
            position: none !important;
            left: 0 !important;

            * {
                cursor: pointer;
                opacity: 1;
                transition: all 0.2s !important;
                width: 38px;
                margin: 0;
                border: none;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            &:not(:hover)>*:not(.btn-love) {
                width: 0;
                opacity: 0 !important;
            }

            &>*:nth-child(2),
            &>*:nth-child(4) {
                order: -1;
            }

            &>.btn-love {
                order: 0;
                opacity: 1 !important;
                overflow: visible;

                &.loved {
                    svg {
                        display: block !important;
                    }
                }

                &::before {
                    display: none !important;
                }
            }
        }
    }

    .g-single {
        height: 100%;

        .cdin {
            box-shadow: none !important;
        }

        .cdwrap,
        .cdin,
        .cdimg {
            border-radius: 5px !important;
        }

        .g-single-program .wrap>* {
            visibility: visible !important;
        }

        .lyric {
            body:not(.lyric-only):not(.mq-playing-program) & {
                top: 0 !important;
                left: 45% !important;
                width: auto !important;
                height: auto !important;
                right: clamp(10px, 3%, 40px) !important;
            }

            .lyric-only .g-single-track & {
                bottom: clamp(100px, 10%, 150px) !important;
            }
        }

        .content {
            // backdrop-filter: blur(10px);
            // background: linear-gradient(transparent, rgba(255, 255, 255, 0.425));
            transform: none;
            max-width: @main-player-width;
            background: none;
            left: @main-player-left;
            top: 10px;
            position: fixed;
            bottom: 0px;
            height: auto !important;
            justify-content: center;
            width: 100%;

            .sd {
                margin-left: 25px !important;
                width: clamp(200px, calc(90% - 30px), 300px);
            }

            .mn {
                width: 125% !important;
                margin-left: 0 !important;

                .head {
                    padding: 0 0 0 10px !important;
                }
            }

            .tag-wrap {
                display: none !important;
            }

            .title .name {
                top: 0px;
                font-size: 20px;
                position: absolute;
                -webkit-mask-image: linear-gradient(90deg,
                        black,
                        black,
                        98%,
                        transparent 99%);
                padding-left: 17px;
                font-weight: 700;
                word-break: keep-all;
                max-width: 80%;

                text-overflow: ellipsis;
                white-space: nowrap;

                &::before {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    top: 0;
                    width: 7px;
                    background: var(--rnp-accent-color-shade-2);
                    border-radius: 3.5px;
                    content: "";
                }
            }
        }

        .g-bd2 {
            // Comments and suggestions
            margin: 0;
            width: 100%;
            max-width: none;
            display: flex;
            flex-direction: column-reverse;
            pointer-events: none;

            .g-mn2c>.j-flag {
                display: flex;

                .m-comment {
                    flex: 1;
                }
            }

            .g-sd2,
            .m-comment {
                pointer-events: all;
                float: left;
                max-width: 100%;
                padding: 10px 50px;
                margin: 0 !important;
                margin-left: calc(@main-player-width + @main-player-left) !important;
                margin-right: 50px !important;

                .lyric-only:not(.mq-playing-program) & {
                    margin-left: 50px !important;
                    margin-right: 50px !important;
                }

                .m-page>a {
                    display: inline-flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    transition: background 0.1s ease, color 0.1s ease;
                    background-color: transparent;
                    border: none;
                    outline: none;
                    color: #ffffff;

                    svg {
                        fill: #ffffff;
                    }

                    .rnp-light &,
                    .rnp-auto.rnp-system-light & {
                        color: #000000;

                        svg {
                            fill: #000000;
                        }
                    }

                    &.js-selected {
                        background: var(--rnp-accent-color-shade-2);
                        color: #000000;

                        svg {
                            fill: #000000;
                        }

                        .rnp-light &,
                        .rnp-auto.rnp-system-light & {
                            color: #ffffff;

                            svg {
                                fill: #ffffff;
                            }
                        }
                    }

                    &.js-disabled {
                        opacity: 0.3;
                    }

                    &:not(.js-disabled):hover {
                        background: var(--rnp-accent-color-shade-2);
                        color: #000000;

                        svg {
                            fill: #000000;
                        }

                        .rnp-light &,
                        .rnp-auto.rnp-system-light & {
                            color: #ffffff;

                            svg {
                                fill: #ffffff;
                            }
                        }
                    }
                }
            }

            .g-sd2 {
                width: max-content;
            }

            .recommend-btn {
                display: none;
            }
        }

        // Program
        .g-single-program {
            max-height: none;

            .wrap {
                position: static;
                max-width: none !important;
            }

            .content {
                margin: 0;
                position: static;
                max-width: none !important;
                left: 0;

                .sd {
                    margin: 0;
                    position: fixed;
                    left: @main-player-left;
                    max-width: calc(@main-player-width - 25px);
                    top: 30%;
                }

                .mn {
                    max-width: none !important;
                    width: auto !important;
                    flex: 1;
                    margin-top: 50px;
                    margin-right: 5%;
                    margin-left: calc(@main-player-left + @main-player-width + 50px) !important;
                    height: auto !important;

                    .head {
                        display: none;
                    }
                }
            }

            .g-bd2 {
                padding-top: 0px !important;
            }
        }
    }
}

// modified from 侧边栏折叠（叠加型） and 侧边栏图标 - Material Design
.sidebar-mixin() {
    @nav-anim-time: 0.2s;

    .sys.firstlist>li>a::before,
    .nav>*:not(.j-hostplst) li>a::before {
        top: 8px;
        background: currentColor;
        content: "";
        width: 20px;
        position: absolute;
        left: 6px;
        height: 20px;
    }

    .nav>*:not(.j-hostplst) li a svg {
        display: none;
    }

    section.g-sd {
        ul:not(.sys.firstlist) a {
            transition: background-color 0.2s ease, padding-left @nav-anim-time !important;
            -webkit-mask-image: none !important;
        }

        ul a {
            padding-left: 40px !important;
        }

        &:not(:hover) {
            border-color: transparent !important;

            ul a {
                padding-left: 50px !important;
            }
        }
    }

    .sys.firstlist>li:nth-child(1)>a::before {
        -webkit-mask-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>web</title><path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>');
    }

    .sys.firstlist>li:nth-child(2)>a::before {
        -webkit-mask-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>content-save-all-outline</title><path d="M1 7H3V21H17V23H3C1.9 23 1 22.11 1 21V7M19 1H7C5.89 1 5 1.9 5 3V17C5 18.1 5.89 19 7 19H21C22.1 19 23 18.1 23 17V5L19 1M21 17H7V3H18.17L21 5.83V17M14 10C12.34 10 11 11.34 11 13S12.34 16 14 16 17 14.66 17 13 15.66 10 14 10M8 4H17V8H8V4Z" /></svg>');
    }

    .sys.firstlist>li:nth-child(3)>a::before {
        -webkit-mask-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>video</title><path d="M17,10.5V7A1,1 0 0,0 16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5Z" /></svg>');
    }

    .sys.firstlist>li:nth-child(4)>a::before {
        -webkit-mask-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>focus-field-horizontal</title><path d="M19 19H15V21H19C20.1 21 21 20.1 21 19V15H19M19 3H15V5H19V9H21V5C21 3.9 20.1 3 19 3M5 5H9V3H5C3.9 3 3 3.9 3 5V9H5M5 15H3V19C3 20.1 3.9 21 5 21H9V19H5V15M7 11H9V13H7V11M11 11H13V13H11V11M15 11H17V13H15V11Z" /></svg>');
    }

    .sys.firstlist>li:nth-child(5)>a::before {
        -webkit-mask-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>broadcast</title><path d="M12 10C10.9 10 10 10.9 10 12S10.9 14 12 14 14 13.1 14 12 13.1 10 12 10M18 12C18 8.7 15.3 6 12 6S6 8.7 6 12C6 14.2 7.2 16.1 9 17.2L10 15.5C8.8 14.8 8 13.5 8 12.1C8 9.9 9.8 8.1 12 8.1S16 9.9 16 12.1C16 13.6 15.2 14.9 14 15.5L15 17.2C16.8 16.2 18 14.2 18 12M12 2C6.5 2 2 6.5 2 12C2 15.7 4 18.9 7 20.6L8 18.9C5.6 17.5 4 14.9 4 12C4 7.6 7.6 4 12 4S20 7.6 20 12C20 15 18.4 17.5 16 18.9L17 20.6C20 18.9 22 15.7 22 12C22 6.5 17.5 2 12 2Z" /></svg>');
    }

    .sys.firstlist>li:nth-child(6)>a::before,
    nav li.rdi>a::before {
        -webkit-mask-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>radio</title><path d="M20,6A2,2 0 0,1 22,8V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V8C2,7.15 2.53,6.42 3.28,6.13L15.71,1L16.47,2.83L8.83,6H20M20,8H4V12H16V10H18V12H20V8M7,14A3,3 0 0,0 4,17A3,3 0 0,0 7,20A3,3 0 0,0 10,17A3,3 0 0,0 7,14Z" /></svg>');
    }

    nav li.lke>a::before {
        -webkit-mask-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>heart</title><path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" /></svg>');
    }

    nav li[data-id="/m/offline/"]>a::before {
        -webkit-mask-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>download-box-outline</title><path d="M8 17V15H16V17H8M16 10L12 14L8 10H10.5V7H13.5V10H16M5 3H19C20.11 3 21 3.9 21 5V19C21 20.11 20.11 21 19 21H5C3.9 21 3 20.11 3 19V5C3 3.9 3.9 3 5 3M5 5V19H19V5H5Z" /></svg>');
    }

    nav li[data-id="/m/history/"]>a::before {
        -webkit-mask-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>history</title><path d="M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3" /></svg>');
    }

    nav li[data-id="/m/cloud/"]>a::before {
        -webkit-mask-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>cloud</title><path d="M6.5 20Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20Z" /></svg>');
    }

    nav li.mix>a::before {
        -webkit-mask-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>star</title><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" /></svg>');
    }

    @nav-size: 55px;
    @nav-anim-time: 0.2s;

    .g-mn,
    .m-lyric {
        transition: all 0.1s;
        position: absolute;
        left: @nav-size !important;
        right: 0;
    }

    section.g-sd {
        overflow: hidden !important;
        transition: width @nav-anim-time;

        h2 {
            display: none;
            word-break: keep-all;
            width: 100%;
            -webkit-mask-image: linear-gradient(90deg, black, transparent);
            max-height: 1px;
            background: transparent;
            backdrop-filter: brightness(1.2);
            transform: translateX(10px);
            margin-bottom: 5px;
        }

        .newlist,
        .heartbeat.f-cp {
            transition: opacity @nav-anim-time;
        }

        a {
            text-overflow: clip;
            transition: background-color 0.2s ease, padding-left @nav-anim-time !important;
        }

        li.z-sel {
            transition: width @nav-anim-time;
        }

        ul.sys.firstlist a {
            // padding-left: 13px !important;
            overflow: hidden;
        }

        &:not(:hover) {
            width: @nav-size !important;

            ul:not(.sys.firstlist) a {
                padding-left: 50px;
            }

            ul.sys.firstlist a {
                -webkit-mask-image: linear-gradient(90deg,
                        black 80%,
                        transparent 44%,
                        transparent 99%);
            }

            li.z-sel {
                width: 108px;
                -webkit-mask-image: linear-gradient(90deg,
                        black 30%,
                        transparent 44%,
                        transparent 99%);
            }

            .newlist,
            .heartbeat.f-cp {
                opacity: 0;
            }
        }

        &:hover {

            .heartbeat.f-cp,
            .newlist {
                opacity: 1;
            }

            a {
                font-size: auto;
            }
        }
    }
}