.simple-audio-player {
    * {
        font-family: var(--wp--preset--font-family--poppins);
    }

    .simp-album {
        box-sizing: border-box;
        padding: 1.5rem 2rem;
    }

    .simp-artist {
        color: var(--wp--preset--color--color-light);
        font-size: var(--wp--preset--font-size--upper-heading);
        margin-top: 0
    }

    .simp-playlist ul {
        background-color: var(--wp--preset--color--primary);
        scrollbar-width: thin;
        margin: 0;

        li {
            padding: 1rem;
            background: var(--wp--preset--color--primary);
            color: var(--wp--preset--color--foreground);
            position: relative;
            opacity: .6;
            display: block;
            transition: all 0.4s;

            &:hover,
            &:focus {
                opacity: 1;
            }

            &:nth-child(even) {
                background: var(--wp--preset--color--secondary);
            }

            &.simp-active {
                opacity: 1;
            }

            .simp-desc {
                display: block;
                font-size: var(--wp--preset--font-size--extra-small);
                margin: 7px 0 0;
            }

            &:is(:hover, :focus) {
                color: var(--wp--preset--color--color-light);
            }

            .simp-source {
                font-size: var(--wp--preset--font-size--body-medium);
                font-weight: var(--wp--custom--typography--font-weight--bold);
                text-transform: capitalize;
            }
        }
    }
}

.wp-block-section .simple-audio-player {
    ul li {

        &.simp-active {
            color: var(--wp--preset--color--foreground);

            &:hover,
            &:focus {
                background-color: var(--wp--preset--color--background);

            }
        }

        &:is(:hover, :focus) {
            color: var(--wp--preset--color--foreground);
            background-color: var(--wp--preset--color--secondary);
        }
    }
}


.simp-playlist,
.simple-audio-player {
    background-color: var(--wp--preset--color--secondary-color);
}

.simple-audio-player ul li:nth-child(even) {
    background: var(--wp--preset--color--primary-color);
}

.playlist-section {
    .simp-player {
        position: relative;
    }

    .simp-controls {

        button:not(.simp-plause),
        >div:not(.simp-plauseward) {
            display: none;
        }
    }

    .simple-audio-player {
        max-width: 100%;

        .simp-playlist ul li {
            padding: 1.5rem 2rem;
        }

        .simp-album {
            align-items: center;
            display: grid;
            gap: 1rem;
            grid-template-columns: 60px 1fr;
            padding: 0;

            .simp-cover {
                margin: 0;

            }

            .simp-title {
                font-size: var(--wp--preset--font-size--inner-section-title);
                font-family: var(--wp--preset--font-family--nunito-sans);
                color: var(--wp--preset--color--foreground);
            }

        }
    }
}

.simple-audio-player svg {
    display: block;
    width: 28px;
}

.simple-audio-player .simp-controls button:not([disabled]):hover {
    background: transparent;
    color: var(--wp--preset--color--text-link);

    svg {
        fill: var(--wp--preset--color--text-link);
    }
}

.player-section {
    .wp-block-group.section-heading .wp-block-heading {
        margin: 0;
    }

    .wp-block-columns {

        .wp-block-embed {
            margin: 0;
        }
    }
}

.player-section .playing .simp-display {
    .simp-active {
        position: relative;

        &:after {
            content: "";
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 10px solid var(--wp--preset--color--text-link);
            cursor: pointer;
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
        }
    }
}

// Sticky Playlist
.block-editor-block-list__layout .block-editor-block-list__block.sticky-playlist {
    position: fixed;
}

