$info-size-fract: 0.85fr
$player-size-fract: 1fr

.lyric-player-horizonal
    display: grid
    width: 100%
    height: 100%
    position: relative
    grid-template-rows: [drag-area] minmax(30px, 0.9fr) [thumb] auto [cover] auto [music-info] 3fr 1fr
    grid-template-columns: [info-side] $info-size-fract [player-side] $player-size-fract
    gap: 8px
    transition: 0.5s ease-in-out
    left: 0%
    &.no-lyric
        left: percentage(calc((1 - $info-size-fract / ($info-size-fract + $player-size-fract)) / 2))
        .amll-lyric-player-wrapper
            transition: opacity 0.5s cubic-bezier(0.5, 0, 0.5, 1), transform 0.5s cubic-bezier(0.5, 0, 0.5, 1)
            opacity: 0
            animation: amll-hide-lyric 0.5s step-end forwards
            @keyframes animation
                from
                    display: inherit
                to
                    display: none
    .amll-control-thumb
        grid-column: info-side
        grid-row: thumb
        margin: 2vh
    .amll-lyric-player-wrapper
        position: relative
        transition: opacity 0.5s 0.5s cubic-bezier(0.5, 0, 0.5, 1)
        display: inherit
        opacity: 1
        grid-column: player-side
        grid-row: 1 / 7
        width: 100%
        height: 100%
        font-weight: 700
        box-sizing: border-box
        // padding-right: 7.5vw
        mix-blend-mode: var(--amll-lyric-mix-blend-mode, plus-lighter)
        display: flex
        flex-direction: column
        justify-content: center
        align-items: center
        gap: 16px
        mask-image: linear-gradient(to bottom, transparent 5%, white 20%, white 80%, transparent 93%)
        -webkit-mask-image: linear-gradient(to bottom, transparent 5%, white 20%, white 80%, transparent 93%)
        > *
            mix-blend-mode: var(--amll-lyric-mix-blend-mode, plus-lighter)
            // margin-left: 2.5vw
        &.load-status
            opacity: 0.5
    .amll-music-info
        grid-column: info-side
        grid-row: music-info
        // max-width: min(60vh, 40vw)
        width: min(58vh, 38vw)
        justify-self: center
        mix-blend-mode: var(--amll-lyric-mix-blend-mode, plus-lighter)
        font-size: 2.0vh
        display: flex
        flex-direction: column
        justify-content: space-around
        transition: margin-top 0.25s
        margin-top: 2.5vh
        @media screen and (max-height: 768px)
            margin-top: 2.0vh
            font-size: 111%

    .amll-cover-shadow
        position: absolute
        top: 3em
        left: -2em
        width: 100%
        height: 100%
        background-size: 50%
        background-repeat: no-repeat
        opacity: 0.6
    .amll-cover-image
        aspect-ratio: 1/1
        grid-column: info-side
        grid-row: cover
        align-self: center
        justify-self: center
        width: min(58vh, 38vw)
        height: min(58vh, 38vw)
        transition: background-image 0.5s linear, box-shadow 0.5s ease, transform 0.6s cubic-bezier(0.4, 0.2, 0.1, 1)
        image-rendering: auto
        background-position: center
        background-size: cover
        border-radius: 2%
        overflow: hidden

        $scale-level: 0.75
        $base-box-shadow-v-0: rgba(0,0,0,0.35)
        $base-box-shadow-y-0: 16px
        $base-box-shadow-r-0: 32px
        $base-box-shadow-v-1: rgba(0,0,0,0.25)
        $base-box-shadow-y-1: 32px
        $base-box-shadow-r-1: 64px

        box-shadow: $base-box-shadow-v-0 0px calc($base-box-shadow-y-0 / $scale-level / 2) calc($base-box-shadow-r-0 / $scale-level / 2), $base-box-shadow-v-1 0px calc($base-box-shadow-y-1 / $scale-level / 2) calc($base-box-shadow-r-1 / $scale-level / 2)
        transform: scale($scale-level)
        &.is-playing
            transform: scale(1)
            transition: background-image 0.5s linear, box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.3, 0.2, 0.2, 1.4)
            box-shadow: $base-box-shadow-v-0 0px $base-box-shadow-y-0 $base-box-shadow-r-0, $base-box-shadow-v-1 0px $base-box-shadow-y-1 $base-box-shadow-r-1
        &.hide-cursor
            cursor: none

    .amll-music-name
        white-space: nowrap
        line-height: normal
        cursor: text
        user-select: text
        min-width: 0
        font-weight: 400
        letter-spacing: 0.4px
        opacity: 0.9
        mix-blend-mode: normal !important

    .am-music-main-menu
        aspect-ratio: 1 / 1
        padding: 0
        position: relative
        border: none
        background: var(--amll-lyric-primary-color-t15, white) !important
        width: 2.6vh
        margin-left: 16px
        border-radius: 50%
        align-self: center
        display: flex
        align-items: center
        justify-content: center
        padding: 0
        // scale: 0.9
        // @media screen and (max-height: 768px)
        //     scale: 0.8
        svg
            width: 72% // 让SVG元素的宽度与父容器相同
            height: auto // 让高度自适应内容

    .amll-contributors
        font-size: 45%
        opacity: 0.5

    .am-music-play
        height: 8vh !important
        width: 8vh !important
        padding: 0
        > *
            $base-scale: 1.15
            transform: scale($base-scale, calc($base-scale * 1.1))

    .amll-music-album, .amll-music-artists
        white-space: nowrap
        text-align: center
        opacity: 0.45
        font-weight: 200
        letter-spacing: 1px

        a
            line-height: normal
            text-decoration: none
            user-select: text

            &:hover
                opacity: 0.75

            &:active
                opacity: 0.5

            &::after
                content: var(--applemusic-like-lyrics-music-artists-separator, ", ")

            &:nth-last-child(2)::after
                content: " & "

            &:last-child::after
                content: ""
