@use "../abstracts/mixins";
@use "../abstracts/variables";

.podcastPlayer{
    position: fixed;
    bottom: 3.5vw; left: 3.5vw;
    z-index: 15;
    width: 100px;
    height: 100px;

    @include mixins.respondTo('xs'){
        bottom: 10px; left: auto; right: 10px;
        transform: scale(0.7);
        transform-origin: bottom right;
    }

    &_bg{
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-image: url(../images/cabinet.svg);
        background-size: cover;
        animation: rotate 15s linear infinite;
    }

    &_progress{
        position: absolute;
        top: 15px; left: 15px; right: 15px; bottom: 15px;
        border: 1px solid variables.$cPrimary;
        border-radius: 50%;
        transition: background-color 0.2s linear;
    }

    &_progressBar{
        position: absolute;
        top: 14px; left: 14px; right: 14px; bottom: 14px;
        opacity: 0;
        transition: opacity 0.2s linear;

        &_bar{
            stroke-dashoffset: 214px;
            stroke: variables.$cPrimary;
            stroke-width: 3px;
            transition: stroke-dashoffset 1s linear;
        }
    }

    &_icon{
        position: absolute;
        z-index: 1;
        top: 50%; left: 53%;
        transform: translate(-50%, -50%);
        transition: opacity 0.2s linear;

        path,rect{
            stroke: variables.$cPrimary;
            transition: stroke 0.2s linear;
        }

        &_hover{
            opacity: 0;
            transition: opacity 0.2s linear;
        }
    }

    &_time{
        position: absolute;
        z-index: 1;
        top: 50%; left: 0; right: 0;
        height: 28px;
        margin-top: -14px;
        @include mixins.fontSize(12);
        line-height: 28px;
        text-align: center;
        color: variables.$cPrimary;
        // font-weight: 600;
        opacity: 0;
        transition: opacity 0.2s linear;
    }

    &_toggle{
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 5;
        border-radius: 50%;
        transition: 0.4s transform cubic-bezier(0.34, 1.56, 0.64, 1);

        &:active{
            transform: scale(0.8);
        }

        &:hover{
            .podcastPlayer_progress{
                background-color: variables.$cPrimary;
            }
            .podcastPlayer_icon{
                path, rect{
                    stroke: #FFF;
                }

                &_hover{
                    opacity: 1;
                }
            }
            .podcastPlayer_time{
                color: #FFF;
            }
            .podcastPlayer_progressBar_bar{
                stroke: #FFF;
            }
        }
    }

    &--playing{
        .podcastPlayer_icon{
            opacity: 0;
        }
        .podcastPlayer_time{
            opacity: 1;
        }
        .podcastPlayer_progressBar{
            opacity: 1;
        }
    }
}