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

    .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);
    }

    .simp-playlist ul {
        border-top: 1px solid var(--wp--preset--color--border-color);
        scrollbar-width: thin;

        li {
            padding: 1rem;

            .simp-desc {
                display: block;
                font-size: var(--wp--preset--font-size--upper-heading);
                margin: 0;
            }

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

            .simp-source {
                font-size: var(--wp--preset--font-size--body-default);
                font-weight: var(--wp--custom--typography--font-weight--extra-bold);
                text-transform: capitalize;
                font-family: var(--wp--preset--font-family--nunito-sans);
            }
        }
    }
}

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

        &.simp-active {
            color: var(--wp--preset--color--hover-color);
            background-color: var(--wp--preset--color--secondary-bg-color);
        }

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

.wp-block-section:nth-child(odd) .simple-audio-player ul li.simp-active,
.wp-block-section:nth-child(odd) .simple-audio-player ul li:hover,
.wp-block-section:nth-child(odd) .simple-audio-player ul li:focus {
    background: var(--wp--preset--color--background);
}


.wp-block-section:nth-child(even) .simp-playlist,
.wp-block-section:nth-child(even) .simple-audio-player {
    background-color: var(--wp--preset--color--background);
}

.wp-block-section:nth-child(even) .simple-audio-player {
    ul li.simp-active {
        background-color: var(--wp--preset--color--dark-color);
    }
}

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

.simple-audio-player ul li:nth-child(odd) {
    background: transparent;
}

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

    .simple-audio-player .simp-controls button.simp-plause {
        align-items: center;
        border: 1px solid transparent;
        @include border(45px);
        bottom: 30px;
        display: flex;
        justify-content: center;
        height: 50px;
        right: 30px;
        position: absolute;
        width: 50px;

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

    .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 {
            display: grid;
            gap: 1rem;
            grid-template-columns: 80px 1fr;

            .simp-cover {
                margin: 0;

                div {
                    width: 100% !important;
                    height: 110px !important;
                }
            }

            .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--color-light);
            }

        }
    }
}

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

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

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

.playlist-section .simple-audio-player.playing .simp-controls button.simp-plause svg {
    fill: var(--wp--preset--color--hover-color);
}

.playlist-section .simple-audio-player.playing .simp-controls button.simp-plause {
    background-color: transparent;
    border-color: var(--wp--preset--color--hover-color);
}

.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--hover-color);
            cursor: pointer;
            position: absolute;
            right: 20px;
            top: 50%;
            @include transform(translateY(-50%));
            width: 0;
        }
    }
}

// Sticky Playlist

.sticky-playlist {
    background: var(--wp--preset--gradient--secondary-overlay-bg);
    margin-block-start: 0;


    .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%;

        .simp-plauseward {
            justify-content: space-between;
            flex-basis: 30%;
        }

        .simp-time {
            flex: 1;
            justify-content: flex-end;
            display: none;
        }

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

        .simp-tracker {
            left: 0;
            margin: 0;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 1;
        }

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

        .simp-volume {
            margin: 0;
            order: 1;
        }

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


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

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

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

        .simp-album {
            align-items: center;
            gap: 20px;
            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 {
            @include 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--hover-color);
                }
            }

            .simp-shide {
                align-items: center;
                @include flex;
                flex-direction: row;
                height: 42px;
                justify-content: center;
                width: 42px;

                .simp-shide-bottom {
                    position: relative;
                    height: 20px;

                    &:after {
                        background: url(./assets/images/playlist-icon.svg) no-repeat;
                        background-size: contain;
                        content: "";
                        height: 100%;
                        left: 50%;
                        position: absolute;
                        top: 0;
                        @include transform(translateX(-50%));
                        width: 100%;
                    }

                    svg {
                        display: none;
                    }
                }
            }

            button.simp-plause {
                border: 2px solid var(--wp--preset--color--color-light);
                @include flex;
                align-items: center;
                justify-content: center;
                @include border(45px);
                height: 42px;
                width: 42px;

                svg {
                    width: 12px;

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

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

/*Chrome*/
.player-section {
    .wp-block-rock-tune-playlist {
        input[type='range'] {
            height: 2px;
            @include border(5px);
            z-index: 0;
        }

        input[type='range']::-webkit-slider-runnable-track {
            -webkit-appearance: none;
            color: #13bba4;
            height: 2px;
            margin-top: -1px;
        }

        input[type='range']::-webkit-slider-thumb {
            -webkit-appearance: none;
            cursor: ew-resize;
            margin-top: -5px;
            background-color: var(--wp--preset--color--color-light);
            position: relative;
        }
    }
}

.simple-audio-player .simp-controls button {
    height: auto;
    padding: 11px;
    width: auto;
}

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

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

}

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

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

.simple-audio-player {
    @include border(0);
}