/* info hotspot product video */
.info-hotspot .info-hotspot-video-wrapper {

    position: relative;

    grid-area: media;

    padding-top: 56.25%;

    overflow: hidden;

}



.info-hotspot .info-hotspot-video-wrapper iframe {

    position: absolute;

    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

}



/* info hotspot video loading */
.info-hotspot .info-hotspot-video-loading-wrapper {

    grid-area: media;

    display: grid;
    gap: 0px;
    grid-template-columns: auto;
    grid-template-rows: 1fr 40px 50px 1fr;
    grid-template-areas:
        "."
        "text"
        "circle"
        ".";

    justify-self: center;
    align-self: center;

    opacity: 0.0;

    outline: none;
    box-shadow: none;

    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;

    pointer-events: none;

}



.info-hotspot .info-hotspot-video-loading-wrapper p {

    grid-area: text;
    justify-self: center;
    align-self: center;

}



/* loading circle */
.info-hotspot .info-hotspot-video-loading-wrapper .loading-circle {

    grid-area: circle;

    justify-self: center;
    align-self: center;

    border: 5px solid var(--background-grey);
    border-top: 5px solid var(--highlight-rgb);
    border-radius: 50%;

    width: 50px;
    height: 50px;

    animation: spin 2s linear infinite;
    animation-play-state: paused;

}



.info-hotspot.visible .info-hotspot-video-loading-wrapper.visible {

    opacity: 1.0;

}



.info-hotspot.visible .info-hotspot-video-loading-wrapper.visible .loading-circle {

    animation-play-state: running;

}