.embbededMediaPlayerWrapper {
    position: absolute;
    z-index: 300;

    right: 0;
    bottom: 0;

    margin: 50px;

    .cover {
        position: relative;
        z-index: 310;

        width: 100%;
        height: 200px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 10px;

        transition: all 0.3s ease-in-out;
    }

    .player {
        position: relative;
        z-index: 320;

        display: inline-flex;
        flex-direction: column;

        min-width: 250px;
        max-width: 250px;

        padding: 10px;
        padding-bottom: 40px;

        border-radius: 8px;

        background-color: var(--background-color-accent);

        align-items: flex-start;
        justify-content: center;

        // animate in from bottom to top
        animation: fadeIn 150ms ease-out forwards;

        transition: all 150ms ease-out;

        transform: translate(0, 20px);

        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);

        .header {
            display: flex;
            flex-direction: row;

            width: 100%;

            margin-bottom: 15px;

            .info {
                display: flex;
                flex-direction: column;

                h1,
                h2,
                h3,
                h4,
                h5,
                h6,
                p,
                span {
                    margin: 0;
                    color: var(--text-color);
                }

                .title {
                    font-size: 1rem;
                    font-weight: 600;
                    color: var(--text-color);

                    word-break: break-all;

                    font-family: "Space Grotesk", sans-serif;
                }

                .artist {
                    font-size: 0.6rem;
                    font-weight: 400;
                    color: var(--text-color);
                }
            }

            .indicators {
                position: fixed;
                right: 0;

                display: inline-flex;
                flex-direction: row;

                padding: 10px;

                justify-content: space-evenly;

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

                    color: var(--text-color);
                }
            }
        }

        .controls {
            display: inline-flex;

            align-items: center;
            justify-content: center;

            width: 100%;

            svg {
                color: var(--text-color);
                margin: 0 !important;
            }

            justify-content: space-evenly;

            .muteButton {
                svg {
                    font-size: 1rem;
                }
            }
        }
    }

    .status {
        position: relative;
        z-index: 330;

        display: flex;
        flex-direction: column;

        width: 100%;
        height: fit-content;

        padding: 10px;

        background-color: var(--background-color-accent);

        border-radius: 8px;

        // create box shadow only top of the player
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);

        .progress {
            width: 100%;
        }

        .timers {
            display: inline-flex;
            flex-direction: row;

            width: 100%;
            height: fit-content;

            justify-content: space-between;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        span {
            color: var(--text-color);
        }
    }
}

.ant-popover-inner-content {
    height: fit-content;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    .volumeSlider {
        height: 250px;
        padding-bottom: 10px;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}