@mixin blur-behind($level, $round)
    &:before
        content: ""
        position: absolute
        z-index: -1
        -webkit-backdrop-filter: blur($level)
        backdrop-filter: blur($level)
        border-radius: $round
        top: 0
        left: 0
        right: 0
        bottom: 0

@mixin pingfang-font()
    font-family: "SF Pro Display", "PingFang SC", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important

@mixin appkit-styles()
    .appkit-now-playing-slider
        cursor: pointer
        height: 8px

        &:hover
            .thumb
                visibility: visible

        .thumb
            height: 16px
            width: 6px
            margin-top: 2px
            border-radius: 4px
            box-shadow: 0 0 3px #0008
            background: var(--amll-lyric-primary-color, white)
            visibility: hidden
            transform: translateY(-6px)

        .track
            height: 8px
            border-radius: 4px
            background: #FFF7

            &.track-0
                background: var(--amll-lyric-primary-color, white)

    .appkit-slider
        height: 16px

        .thumb
            height: 20px
            width: 8px
            border-radius: 4px
            transform: translateY(-2px)
            background: var(--amll-lyric-primary-color, white)

        .track
            height: 4px
            border: 0.5px solid rgba(0, 0, 0, 0.02)
            box-shadow: 0px 0.25px 0.25px rgba(0, 0, 0, 0.15), 0px 1px 0.75px rgba(0, 0, 0, 0.05)
            transform: translateY(6px)
            border-radius: 2px
            background: rgba(0, 0, 0, 0.05)

            &.track-0
                background: #007AFF
    .appkit-button
        @include pingfang-font
        background: #6E6D70
        color: white
        border: 0.5px solid rgba(0, 0, 0, 0.12)
        box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5)
        border-radius: 6px
        font-size: 13px
        line-height: 16px
        font-weight: 500
        font-style: normal
        text-align: center
        min-width: 70px
        padding: 4px 14px
        cursor: pointer

        &:active
            background: #6E6D70
            color: #DFDEDF

            &.accent
                background: linear-gradient(180deg, #1568E5 0%, #155CCC 100%)
                box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.5), inset 0px 0.5px 0px rgba(255, 255, 255, 0.25)

        &.accent
            background: linear-gradient(180deg, #4B91F7 0%, #367AF6 100%)
            box-shadow: 0px 0.5px 1.5px rgba(54, 122, 246, 0.25)
            color: white

    .appkit-menu
        @include pingfang-font
        z-index: 999
        background: rgba(0, 0, 0, 0.2)
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5)
        border-radius: 6px
        max-height: 80vh
        width: fit-content
        pointer-events: none
        overflow-y: scroll

        &::-webkit-scrollbar
            display: none
        @include blur-behind(30px, 6px)

        > *
            border: 1px solid rgba(255, 255, 255, 0.3)
            padding: 5px 0
            border-radius: 6px
            cursor: default

        &.is-submenu
            position: fixed
        //     &.side-right
        //         margin-left: -6px
        //         left: 100%
        //     &.side-left
        //         margin-right: -6px
        //         right: 100%
        //     &.direction-down
        //         top: 0
        //         margin-top: -9px
        //     &.direction-up
        //         bottom: 0
        //         margin-bottom: -9px
        //     &.direction-center
        //         height: 80%
        &.hide
            visibility: hidden

        &.with-checkbox > *
            > .appkit-menu-item
                padding-left: 22px

                &.checked
                    background-image: url("data:image/svg+xml,%3Csvg width='13' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23prefix__filter0_d_416_340)'%3E%3Cpath d='M3 8l2.25 2.5L9.5 4' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='prefix__filter0_d_416_340' x='1.75' y='3.25' width='9' height='9' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='.5'/%3E%3CfeGaussianBlur stdDeviation='.25'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_416_340'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_416_340' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E")
                    background-repeat: no-repeat
                    background-position-y: center
                    background-position-x: 5px + 3px

            > .appkit-menu-item-devider
                margin-left: 11px

    .appkit-menu-item
        padding: 2px (9px + 5px)
        box-sizing: border-box
        display: block
        width: 100%
        text-align: left
        background: transparent
        border: none
        font-size: 13px
        line-height: 18px
        color: white
        font-style: normal
        font-weight: 400
        user-select: none
        cursor: default
        pointer-events: visibleFill

        &.has-submenu
            position: relative

        &.label-only
            opacity: 0.75

        &:hover
            &:not(.label-only)::before
                content: " "
                position: absolute
                z-index: -1
                width: calc(100% - 10px)
                left: 5px
                margin-top: -3px
                height: 18px + 5px
                background: #0A84FF
                border-radius: 4px
                pointer-events: none

    .appkit-menu-item-devider
        margin: 5px 9px
        height: 1px
        background: rgba(255, 255, 255, 0.3)

@include appkit-styles()