.sticky-playlist {
    margin-block-start: 0;
    position: fixed;
    bottom: 0;
    width: 100% !important;
    z-index: 99;
    padding: 0 !important;

    &::before {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        content: '';
        background-color: var(--wp--preset--color--night-rider);
        opacity: 0.8;
        z-index: -1;
        transition: all 0.4s;
    }

    &.scrolled::before {
        opacity: 1;
        background-color: var(--wp--preset--color--night-rider);
    }


    .wp-block-rock-tune-playlist {
        max-width: var(--wp--style--global--wide-size);
        margin-inline: auto;
        padding: 15px;
        padding-inline: 0;
        position: relative;
    }


    .simple-audio-player {
        background-color: transparent;
        max-width: 100%;
        border-radius: 0;

        .simp-plauseward {
            justify-content: space-between;
            height: 100%;
        }

        .simp-time {
            flex: 1;
            justify-content: flex-end;
            display: none;
            padding-right: 28px;
        }

        .simp-others>button {
            display: none;
        }

        .simp-tracker {
            left: 0;
            margin: 0;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 1;
            display: none;
            height: 5px;
            overflow: hidden;
            padding-left: 28px;
        }

        s .simp-player>.simp-hide {
            display: none;
        }

        .simp-volume {
            margin: 0;
            height: 100%;
            display: none;
            border-left: 1px solid var(--wp--preset--color--border-color);
            padding: 0 28px;

            button {
                border: none;
                padding: 0;
                min-width: auto;

            }
        }


        ul li.simp-active {
            background-color: var(--wp--preset--color--background);
        }

        ul li:hover,
        ul li:focus {
            background-color: var(--wp--preset--color--border-color);
        }

        ul li.simp-active::before {
            position: absolute;
            left: 0;
            top: 0;
            width: 3px;
            height: 100%;
            content: '';
            background-color: var(--wp--preset--color--text-link);
        }


        .simp-playlist {
            max-height: 0;
        }

        .simp-playlist.simp-display {
            position: absolute;
            width: 100%;
            bottom: 100%;
            z-index: 9;
            max-height: 0;
            right: 0;

            &.simp-hide {
                max-height: 650px;
            }
        }

        .simp-album {
            align-items: center;
            gap: 15px;
            padding-bottom: 0;
            padding-left: 0;
            padding-top: 0;
            max-width: 350px;
            flex-wrap: nowrap;
        }

        .simp-cover {
            margin: 0;

            >div {
                background-size: contain !important;
            }
        }

        .simp-player {
            display: flex;
            justify-content: space-between;
        }

        .simp-controls {
            justify-content: flex-end;
            flex: 1;
            padding: 0;

            .simp-others .simp-active {
                background-color: transparent;

                svg {
                    fill: var(--wp--preset--color--text-link);
                }
            }

            .simp-shide {
                align-items: center;
                display: flex;
                flex-direction: row;
                height: 100%;
                justify-content: center;
                width: 60px;


                &.playlist-hidden {
                    .simp-shide-bottom {
                        &::after {
                            background: url(./assets/images/close-bold.svg) no-repeat;
                            background-size: contain;
                            background-position: center;
                            content: "";
                            height: 22px;
                            left: 50%;
                            position: absolute;
                            top: 50%;
                            transform: translate(-50%, -50%);
                            width: 22px;
                        }
                    }
                }

                .simp-shide-bottom {
                    position: relative;
                    height: 100%;
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-left: 1px solid var(--wp--preset--color--border-color);

                    svg {
                        width: 20px;
                        height: 20px;
                    }

                    &:after {
                        background: url(./assets/images/playlist-icon.svg) no-repeat;
                        background-size: contain;
                        content: "";
                        height: 20px;
                        left: 50%;
                        position: absolute;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        width: 20px;
                    }

                    svg {
                        display: none;
                    }
                }
            }

            button {
                height: 100%;
                border-radius: 0;
                border-left: 1px solid var(--wp--preset--color--border-color);
            }

            button.simp-prev,
            button.simp-next {
                display: none;
            }

            button.simp-plause {
                display: flex;
                align-items: center;
                justify-content: center;


                svg {
                    width: 18px;

                    &.pause-button {
                        width: 22px;
                    }
                }
            }
        }
    }
}

