@import "./components/appkit/common.sass"

#amll-config-view
    position: relative

#amll-config
    @include pingfang-font
    height: 100%
    svg
        width: unset
        height: unset
        line-height: normal

    p
        margin-block: 1em

    del
        text-decoration: line-through

#amll-config-content
    width: 100%
    display: flex
    flex-direction: column
    gap: 16px
.amll-mouse-hover-show
    opacity: 0
    transition: opacity 1s
    &:hover
        opacity: 1
        transition: opacity 1s 5s

.amll-music-info
    a
        color: unset
    button
        background: transparent
        border: none
    svg
        width: unset
        height: unset

#amll-reason
    text-wrap: normal
    word-break: normal

    > *:first-child
        font-size: 14px

#amll-view
    @include pingfang-font
    font-size: 14px
    color: var(--amll-lyric-font-color, white)
    position: fixed
    left: 0
    top: 100vh
    width: 100%
    height: 100%
    overflow: hidden
    line-height: normal
    border-radius: 16px 16px 0 0
    z-index: 998
    transition: top 0.5s cubic-bezier(0.8, 0, 0.1, 1), border-radius 0.25s ease-in-out
    background: var(--colorFunction3)
    background: #333
    -webkit-backdrop-filter: blur(120px)
    backdrop-filter: blur(120px)
    svg path
        fill: var(--amll-lyric-primary-color, white)
#main-player, .m-pinfo
    transition: bottom 0.5s cubic-bezier(0.8, 0, 0.1, 1), opacity 0.25s ease-in-out

#root header, #page_pc_main_nav
    transition: opacity 0.25s 0.5s ease-in-out
    opacity: 1

body.amll-lyric-page-open
    #main-player
        bottom: 100%
        opacity: 0

    .m-pinfo
        bottom: 100%
        opacity: 0

    #root header
        transition: opacity 0.25s ease-in-out
        pointer-events: none
        opacity: 0

    footer
        bottom: 100%

        > * > * > *
            transition: opacity 0.25s ease-in-out
            opacity: 0

    #page_pc_main_nav
        pointer-events: none
        transition: opacity 0.25s ease-in-out
        opacity: 0

    #amll-view
        top: 0vh
        border-radius: 0 0 0 0

.am-music-progress-control
    display: flex
    flex-direction: column
    transition: margin-top 0.25s
    // margin-top: 1vh
    // @media screen and (max-height: 900px)
    margin-top: 1.5vh

.am-music-progress-tips
    display: flex
    // margin-top: 3px
    font-weight: 300
    opacity: 0.3
    align-items: center
    justify-content: center
    font-size: 0.55em
    letter-spacing: 0.8px
    @media screen and (max-height: 768px)
        // margin-top: 0.5vh

    > *
        flex: 0
        height: fit-content

        &:first-child
            flex: 1

        &:last-child
            flex: 1
            text-align: right
    .am-music-quality
        transform: translateY(1px)
