.lyric-player-vertical
    display: grid
    grid-template-columns: 40px [cover-side] 0fr [info-side] 1fr var(--amll-lyric-player-font-size, 1em)
    grid-template-rows: [drag-area] 20px [thumb] 30px [music-info] 0fr [cover-middle] 0fr [lyric-player] 1fr [control] 0fr
    gap: 2px
    width: 100%
    height: 100%
    .amll-cover-image
        aspect-ratio: 1/1
        align-self: center
        justify-self: center
        transition: background-image 0.5s linear, transform 0.5s cubic-bezier(0.3, 0.2, 0.2, 1.4)
        background-position: center
        background-size: cover
        border-radius: 10%
        $lyric-enabled: true
        @if ($lyric-enabled == true)
            grid-column: cover-side
            grid-row: music-info
            width: max(calc(var(--amll-lyric-player-font-size, 1em) * 2), 4em)
            height: max(calc(var(--amll-lyric-player-font-size, 1em) * 2), 4em)
            box-shadow: rgba(0,0,0,0.4) 0px 4px 16px
        @else
            grid-column: 2 / 4
            grid-row: music-info / span cover-middle
            width: min(50vh,80vw)
            height: min(50vh,80vw)
            box-shadow: rgba(0,0,0,0.2) 0px 16px 32px
        &.hide-cursor
            cursor: none
    .am-music-main-menu
        aspect-ratio: 1 / 1
        padding: 0
        position: relative
        border: none
        background: var(--amll-lyric-primary-color-t15, white) !important
        width: 30px
        margin-left: calc(var(--amll-lyric-player-font-size, 1em) / 2)
        border-radius: 50%
        align-self: center
        display: flex
        align-items: center
        justify-content: center
    .amll-lyric-player-wrapper
        grid-column: 1 / 5
        grid-row: lyric-player
        width: 100%
        height: 100%
        font-weight: 700
        box-sizing: border-box
        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(180deg, transparent 0%, black 10%, black 90%, transparent 100%)
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 90%, transparent 100%)
        > *
            mix-blend-mode: var(--amll-lyric-mix-blend-mode, plus-lighter)
        &.load-status
            opacity: 0.5
    .amll-music-name
        white-space: nowrap
        line-height: normal
        cursor: text
        user-select: text
        min-width: 0
        font-weight: 400
        letter-spacing: 0.4px
    .amll-music-album, .amll-music-artists
        white-space: nowrap
        text-align: center
        opacity: 0.5
        font-weight: 300
        letter-spacing: 0.4px
        font-size: 0.9em

        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: ""
    .amll-contributors
        font-size: 50%
        opacity: 0.5
    .amll-control-thumb
        grid-column: 2 / 4
        grid-row: thumb
        @media screen and (max-width: 768px)
            margin: 4px
    .amll-music-info
        padding-left: 1vh
        box-sizing: border-box
        font-size: 1.1em
        grid-column: info-side
        grid-row: music-info
        display: flex
        align-items: center
        overflow: hidden
        width: 100%
        line-height: 1.4em
        mix-blend-mode: var(--amll-lyric-mix-blend-mode, plus-lighter)