.sticky-playlist .simple-audio-player .simp-controls .simp-volume button {
    border: none;

    &:hover,
    &:focus {
        background: transparent !important;
    }
}

.simple-audio-player .simp-controls .simp-others {
    display: flex;
    height: 100%;
    margin: 0;
}

.simple-audio-player .simp-controls .simp-others .simp-shide button.simp-shide-top {
    display: none;
}

.simple-audio-player .simp-display {
    min-width: 22%;
}

/*Chrome*/
.player-section {
    .wp-block-fse-pro-playlist {
        input[type="range"] {
            /* removing default appearance */
            -webkit-appearance: none;
            appearance: none;
            /* creating a custom design */
            width: 100%;
            cursor: pointer;
            outline: none;
            /*  slider progress trick  */
            overflow: hidden;
            border-radius: 0;
            height: 5px;
            background-color: orange !important;
        }

        /* Track: webkit browsers */
        input[type="range"]::-webkit-slider-runnable-track {
            height: 15px;
            background: #2F3841;
            border-radius: 16px;
            color: #2F3841;
        }

        /* Track: Mozilla Firefox */
        input[type="range"]::-moz-range-track {
            height: 15px;
            background: #ccc;
            border-radius: 16px;
        }

        /* Thumb: webkit */
        input[type="range"]::-webkit-slider-thumb {
            /* removing default appearance */
            -webkit-appearance: none;
            appearance: none;
            /* creating a custom design */
            height: 15px;
            width: 15px;
            /*  slider progress trick  */
            box-shadow: -407px 0 0 400px var(--wp--preset--color--button-color);
        }


        /* Thumb: Firefox */
        input[type="range"]::-moz-range-thumb {
            height: 15px;
            width: 15px;
            /*  slider progress trick  */
            box-shadow: -407px 0 0 400px var(--wp--preset--color--button-color);
        }


    }
}

.simple-audio-player .simp-controls button {
    height: 100%;
    padding: 11px;
    width: 60px;

    &:hover,
    &:focus {
        background: var(--wp--preset--color--border-color) !important;
    }
}

.player-section .wp-block-rock-tune-playlist {

    /** FF*/
    input[type="range"]::-moz-range-progress {
        background-color: var(--wp--preset--color--text-link);
        height: 2px;
    }

}

.simp-mute .volume-up-button {
    display: block;
}

.sticky-playlist .player-section .playing .simp-active:after {
    display: none;
}

.wp-block-playlist {

    .wp-block-image {
        img {
            transition: all 0.4s;
        }

        a:hover,
        a:focus {
            img {
                opacity: 0.6;
            }
        }
    }

    .simple-audio-player {
        border-radius: 0;

        .simp-player {

            background-color: var(--wp--preset--color--secondary);

            .simp-display {
                border-bottom: 2px solid var(--wp--preset--color--background);
            }

            .simp-cover div {
                width: 60px !important;
                height: 60px !important;
            }

        }

        .simp-controls {

            button.simp-plause {
                height: 40px;
                padding: 0;
                width: 40px;
                border-radius: 50%;
                background-color: var(--wp--preset--color--button-color) !important;
                display: flex;
                align-items: center;
                justify-content: center;

                min-width: 40px;

                &:hover,
                &:focus {
                    svg {
                        fill: var(--wp--preset--color--color-light)
                    }
                }

                svg {
                    width: 20px;
                    height: 20px;

                }
            }

        }

        .simp-tracker,
        .simp-time,
        .simp-plext {
            display: block !important;
        }



    }

    ul li.simp-active {
        background-color: var(--wp--preset--color--background);
    }

    ul li:hover,
    ul li:focus {
        background-color: var(--wp--preset--color--border-color);
    }

    ul li.simp-active::before {
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 100%;
        content: '';
        background-color: var(--wp--preset--color--text-link);
    }

}

.simple-audio-player .simp-album .simp-title {
    font-weight: var(--wp--custom--typography--font-weight--semi-bold);
}