@micromag/viewer 0.4.60 → 0.4.65

package/assets/css/styles.css

@@ -16,5 +16,5 @@
 .micromag-viewer-partials-arrow-hint-container.micromag-viewer-partials-arrow-hint-withoutShadow .micromag-viewer-partials-arrow-hint-inner:after{opacity:0}@media screen and (min-width:1024px){.micromag-viewer-partials-arrow-hint-container{display:none}}.micromag-viewer-partials-arrow-hint-inner:after{-webkit-animation-delay:.1s;animation-delay:.1s;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:micromag-viewer-partials-arrow-hint-shadowFade;animation-name:micromag-viewer-partials-arrow-hint-shadowFade;-webkit-animation-timing-function:"ease-out";animation-timing-function:"ease-out";-webkit-animation-timing-function:var(--mm-ease-in-out-soft-sine,"ease-out");animation-timing-function:var(--mm-ease-in-out-soft-sine,"ease-out");background-image:radial-gradient(rgba(28,28,28,.5),rgba(28,28,28,0) 50%);content:"";height:0;left:50%;padding-bottom:1000%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:1000%;z-index:1}.micromag-viewer-partials-arrow-hint-arrow{-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:micromag-viewer-partials-arrow-hint-panX;animation-name:micromag-viewer-partials-arrow-hint-panX;-webkit-animation-timing-function:"ease-out";animation-timing-function:"ease-out";-webkit-animation-timing-function:var(--mm-ease-in-out-soft-sine,"ease-out");animation-timing-function:var(--mm-ease-in-out-soft-sine,"ease-out");height:auto;position:relative;width:1.5rem;z-index:2}@-webkit-keyframes micromag-viewer-partials-arrow-hint-panX{0%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(-1rem);transform:translateX(-1rem)}}@keyframes micromag-viewer-partials-arrow-hint-panX{0%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(-1rem);transform:translateX(-1rem)}}@-webkit-keyframes micromag-viewer-partials-arrow-hint-shadowFade{0%{-webkit-transform:translate(-50%,-50%) translateY(0) scale(.75);transform:translate(-50%,-50%) translateY(0) scale(.75)}to{-webkit-transform:translate(-50%,-50%) translateX(-1rem) scale(1.25);transform:translate(-50%,-50%) translateX(-1rem) scale(1.25)}}@keyframes micromag-viewer-partials-arrow-hint-shadowFade{0%{-webkit-transform:translate(-50%,-50%) translateY(0) scale(.75);transform:translate(-50%,-50%) translateY(0) scale(.75)}to{-webkit-transform:translate(-50%,-50%) translateX(-1rem) scale(1.25);transform:translate(-50%,-50%) translateX(-1rem) scale(1.25)}}
 .micromag-viewer-partials-hand-tap-container .micromag-viewer-partials-hand-tap-circle{-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:micromag-viewer-partials-hand-tap-pulse;animation-name:micromag-viewer-partials-hand-tap-pulse;-webkit-animation-timing-function:linear;animation-timing-function:linear;border:1px solid #fff;border-radius:50%;height:21px;left:0;position:absolute;top:-10px;width:21px;z-index:2}.micromag-viewer-partials-hand-tap-container .micromag-viewer-partials-hand-tap-hand{-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:micromag-viewer-partials-hand-tap-panY;animation-name:micromag-viewer-partials-hand-tap-panY;-webkit-animation-timing-function:ease;animation-timing-function:ease;height:auto;position:relative;width:30px;z-index:2}.micromag-viewer-partials-hand-tap-container.micromag-viewer-partials-hand-tap-withoutShadow .micromag-viewer-partials-hand-tap-inner:after{opacity:0}@media screen and (min-width:1024px){.micromag-viewer-partials-hand-tap-container{display:none}}.micromag-viewer-partials-hand-tap-inner:after{-webkit-animation-delay:.05s;animation-delay:.05s;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:micromag-viewer-partials-hand-tap-shadowFade;animation-name:micromag-viewer-partials-hand-tap-shadowFade;-webkit-animation-timing-function:ease;animation-timing-function:ease;background-image:radial-gradient(rgba(28,28,28,.5),rgba(28,28,28,0) 60%);content:"";height:500%;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:600%;z-index:1}@-webkit-keyframes micromag-viewer-partials-hand-tap-pulse{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}50%{opacity:.5;-webkit-transform:scale(1.5);transform:scale(1.5)}to{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}@keyframes micromag-viewer-partials-hand-tap-pulse{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}50%{opacity:.5;-webkit-transform:scale(1.5);transform:scale(1.5)}to{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}@-webkit-keyframes micromag-viewer-partials-hand-tap-panY{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes micromag-viewer-partials-hand-tap-panY{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes micromag-viewer-partials-hand-tap-shadowFade{0%{-webkit-transform:translate(-50%,-50%) translateY(0);transform:translate(-50%,-50%) translateY(0)}to{-webkit-transform:translate(-50%,-50%) translateY(10px);transform:translate(-50%,-50%) translateY(10px)}}@keyframes micromag-viewer-partials-hand-tap-shadowFade{0%{-webkit-transform:translate(-50%,-50%) translateY(0);transform:translate(-50%,-50%) translateY(0)}to{-webkit-transform:translate(-50%,-50%) translateY(10px);transform:translate(-50%,-50%) translateY(10px)}}
 .micromag-viewer-partials-seek-bar-inner{position:relative;-ms-flex-positive:1;flex-grow:1}.micromag-viewer-partials-seek-bar-progressBarContainer{height:.16rem;position:relative}.micromag-viewer-partials-seek-bar-progressBar{background-color:#fff;background-color:var(--mm-white,#fff);height:100%;opacity:.5;position:absolute;width:100%}.micromag-viewer-partials-seek-bar-progress,.micromag-viewer-partials-seek-bar-track{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-viewer-partials-seek-bar-progress{background-color:#fff;background-color:var(--mm-white,#fff);position:relative;-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}.micromag-viewer-partials-seek-bar-playHead{background-color:#fff;background-color:var(--mm-white,#fff);border-radius:50%;height:.75rem;left:0;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%) scale(0);-ms-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0);-webkit-transition:-webkit-transform .5s "ease-out";transition:-webkit-transform .5s "ease-out";transition:transform .5s "ease-out";transition:transform .5s "ease-out",-webkit-transform .5s "ease-out";-webkit-transition:-webkit-transform .5s var(--mm-ease-in-bump,"ease-out");transition:-webkit-transform .5s var(--mm-ease-in-bump,"ease-out");transition:transform .5s var(--mm-ease-in-bump,"ease-out");transition:transform .5s var(--mm-ease-in-bump,"ease-out"),-webkit-transform .5s var(--mm-ease-in-bump,"ease-out");width:.75rem}@media (hover:hover){.micromag-viewer-partials-seek-bar-withSeekHead:hover .micromag-viewer-partials-seek-bar-playHead{-webkit-transform:translate(-50%,-50%) scale(1);-ms-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}}.micromag-viewer-partials-seek-bar-withSeekHead:focus-within .micromag-viewer-partials-seek-bar-playHead{-webkit-transform:translate(-50%,-50%) scale(1);-ms-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}.micromag-viewer-partials-seek-bar-scrubbedTime{background-color:#fff;background-color:var(--mm-white,#fff);border-radius:4px;border-style:solid;border-width:2px;bottom:100%;color:#000;color:var(--mm-black,#000);font-size:1.1rem;font-weight:700;left:50%;line-height:1;opacity:0;padding:.4rem .5rem .25rem;position:absolute;-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%);-webkit-transition:opacity .5s "ease-out",-webkit-transform .5s "ease-out";transition:opacity .5s "ease-out",-webkit-transform .5s "ease-out";transition:opacity .5s "ease-out",transform .5s "ease-out";transition:opacity .5s "ease-out",transform .5s "ease-out",-webkit-transform .5s "ease-out";-webkit-transition:opacity .5s var(--mm-ease-in-bump,"ease-out"),-webkit-transform .5s var(--mm-ease-in-bump,"ease-out");transition:opacity .5s var(--mm-ease-in-bump,"ease-out"),-webkit-transform .5s var(--mm-ease-in-bump,"ease-out");transition:opacity .5s var(--mm-ease-in-bump,"ease-out"),transform .5s var(--mm-ease-in-bump,"ease-out");transition:opacity .5s var(--mm-ease-in-bump,"ease-out"),transform .5s var(--mm-ease-in-bump,"ease-out"),-webkit-transform .5s var(--mm-ease-in-bump,"ease-out");z-index:2}.micromag-viewer-partials-seek-bar-showTimestamp .micromag-viewer-partials-seek-bar-scrubbedTime{opacity:1;-webkit-transform:translate(-50%,-.5rem);-ms-transform:translate(-50%,-.5rem);transform:translate(-50%,-.5rem)}.micromag-viewer-partials-seek-bar-track{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;height:5rem;left:0;padding:0;position:absolute;right:0;-ms-touch-action:none;touch-action:none;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.micromag-viewer-partials-seek-bar-withSeekHead .micromag-viewer-partials-seek-bar-track{display:block}.micromag-viewer-partials-seek-bar-track:focus-visible{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff)}
-.micromag-viewer-partials-playback-controls-container{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;pointer-events:none}.micromag-viewer-partials-playback-controls-muteButton,.micromag-viewer-partials-playback-controls-playPauseButton{display:inline-block;display:-ms-flexbox;display:flex;position:relative;z-index:2;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;font-family:inherit;justify-content:center;padding:1rem;pointer-events:auto;-webkit-transition:opacity .5s "ease-out";transition:opacity .5s "ease-out";-webkit-transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out");transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out")}.micromag-viewer-partials-playback-controls-icon{color:currentcolor;display:block;height:auto;max-height:1.5rem;position:relative;width:1.5rem;z-index:1}.micromag-viewer-partials-playback-controls-icon.micromag-viewer-partials-playback-controls-offset{left:.13rem}.micromag-viewer-partials-playback-controls-spinner{color:currentcolor;display:block;max-height:2rem;position:relative;width:2rem;z-index:1}.micromag-viewer-partials-playback-controls-spinner.micromag-viewer-partials-playback-controls-offset{left:-.5rem}.micromag-viewer-partials-playback-controls-playPauseButton{opacity:0;pointer-events:none;-webkit-transition:opacity .5s "ease-out";transition:opacity .5s "ease-out";-webkit-transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out");transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out")}.micromag-viewer-partials-playback-controls-withPlayPause .micromag-viewer-partials-playback-controls-playPauseButton,.micromag-viewer-partials-playback-controls-withSuggestPlay .micromag-viewer-partials-playback-controls-playPauseButton{opacity:1;pointer-events:auto}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-playPauseButton{opacity:.25}.micromag-viewer-partials-playback-controls-playPauseButton.micromag-viewer-partials-playback-controls-loading{opacity:1}.micromag-viewer-partials-playback-controls-playPauseButton.micromag-viewer-partials-playback-controls-hidden{opacity:0}.micromag-viewer-partials-playback-controls-playPauseButton:focus-visible{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff)}.micromag-viewer-partials-playback-controls-suggest{display:-ms-flexbox;display:flex;left:50%;position:fixed!important;top:50%;z-index:2;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:2px solid;border-radius:50%;color:inherit;cursor:pointer;font-family:inherit;justify-content:center;opacity:1;padding:1rem;pointer-events:auto;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:opacity .5s "ease-out";transition:opacity .5s "ease-out";-webkit-transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out");transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out")}.micromag-viewer-partials-playback-controls-suggest.micromag-viewer-partials-playback-controls-notPlaying svg{margin-left:2px}.micromag-viewer-partials-playback-controls-suggest.micromag-viewer-partials-playback-controls-loading{opacity:1}.micromag-viewer-partials-playback-controls-suggest.micromag-viewer-partials-playback-controls-hidden{opacity:0}.micromag-viewer-partials-playback-controls-muteButton{opacity:0;pointer-events:none}.micromag-viewer-partials-playback-controls-muteButton.micromag-viewer-partials-playback-controls-isMuted:after{background-color:currentcolor;content:"";height:100%;left:50%;margin-left:-1px;position:absolute;top:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);width:2px;z-index:2}.micromag-viewer-partials-playback-controls-withMute .micromag-viewer-partials-playback-controls-muteButton{opacity:1;pointer-events:auto}.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-muteButton{opacity:.25}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-isCollapsed.micromag-viewer-partials-playback-controls-isMuted .micromag-viewer-partials-playback-controls-muteButton{opacity:1}.micromag-viewer-partials-playback-controls-muteButton:focus-visible{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);outline:2px solid #000}.micromag-viewer-partials-playback-controls-seekBar{bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:bottom .2s "ease-out" .2s,padding .2s "ease-out",-webkit-transform .2s "ease-out";transition:bottom .2s "ease-out" .2s,padding .2s "ease-out",-webkit-transform .2s "ease-out";transition:transform .2s "ease-out",bottom .2s "ease-out" .2s,padding .2s "ease-out";transition:transform .2s "ease-out",bottom .2s "ease-out" .2s,padding .2s "ease-out",-webkit-transform .2s "ease-out";-webkit-transition:bottom .2s .2s var(--mm-ease-in-out-sine,"ease-out"),padding .2s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .2s var(--mm-ease-in-out-sine,"ease-out");transition:bottom .2s .2s var(--mm-ease-in-out-sine,"ease-out"),padding .2s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .2s var(--mm-ease-in-out-sine,"ease-out");transition:transform .2s var(--mm-ease-in-out-sine,"ease-out"),bottom .2s .2s var(--mm-ease-in-out-sine,"ease-out"),padding .2s var(--mm-ease-in-out-sine,"ease-out");transition:transform .2s var(--mm-ease-in-out-sine,"ease-out"),bottom .2s .2s var(--mm-ease-in-out-sine,"ease-out"),padding .2s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .2s var(--mm-ease-in-out-sine,"ease-out");width:100%;z-index:1}.micromag-viewer-partials-playback-controls-withSeekBarOnly .micromag-viewer-partials-playback-controls-seekBar{bottom:0;opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-withPlayPause .micromag-viewer-partials-playback-controls-seekBar{bottom:50%;opacity:1;padding:0 3rem;pointer-events:auto;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%)}.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-seekBar,.micromag-viewer-partials-playback-controls-isCollapsed.micromag-viewer-partials-playback-controls-withSeekBar .micromag-viewer-partials-playback-controls-seekBar{bottom:0;padding:0;-webkit-transition:bottom .5s "ease-out",padding .5s "ease-out" .25s,-webkit-transform .5s "ease-out";transition:bottom .5s "ease-out",padding .5s "ease-out" .25s,-webkit-transform .5s "ease-out";transition:transform .5s "ease-out",bottom .5s "ease-out",padding .5s "ease-out" .25s;transition:transform .5s "ease-out",bottom .5s "ease-out",padding .5s "ease-out" .25s,-webkit-transform .5s "ease-out";-webkit-transition:bottom .5s var(--mm-ease-in-out-sine,"ease-out"),padding .5s .25s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .5s var(--mm-ease-in-out-sine,"ease-out");transition:bottom .5s var(--mm-ease-in-out-sine,"ease-out"),padding .5s .25s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .5s var(--mm-ease-in-out-sine,"ease-out");transition:transform .5s var(--mm-ease-in-out-sine,"ease-out"),bottom .5s var(--mm-ease-in-out-sine,"ease-out"),padding .5s .25s var(--mm-ease-in-out-sine,"ease-out");transition:transform .5s var(--mm-ease-in-out-sine,"ease-out"),bottom .5s var(--mm-ease-in-out-sine,"ease-out"),padding .5s .25s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .5s var(--mm-ease-in-out-sine,"ease-out")}.micromag-viewer-partials-playback-controls-isCollapsed.micromag-viewer-partials-playback-controls-withSeekBar .micromag-viewer-partials-playback-controls-seekBar{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.micromag-viewer-partials-playback-controls-seekBar:focus-visible:focus-within{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff)}.micromag-viewer-partials-playback-controls-withMute .micromag-viewer-partials-playback-controls-muteButton{position:relative}.micromag-viewer-partials-playback-controls-withMute .micromag-viewer-partials-playback-controls-muteButton:before{background-color:transparent;background-image:radial-gradient(circle at bottom right,rgba(28,28,28,.3) 0,rgba(28,28,28,0) 50%);bottom:-10px;content:"";display:block;height:300%;pointer-events:none;position:absolute;right:-10px;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:300%;z-index:-1}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-muteButton:before{opacity:1}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-withSeekBar .micromag-viewer-partials-playback-controls-muteButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-muteButton:before{opacity:1}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-withoutShadow .micromag-viewer-partials-playback-controls-muteButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-withoutShadow .micromag-viewer-partials-playback-controls-muteButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withPlayPause .micromag-viewer-partials-playback-controls-playPauseButton{position:relative}.micromag-viewer-partials-playback-controls-withPlayPause .micromag-viewer-partials-playback-controls-playPauseButton:before{background-color:transparent;background-image:radial-gradient(circle at bottom left,rgba(28,28,28,.3) 0,rgba(28,28,28,0) 50%);bottom:-10px;content:"";display:block;height:300%;left:-10px;pointer-events:none;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:300%;z-index:-1}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-playPauseButton:before{opacity:.5}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-withSeekBar .micromag-viewer-partials-playback-controls-playPauseButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-playPauseButton:before{opacity:.5}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-withoutShadow .micromag-viewer-partials-playback-controls-playPauseButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-withoutShadow .micromag-viewer-partials-playback-controls-playPauseButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withSeekBar:after{background-image:-webkit-gradient(linear,left top,left bottom,color-stop(40%,rgba(28,28,28,0)),to(rgba(28,28,28,.4)));background-image:linear-gradient(180deg,rgba(28,28,28,0) 40%,rgba(28,28,28,.4));bottom:0;content:"";display:block;height:150px;left:0;pointer-events:none;position:absolute;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;width:100%;z-index:-1}.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-isCollapsed:after{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-withoutShadow:after{background-image:none}.micromag-viewer-partials-playback-controls-withSuggestPlay .micromag-viewer-partials-playback-controls-muteButton,.micromag-viewer-partials-playback-controls-withSuggestPlay .micromag-viewer-partials-playback-controls-playPauseButton,.micromag-viewer-partials-playback-controls-withSuggestPlay .micromag-viewer-partials-playback-controls-seekBar{opacity:.25!important}.micromag-viewer-partials-playback-controls-withSuggestPlay .micromag-viewer-partials-playback-controls-suggest{opacity:1}
+.micromag-viewer-partials-playback-controls-container{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;pointer-events:none}.micromag-viewer-partials-playback-controls-muteButton,.micromag-viewer-partials-playback-controls-playPauseButton{display:inline-block;display:-ms-flexbox;display:flex;position:relative;z-index:2;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;font-family:inherit;justify-content:center;padding:1rem;pointer-events:auto;-webkit-transition:opacity .5s "ease-out";transition:opacity .5s "ease-out";-webkit-transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out");transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out")}.micromag-viewer-partials-playback-controls-icon{color:currentcolor;display:block;height:auto;max-height:1.5rem;position:relative;width:1.5rem;z-index:1}.micromag-viewer-partials-playback-controls-icon.micromag-viewer-partials-playback-controls-offset{left:.13rem}.micromag-viewer-partials-playback-controls-spinner{color:currentcolor;display:block;max-height:2rem;position:relative;width:2rem;z-index:1}.micromag-viewer-partials-playback-controls-spinner.micromag-viewer-partials-playback-controls-offset{left:-.5rem}.micromag-viewer-partials-playback-controls-playPauseButton{opacity:0;pointer-events:none;-webkit-transition:opacity .5s "ease-out";transition:opacity .5s "ease-out";-webkit-transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out");transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out")}.micromag-viewer-partials-playback-controls-withPlayPause .micromag-viewer-partials-playback-controls-playPauseButton,.micromag-viewer-partials-playback-controls-withSuggestPlay .micromag-viewer-partials-playback-controls-playPauseButton{opacity:1;pointer-events:auto}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-playPauseButton{opacity:.25}.micromag-viewer-partials-playback-controls-playPauseButton.micromag-viewer-partials-playback-controls-loading{opacity:1}.micromag-viewer-partials-playback-controls-playPauseButton.micromag-viewer-partials-playback-controls-hidden{opacity:0}.micromag-viewer-partials-playback-controls-playPauseButton:focus-visible{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff)}.micromag-viewer-partials-playback-controls-suggest{display:-ms-flexbox;display:flex;left:50%;position:fixed!important;top:50%;z-index:2;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:2px solid;border-radius:50%;color:inherit;cursor:pointer;font-family:inherit;justify-content:center;opacity:1;padding:1rem;pointer-events:auto;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:opacity .5s "ease-out";transition:opacity .5s "ease-out";-webkit-transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out");transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out")}.micromag-viewer-partials-playback-controls-suggest.micromag-viewer-partials-playback-controls-notPlaying svg{margin-left:2px}.micromag-viewer-partials-playback-controls-suggest.micromag-viewer-partials-playback-controls-loading{opacity:1}.micromag-viewer-partials-playback-controls-muteButton,.micromag-viewer-partials-playback-controls-suggest.micromag-viewer-partials-playback-controls-hidden{opacity:0;pointer-events:none}.micromag-viewer-partials-playback-controls-muteButton.micromag-viewer-partials-playback-controls-isMuted:after{background-color:currentcolor;content:"";height:100%;left:50%;margin-left:-1px;position:absolute;top:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);width:2px;z-index:2}.micromag-viewer-partials-playback-controls-withMute .micromag-viewer-partials-playback-controls-muteButton{opacity:1;pointer-events:auto}.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-muteButton{opacity:.25}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-isCollapsed.micromag-viewer-partials-playback-controls-isMuted .micromag-viewer-partials-playback-controls-muteButton{opacity:1}.micromag-viewer-partials-playback-controls-muteButton:focus-visible{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);outline:2px solid #000}.micromag-viewer-partials-playback-controls-seekBar{bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:bottom .2s "ease-out" .2s,padding .2s "ease-out",-webkit-transform .2s "ease-out";transition:bottom .2s "ease-out" .2s,padding .2s "ease-out",-webkit-transform .2s "ease-out";transition:transform .2s "ease-out",bottom .2s "ease-out" .2s,padding .2s "ease-out";transition:transform .2s "ease-out",bottom .2s "ease-out" .2s,padding .2s "ease-out",-webkit-transform .2s "ease-out";-webkit-transition:bottom .2s .2s var(--mm-ease-in-out-sine,"ease-out"),padding .2s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .2s var(--mm-ease-in-out-sine,"ease-out");transition:bottom .2s .2s var(--mm-ease-in-out-sine,"ease-out"),padding .2s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .2s var(--mm-ease-in-out-sine,"ease-out");transition:transform .2s var(--mm-ease-in-out-sine,"ease-out"),bottom .2s .2s var(--mm-ease-in-out-sine,"ease-out"),padding .2s var(--mm-ease-in-out-sine,"ease-out");transition:transform .2s var(--mm-ease-in-out-sine,"ease-out"),bottom .2s .2s var(--mm-ease-in-out-sine,"ease-out"),padding .2s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .2s var(--mm-ease-in-out-sine,"ease-out");width:100%;z-index:1}.micromag-viewer-partials-playback-controls-withSeekBarOnly .micromag-viewer-partials-playback-controls-seekBar{bottom:0;opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-withPlayPause .micromag-viewer-partials-playback-controls-seekBar{bottom:50%;opacity:1;padding:0 3rem;pointer-events:auto;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%)}.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-seekBar,.micromag-viewer-partials-playback-controls-isCollapsed.micromag-viewer-partials-playback-controls-withSeekBar .micromag-viewer-partials-playback-controls-seekBar{bottom:0;padding:0;-webkit-transition:bottom .5s "ease-out",padding .5s "ease-out" .25s,-webkit-transform .5s "ease-out";transition:bottom .5s "ease-out",padding .5s "ease-out" .25s,-webkit-transform .5s "ease-out";transition:transform .5s "ease-out",bottom .5s "ease-out",padding .5s "ease-out" .25s;transition:transform .5s "ease-out",bottom .5s "ease-out",padding .5s "ease-out" .25s,-webkit-transform .5s "ease-out";-webkit-transition:bottom .5s var(--mm-ease-in-out-sine,"ease-out"),padding .5s .25s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .5s var(--mm-ease-in-out-sine,"ease-out");transition:bottom .5s var(--mm-ease-in-out-sine,"ease-out"),padding .5s .25s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .5s var(--mm-ease-in-out-sine,"ease-out");transition:transform .5s var(--mm-ease-in-out-sine,"ease-out"),bottom .5s var(--mm-ease-in-out-sine,"ease-out"),padding .5s .25s var(--mm-ease-in-out-sine,"ease-out");transition:transform .5s var(--mm-ease-in-out-sine,"ease-out"),bottom .5s var(--mm-ease-in-out-sine,"ease-out"),padding .5s .25s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .5s var(--mm-ease-in-out-sine,"ease-out")}.micromag-viewer-partials-playback-controls-isCollapsed.micromag-viewer-partials-playback-controls-withSeekBar .micromag-viewer-partials-playback-controls-seekBar{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.micromag-viewer-partials-playback-controls-seekBar:focus-visible:focus-within{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff)}.micromag-viewer-partials-playback-controls-withMute .micromag-viewer-partials-playback-controls-muteButton{position:relative}.micromag-viewer-partials-playback-controls-withMute .micromag-viewer-partials-playback-controls-muteButton:before{background-color:transparent;background-image:radial-gradient(circle at bottom right,rgba(28,28,28,.3) 0,rgba(28,28,28,0) 50%);bottom:-10px;content:"";display:block;height:300%;pointer-events:none;position:absolute;right:-10px;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:300%;z-index:-1}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-muteButton:before{opacity:1}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-withSeekBar .micromag-viewer-partials-playback-controls-muteButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-muteButton:before{opacity:1}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-withoutShadow .micromag-viewer-partials-playback-controls-muteButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-withoutShadow .micromag-viewer-partials-playback-controls-muteButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withPlayPause .micromag-viewer-partials-playback-controls-playPauseButton{position:relative}.micromag-viewer-partials-playback-controls-withPlayPause .micromag-viewer-partials-playback-controls-playPauseButton:before{background-color:transparent;background-image:radial-gradient(circle at bottom left,rgba(28,28,28,.3) 0,rgba(28,28,28,0) 50%);bottom:-10px;content:"";display:block;height:300%;left:-10px;pointer-events:none;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:300%;z-index:-1}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-playPauseButton:before{opacity:.5}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-withSeekBar .micromag-viewer-partials-playback-controls-playPauseButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-playPauseButton:before{opacity:.5}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-withoutShadow .micromag-viewer-partials-playback-controls-playPauseButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-withoutShadow .micromag-viewer-partials-playback-controls-playPauseButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withSeekBar:after{background-image:-webkit-gradient(linear,left top,left bottom,color-stop(40%,rgba(28,28,28,0)),to(rgba(28,28,28,.4)));background-image:linear-gradient(180deg,rgba(28,28,28,0) 40%,rgba(28,28,28,.4));bottom:0;content:"";display:block;height:150px;left:0;pointer-events:none;position:absolute;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;width:100%;z-index:-1}.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-isCollapsed:after{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-withoutShadow:after{background-image:none}.micromag-viewer-partials-playback-controls-withSuggestPlay .micromag-viewer-partials-playback-controls-muteButton,.micromag-viewer-partials-playback-controls-withSuggestPlay .micromag-viewer-partials-playback-controls-playPauseButton,.micromag-viewer-partials-playback-controls-withSuggestPlay .micromag-viewer-partials-playback-controls-seekBar{opacity:.25!important}.micromag-viewer-partials-playback-controls-withSuggestPlay .micromag-viewer-partials-playback-controls-suggest{opacity:1}
 .micromag-viewer-partials-web-view-container{height:100%;left:50%;position:absolute;top:0;-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);-webkit-transition:-webkit-transform .5s ease-in-out;transition:-webkit-transform .5s ease-in-out;transition:transform .5s ease-in-out;transition:transform .5s ease-in-out,-webkit-transform .5s ease-in-out;width:100%}.micromag-viewer-partials-web-view-container .micromag-viewer-partials-web-view-focusLock{height:100%;width:100%}.micromag-viewer-partials-web-view-container.micromag-viewer-partials-web-view-opened{-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%)}.micromag-viewer-partials-web-view-container.micromag-viewer-partials-web-view-opened .micromag-viewer-partials-web-view-webView{background-color:#343434;background-color:var(--mm-gray-800,#343434)}

package/es/index.js

@@ -2172,7 +2172,7 @@ function PlaybackControls(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     showLoading = _useState2[0],
     setShowLoading = _useState2[1];
-  var mediaUrl = mediaElement !== null ? mediaElement.src : null;
+  var mediaUrl = mediaElement !== null ? mediaElement.currentSrc || mediaElement.src : null;
   var mediaReady = useMediaReady(mediaElement, {
     id: mediaUrl
   });
@@ -2185,6 +2185,15 @@ function PlaybackControls(_ref) {
     buffering = _useMediaState.buffering,
     playing = _useMediaState.playing,
     muted = _useMediaState.muted;
+  console.log({
+    wantedPlaying: wantedPlaying,
+    wantedMuted: wantedMuted,
+    muted: muted,
+    playing: playing,
+    buffering: buffering,
+    showLoading: showLoading,
+    ready: ready
+  });
   useEffect(function () {
     var id = null;
     setShowLoading(false);
@@ -2195,7 +2204,9 @@ function PlaybackControls(_ref) {
     }
     return function () {
       setShowLoading(false);
-      clearTimeout(id);
+      if (id !== null) {
+        clearTimeout(id);
+      }
     };
   }, [ready, buffering, withLoading, setShowLoading]);
   var _useState3 = useState({
@@ -2280,7 +2291,8 @@ function PlaybackControls(_ref) {
     progressColor = _ref3.progressColor,
     seekBarOnly = _ref3.seekBarOnly;
   var isCollapsed = controls && !controlsVisible && playing || !controls && mediaHasAudio;
-  var playIcon = playing ? /*#__PURE__*/jsx(PauseIcon, {
+  var withSuggestPlay = controlsSuggestPlay && !finalShowLoading && !playing;
+  var playIcon = wantedPlaying ? /*#__PURE__*/jsx(PauseIcon, {
     className: styles$1.icon,
     color: "currentColor"
   }) : /*#__PURE__*/jsx(PlayIcon, {
@@ -2288,8 +2300,8 @@ function PlaybackControls(_ref) {
     color: "currentColor"
   });
   return /*#__PURE__*/jsxs("div", {
-    className: classNames([styles$1.container, className, isCollapsed ? collapsedClassName : null, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$1.withPlayPause, controls && !seekBarOnly), styles$1.withSuggestPlay, controlsSuggestPlay), styles$1.withMute, hasMedia || controls), styles$1.withSeekBar, controls), styles$1.withSeekBarOnly, seekBarOnly), styles$1.isCollapsed, isCollapsed), styles$1.withoutShadow, withoutShadow), styles$1.isMuted, muted)]),
-    children: [controlsSuggestPlay && !finalShowLoading ? /*#__PURE__*/jsx(Button$1, {
+    className: classNames([styles$1.container, className, isCollapsed ? collapsedClassName : null, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$1.withPlayPause, controls && !seekBarOnly), styles$1.withSuggestPlay, withSuggestPlay), styles$1.withMute, hasMedia || controls), styles$1.withSeekBar, controls), styles$1.withSeekBarOnly, seekBarOnly), styles$1.isCollapsed, isCollapsed), styles$1.withoutShadow, withoutShadow), styles$1.isMuted, muted)]),
+    children: [withSuggestPlay ? /*#__PURE__*/jsx(Button$1, {
       className: classNames([styles$1.suggest]),
       style: {
         color: color
@@ -2310,17 +2322,17 @@ function PlaybackControls(_ref) {
       }),
       withoutBootstrapStyles: true
     }) : null, /*#__PURE__*/jsx(Button$1, {
-      className: classNames([styles$1.playPauseButton, _defineProperty(_defineProperty({}, styles$1.hidden, controlsSuggestPlay && !controls), styles$1.loading, finalShowLoading)]),
+      className: classNames([styles$1.playPauseButton, _defineProperty(_defineProperty({}, styles$1.hidden, withSuggestPlay && !controls), styles$1.loading, finalShowLoading)]),
       style: {
         color: color
       },
-      onClick: playing ? onPause : onPlay,
-      focusable: controls && controlsVisible && (!seekBarOnly || !playing),
+      onClick: wantedPlaying ? onPause : onPlay,
+      focusable: controls && controlsVisible && (!seekBarOnly || !wantedPlaying),
       disabled: finalShowLoading,
       icon: finalShowLoading ? /*#__PURE__*/jsx(Spinner, {
         className: classNames([styles$1.spinner, styles$1.offset])
       }) : playIcon,
-      "aria-pressed": !playing,
+      "aria-pressed": !wantedPlaying,
       "aria-label": finalShowLoading ? intl.formatMessage({
         id: "YyYrXp",
         defaultMessage: [{

package/es/styles.css

@@ -16,5 +16,5 @@
 .micromag-viewer-partials-arrow-hint-container.micromag-viewer-partials-arrow-hint-withoutShadow .micromag-viewer-partials-arrow-hint-inner:after{opacity:0}@media screen and (min-width:1024px){.micromag-viewer-partials-arrow-hint-container{display:none}}.micromag-viewer-partials-arrow-hint-inner:after{-webkit-animation-delay:.1s;animation-delay:.1s;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:micromag-viewer-partials-arrow-hint-shadowFade;animation-name:micromag-viewer-partials-arrow-hint-shadowFade;-webkit-animation-timing-function:"ease-out";animation-timing-function:"ease-out";-webkit-animation-timing-function:var(--mm-ease-in-out-soft-sine,"ease-out");animation-timing-function:var(--mm-ease-in-out-soft-sine,"ease-out");background-image:radial-gradient(rgba(28,28,28,.5),rgba(28,28,28,0) 50%);content:"";height:0;left:50%;padding-bottom:1000%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:1000%;z-index:1}.micromag-viewer-partials-arrow-hint-arrow{-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:micromag-viewer-partials-arrow-hint-panX;animation-name:micromag-viewer-partials-arrow-hint-panX;-webkit-animation-timing-function:"ease-out";animation-timing-function:"ease-out";-webkit-animation-timing-function:var(--mm-ease-in-out-soft-sine,"ease-out");animation-timing-function:var(--mm-ease-in-out-soft-sine,"ease-out");height:auto;position:relative;width:1.5rem;z-index:2}@-webkit-keyframes micromag-viewer-partials-arrow-hint-panX{0%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(-1rem);transform:translateX(-1rem)}}@keyframes micromag-viewer-partials-arrow-hint-panX{0%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(-1rem);transform:translateX(-1rem)}}@-webkit-keyframes micromag-viewer-partials-arrow-hint-shadowFade{0%{-webkit-transform:translate(-50%,-50%) translateY(0) scale(.75);transform:translate(-50%,-50%) translateY(0) scale(.75)}to{-webkit-transform:translate(-50%,-50%) translateX(-1rem) scale(1.25);transform:translate(-50%,-50%) translateX(-1rem) scale(1.25)}}@keyframes micromag-viewer-partials-arrow-hint-shadowFade{0%{-webkit-transform:translate(-50%,-50%) translateY(0) scale(.75);transform:translate(-50%,-50%) translateY(0) scale(.75)}to{-webkit-transform:translate(-50%,-50%) translateX(-1rem) scale(1.25);transform:translate(-50%,-50%) translateX(-1rem) scale(1.25)}}
 .micromag-viewer-partials-hand-tap-container .micromag-viewer-partials-hand-tap-circle{-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:micromag-viewer-partials-hand-tap-pulse;animation-name:micromag-viewer-partials-hand-tap-pulse;-webkit-animation-timing-function:linear;animation-timing-function:linear;border:1px solid #fff;border-radius:50%;height:21px;left:0;position:absolute;top:-10px;width:21px;z-index:2}.micromag-viewer-partials-hand-tap-container .micromag-viewer-partials-hand-tap-hand{-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:micromag-viewer-partials-hand-tap-panY;animation-name:micromag-viewer-partials-hand-tap-panY;-webkit-animation-timing-function:ease;animation-timing-function:ease;height:auto;position:relative;width:30px;z-index:2}.micromag-viewer-partials-hand-tap-container.micromag-viewer-partials-hand-tap-withoutShadow .micromag-viewer-partials-hand-tap-inner:after{opacity:0}@media screen and (min-width:1024px){.micromag-viewer-partials-hand-tap-container{display:none}}.micromag-viewer-partials-hand-tap-inner:after{-webkit-animation-delay:.05s;animation-delay:.05s;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:micromag-viewer-partials-hand-tap-shadowFade;animation-name:micromag-viewer-partials-hand-tap-shadowFade;-webkit-animation-timing-function:ease;animation-timing-function:ease;background-image:radial-gradient(rgba(28,28,28,.5),rgba(28,28,28,0) 60%);content:"";height:500%;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:600%;z-index:1}@-webkit-keyframes micromag-viewer-partials-hand-tap-pulse{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}50%{opacity:.5;-webkit-transform:scale(1.5);transform:scale(1.5)}to{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}@keyframes micromag-viewer-partials-hand-tap-pulse{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}50%{opacity:.5;-webkit-transform:scale(1.5);transform:scale(1.5)}to{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}@-webkit-keyframes micromag-viewer-partials-hand-tap-panY{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes micromag-viewer-partials-hand-tap-panY{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes micromag-viewer-partials-hand-tap-shadowFade{0%{-webkit-transform:translate(-50%,-50%) translateY(0);transform:translate(-50%,-50%) translateY(0)}to{-webkit-transform:translate(-50%,-50%) translateY(10px);transform:translate(-50%,-50%) translateY(10px)}}@keyframes micromag-viewer-partials-hand-tap-shadowFade{0%{-webkit-transform:translate(-50%,-50%) translateY(0);transform:translate(-50%,-50%) translateY(0)}to{-webkit-transform:translate(-50%,-50%) translateY(10px);transform:translate(-50%,-50%) translateY(10px)}}
 .micromag-viewer-partials-seek-bar-inner{position:relative;-ms-flex-positive:1;flex-grow:1}.micromag-viewer-partials-seek-bar-progressBarContainer{height:.16rem;position:relative}.micromag-viewer-partials-seek-bar-progressBar{background-color:#fff;background-color:var(--mm-white,#fff);height:100%;opacity:.5;position:absolute;width:100%}.micromag-viewer-partials-seek-bar-progress,.micromag-viewer-partials-seek-bar-track{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-viewer-partials-seek-bar-progress{background-color:#fff;background-color:var(--mm-white,#fff);position:relative;-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}.micromag-viewer-partials-seek-bar-playHead{background-color:#fff;background-color:var(--mm-white,#fff);border-radius:50%;height:.75rem;left:0;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%) scale(0);-ms-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0);-webkit-transition:-webkit-transform .5s "ease-out";transition:-webkit-transform .5s "ease-out";transition:transform .5s "ease-out";transition:transform .5s "ease-out",-webkit-transform .5s "ease-out";-webkit-transition:-webkit-transform .5s var(--mm-ease-in-bump,"ease-out");transition:-webkit-transform .5s var(--mm-ease-in-bump,"ease-out");transition:transform .5s var(--mm-ease-in-bump,"ease-out");transition:transform .5s var(--mm-ease-in-bump,"ease-out"),-webkit-transform .5s var(--mm-ease-in-bump,"ease-out");width:.75rem}@media (hover:hover){.micromag-viewer-partials-seek-bar-withSeekHead:hover .micromag-viewer-partials-seek-bar-playHead{-webkit-transform:translate(-50%,-50%) scale(1);-ms-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}}.micromag-viewer-partials-seek-bar-withSeekHead:focus-within .micromag-viewer-partials-seek-bar-playHead{-webkit-transform:translate(-50%,-50%) scale(1);-ms-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}.micromag-viewer-partials-seek-bar-scrubbedTime{background-color:#fff;background-color:var(--mm-white,#fff);border-radius:4px;border-style:solid;border-width:2px;bottom:100%;color:#000;color:var(--mm-black,#000);font-size:1.1rem;font-weight:700;left:50%;line-height:1;opacity:0;padding:.4rem .5rem .25rem;position:absolute;-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%);-webkit-transition:opacity .5s "ease-out",-webkit-transform .5s "ease-out";transition:opacity .5s "ease-out",-webkit-transform .5s "ease-out";transition:opacity .5s "ease-out",transform .5s "ease-out";transition:opacity .5s "ease-out",transform .5s "ease-out",-webkit-transform .5s "ease-out";-webkit-transition:opacity .5s var(--mm-ease-in-bump,"ease-out"),-webkit-transform .5s var(--mm-ease-in-bump,"ease-out");transition:opacity .5s var(--mm-ease-in-bump,"ease-out"),-webkit-transform .5s var(--mm-ease-in-bump,"ease-out");transition:opacity .5s var(--mm-ease-in-bump,"ease-out"),transform .5s var(--mm-ease-in-bump,"ease-out");transition:opacity .5s var(--mm-ease-in-bump,"ease-out"),transform .5s var(--mm-ease-in-bump,"ease-out"),-webkit-transform .5s var(--mm-ease-in-bump,"ease-out");z-index:2}.micromag-viewer-partials-seek-bar-showTimestamp .micromag-viewer-partials-seek-bar-scrubbedTime{opacity:1;-webkit-transform:translate(-50%,-.5rem);-ms-transform:translate(-50%,-.5rem);transform:translate(-50%,-.5rem)}.micromag-viewer-partials-seek-bar-track{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;height:5rem;left:0;padding:0;position:absolute;right:0;-ms-touch-action:none;touch-action:none;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.micromag-viewer-partials-seek-bar-withSeekHead .micromag-viewer-partials-seek-bar-track{display:block}.micromag-viewer-partials-seek-bar-track:focus-visible{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff)}
-.micromag-viewer-partials-playback-controls-container{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;pointer-events:none}.micromag-viewer-partials-playback-controls-muteButton,.micromag-viewer-partials-playback-controls-playPauseButton{display:inline-block;display:-ms-flexbox;display:flex;position:relative;z-index:2;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;font-family:inherit;justify-content:center;padding:1rem;pointer-events:auto;-webkit-transition:opacity .5s "ease-out";transition:opacity .5s "ease-out";-webkit-transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out");transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out")}.micromag-viewer-partials-playback-controls-icon{color:currentcolor;display:block;height:auto;max-height:1.5rem;position:relative;width:1.5rem;z-index:1}.micromag-viewer-partials-playback-controls-icon.micromag-viewer-partials-playback-controls-offset{left:.13rem}.micromag-viewer-partials-playback-controls-spinner{color:currentcolor;display:block;max-height:2rem;position:relative;width:2rem;z-index:1}.micromag-viewer-partials-playback-controls-spinner.micromag-viewer-partials-playback-controls-offset{left:-.5rem}.micromag-viewer-partials-playback-controls-playPauseButton{opacity:0;pointer-events:none;-webkit-transition:opacity .5s "ease-out";transition:opacity .5s "ease-out";-webkit-transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out");transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out")}.micromag-viewer-partials-playback-controls-withPlayPause .micromag-viewer-partials-playback-controls-playPauseButton,.micromag-viewer-partials-playback-controls-withSuggestPlay .micromag-viewer-partials-playback-controls-playPauseButton{opacity:1;pointer-events:auto}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-playPauseButton{opacity:.25}.micromag-viewer-partials-playback-controls-playPauseButton.micromag-viewer-partials-playback-controls-loading{opacity:1}.micromag-viewer-partials-playback-controls-playPauseButton.micromag-viewer-partials-playback-controls-hidden{opacity:0}.micromag-viewer-partials-playback-controls-playPauseButton:focus-visible{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff)}.micromag-viewer-partials-playback-controls-suggest{display:-ms-flexbox;display:flex;left:50%;position:fixed!important;top:50%;z-index:2;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:2px solid;border-radius:50%;color:inherit;cursor:pointer;font-family:inherit;justify-content:center;opacity:1;padding:1rem;pointer-events:auto;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:opacity .5s "ease-out";transition:opacity .5s "ease-out";-webkit-transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out");transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out")}.micromag-viewer-partials-playback-controls-suggest.micromag-viewer-partials-playback-controls-notPlaying svg{margin-left:2px}.micromag-viewer-partials-playback-controls-suggest.micromag-viewer-partials-playback-controls-loading{opacity:1}.micromag-viewer-partials-playback-controls-suggest.micromag-viewer-partials-playback-controls-hidden{opacity:0}.micromag-viewer-partials-playback-controls-muteButton{opacity:0;pointer-events:none}.micromag-viewer-partials-playback-controls-muteButton.micromag-viewer-partials-playback-controls-isMuted:after{background-color:currentcolor;content:"";height:100%;left:50%;margin-left:-1px;position:absolute;top:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);width:2px;z-index:2}.micromag-viewer-partials-playback-controls-withMute .micromag-viewer-partials-playback-controls-muteButton{opacity:1;pointer-events:auto}.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-muteButton{opacity:.25}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-isCollapsed.micromag-viewer-partials-playback-controls-isMuted .micromag-viewer-partials-playback-controls-muteButton{opacity:1}.micromag-viewer-partials-playback-controls-muteButton:focus-visible{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);outline:2px solid #000}.micromag-viewer-partials-playback-controls-seekBar{bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:bottom .2s "ease-out" .2s,padding .2s "ease-out",-webkit-transform .2s "ease-out";transition:bottom .2s "ease-out" .2s,padding .2s "ease-out",-webkit-transform .2s "ease-out";transition:transform .2s "ease-out",bottom .2s "ease-out" .2s,padding .2s "ease-out";transition:transform .2s "ease-out",bottom .2s "ease-out" .2s,padding .2s "ease-out",-webkit-transform .2s "ease-out";-webkit-transition:bottom .2s .2s var(--mm-ease-in-out-sine,"ease-out"),padding .2s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .2s var(--mm-ease-in-out-sine,"ease-out");transition:bottom .2s .2s var(--mm-ease-in-out-sine,"ease-out"),padding .2s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .2s var(--mm-ease-in-out-sine,"ease-out");transition:transform .2s var(--mm-ease-in-out-sine,"ease-out"),bottom .2s .2s var(--mm-ease-in-out-sine,"ease-out"),padding .2s var(--mm-ease-in-out-sine,"ease-out");transition:transform .2s var(--mm-ease-in-out-sine,"ease-out"),bottom .2s .2s var(--mm-ease-in-out-sine,"ease-out"),padding .2s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .2s var(--mm-ease-in-out-sine,"ease-out");width:100%;z-index:1}.micromag-viewer-partials-playback-controls-withSeekBarOnly .micromag-viewer-partials-playback-controls-seekBar{bottom:0;opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-withPlayPause .micromag-viewer-partials-playback-controls-seekBar{bottom:50%;opacity:1;padding:0 3rem;pointer-events:auto;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%)}.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-seekBar,.micromag-viewer-partials-playback-controls-isCollapsed.micromag-viewer-partials-playback-controls-withSeekBar .micromag-viewer-partials-playback-controls-seekBar{bottom:0;padding:0;-webkit-transition:bottom .5s "ease-out",padding .5s "ease-out" .25s,-webkit-transform .5s "ease-out";transition:bottom .5s "ease-out",padding .5s "ease-out" .25s,-webkit-transform .5s "ease-out";transition:transform .5s "ease-out",bottom .5s "ease-out",padding .5s "ease-out" .25s;transition:transform .5s "ease-out",bottom .5s "ease-out",padding .5s "ease-out" .25s,-webkit-transform .5s "ease-out";-webkit-transition:bottom .5s var(--mm-ease-in-out-sine,"ease-out"),padding .5s .25s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .5s var(--mm-ease-in-out-sine,"ease-out");transition:bottom .5s var(--mm-ease-in-out-sine,"ease-out"),padding .5s .25s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .5s var(--mm-ease-in-out-sine,"ease-out");transition:transform .5s var(--mm-ease-in-out-sine,"ease-out"),bottom .5s var(--mm-ease-in-out-sine,"ease-out"),padding .5s .25s var(--mm-ease-in-out-sine,"ease-out");transition:transform .5s var(--mm-ease-in-out-sine,"ease-out"),bottom .5s var(--mm-ease-in-out-sine,"ease-out"),padding .5s .25s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .5s var(--mm-ease-in-out-sine,"ease-out")}.micromag-viewer-partials-playback-controls-isCollapsed.micromag-viewer-partials-playback-controls-withSeekBar .micromag-viewer-partials-playback-controls-seekBar{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.micromag-viewer-partials-playback-controls-seekBar:focus-visible:focus-within{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff)}.micromag-viewer-partials-playback-controls-withMute .micromag-viewer-partials-playback-controls-muteButton{position:relative}.micromag-viewer-partials-playback-controls-withMute .micromag-viewer-partials-playback-controls-muteButton:before{background-color:transparent;background-image:radial-gradient(circle at bottom right,rgba(28,28,28,.3) 0,rgba(28,28,28,0) 50%);bottom:-10px;content:"";display:block;height:300%;pointer-events:none;position:absolute;right:-10px;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:300%;z-index:-1}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-muteButton:before{opacity:1}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-withSeekBar .micromag-viewer-partials-playback-controls-muteButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-muteButton:before{opacity:1}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-withoutShadow .micromag-viewer-partials-playback-controls-muteButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-withoutShadow .micromag-viewer-partials-playback-controls-muteButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withPlayPause .micromag-viewer-partials-playback-controls-playPauseButton{position:relative}.micromag-viewer-partials-playback-controls-withPlayPause .micromag-viewer-partials-playback-controls-playPauseButton:before{background-color:transparent;background-image:radial-gradient(circle at bottom left,rgba(28,28,28,.3) 0,rgba(28,28,28,0) 50%);bottom:-10px;content:"";display:block;height:300%;left:-10px;pointer-events:none;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:300%;z-index:-1}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-playPauseButton:before{opacity:.5}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-withSeekBar .micromag-viewer-partials-playback-controls-playPauseButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-playPauseButton:before{opacity:.5}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-withoutShadow .micromag-viewer-partials-playback-controls-playPauseButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-withoutShadow .micromag-viewer-partials-playback-controls-playPauseButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withSeekBar:after{background-image:-webkit-gradient(linear,left top,left bottom,color-stop(40%,rgba(28,28,28,0)),to(rgba(28,28,28,.4)));background-image:linear-gradient(180deg,rgba(28,28,28,0) 40%,rgba(28,28,28,.4));bottom:0;content:"";display:block;height:150px;left:0;pointer-events:none;position:absolute;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;width:100%;z-index:-1}.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-isCollapsed:after{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-withoutShadow:after{background-image:none}.micromag-viewer-partials-playback-controls-withSuggestPlay .micromag-viewer-partials-playback-controls-muteButton,.micromag-viewer-partials-playback-controls-withSuggestPlay .micromag-viewer-partials-playback-controls-playPauseButton,.micromag-viewer-partials-playback-controls-withSuggestPlay .micromag-viewer-partials-playback-controls-seekBar{opacity:.25!important}.micromag-viewer-partials-playback-controls-withSuggestPlay .micromag-viewer-partials-playback-controls-suggest{opacity:1}
+.micromag-viewer-partials-playback-controls-container{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;pointer-events:none}.micromag-viewer-partials-playback-controls-muteButton,.micromag-viewer-partials-playback-controls-playPauseButton{display:inline-block;display:-ms-flexbox;display:flex;position:relative;z-index:2;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;font-family:inherit;justify-content:center;padding:1rem;pointer-events:auto;-webkit-transition:opacity .5s "ease-out";transition:opacity .5s "ease-out";-webkit-transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out");transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out")}.micromag-viewer-partials-playback-controls-icon{color:currentcolor;display:block;height:auto;max-height:1.5rem;position:relative;width:1.5rem;z-index:1}.micromag-viewer-partials-playback-controls-icon.micromag-viewer-partials-playback-controls-offset{left:.13rem}.micromag-viewer-partials-playback-controls-spinner{color:currentcolor;display:block;max-height:2rem;position:relative;width:2rem;z-index:1}.micromag-viewer-partials-playback-controls-spinner.micromag-viewer-partials-playback-controls-offset{left:-.5rem}.micromag-viewer-partials-playback-controls-playPauseButton{opacity:0;pointer-events:none;-webkit-transition:opacity .5s "ease-out";transition:opacity .5s "ease-out";-webkit-transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out");transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out")}.micromag-viewer-partials-playback-controls-withPlayPause .micromag-viewer-partials-playback-controls-playPauseButton,.micromag-viewer-partials-playback-controls-withSuggestPlay .micromag-viewer-partials-playback-controls-playPauseButton{opacity:1;pointer-events:auto}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-playPauseButton{opacity:.25}.micromag-viewer-partials-playback-controls-playPauseButton.micromag-viewer-partials-playback-controls-loading{opacity:1}.micromag-viewer-partials-playback-controls-playPauseButton.micromag-viewer-partials-playback-controls-hidden{opacity:0}.micromag-viewer-partials-playback-controls-playPauseButton:focus-visible{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff)}.micromag-viewer-partials-playback-controls-suggest{display:-ms-flexbox;display:flex;left:50%;position:fixed!important;top:50%;z-index:2;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:2px solid;border-radius:50%;color:inherit;cursor:pointer;font-family:inherit;justify-content:center;opacity:1;padding:1rem;pointer-events:auto;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:opacity .5s "ease-out";transition:opacity .5s "ease-out";-webkit-transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out");transition:opacity .5s var(--mm-ease-in-out-sine,"ease-out")}.micromag-viewer-partials-playback-controls-suggest.micromag-viewer-partials-playback-controls-notPlaying svg{margin-left:2px}.micromag-viewer-partials-playback-controls-suggest.micromag-viewer-partials-playback-controls-loading{opacity:1}.micromag-viewer-partials-playback-controls-muteButton,.micromag-viewer-partials-playback-controls-suggest.micromag-viewer-partials-playback-controls-hidden{opacity:0;pointer-events:none}.micromag-viewer-partials-playback-controls-muteButton.micromag-viewer-partials-playback-controls-isMuted:after{background-color:currentcolor;content:"";height:100%;left:50%;margin-left:-1px;position:absolute;top:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);width:2px;z-index:2}.micromag-viewer-partials-playback-controls-withMute .micromag-viewer-partials-playback-controls-muteButton{opacity:1;pointer-events:auto}.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-muteButton{opacity:.25}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-isCollapsed.micromag-viewer-partials-playback-controls-isMuted .micromag-viewer-partials-playback-controls-muteButton{opacity:1}.micromag-viewer-partials-playback-controls-muteButton:focus-visible{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);outline:2px solid #000}.micromag-viewer-partials-playback-controls-seekBar{bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:bottom .2s "ease-out" .2s,padding .2s "ease-out",-webkit-transform .2s "ease-out";transition:bottom .2s "ease-out" .2s,padding .2s "ease-out",-webkit-transform .2s "ease-out";transition:transform .2s "ease-out",bottom .2s "ease-out" .2s,padding .2s "ease-out";transition:transform .2s "ease-out",bottom .2s "ease-out" .2s,padding .2s "ease-out",-webkit-transform .2s "ease-out";-webkit-transition:bottom .2s .2s var(--mm-ease-in-out-sine,"ease-out"),padding .2s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .2s var(--mm-ease-in-out-sine,"ease-out");transition:bottom .2s .2s var(--mm-ease-in-out-sine,"ease-out"),padding .2s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .2s var(--mm-ease-in-out-sine,"ease-out");transition:transform .2s var(--mm-ease-in-out-sine,"ease-out"),bottom .2s .2s var(--mm-ease-in-out-sine,"ease-out"),padding .2s var(--mm-ease-in-out-sine,"ease-out");transition:transform .2s var(--mm-ease-in-out-sine,"ease-out"),bottom .2s .2s var(--mm-ease-in-out-sine,"ease-out"),padding .2s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .2s var(--mm-ease-in-out-sine,"ease-out");width:100%;z-index:1}.micromag-viewer-partials-playback-controls-withSeekBarOnly .micromag-viewer-partials-playback-controls-seekBar{bottom:0;opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-withPlayPause .micromag-viewer-partials-playback-controls-seekBar{bottom:50%;opacity:1;padding:0 3rem;pointer-events:auto;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%)}.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-seekBar,.micromag-viewer-partials-playback-controls-isCollapsed.micromag-viewer-partials-playback-controls-withSeekBar .micromag-viewer-partials-playback-controls-seekBar{bottom:0;padding:0;-webkit-transition:bottom .5s "ease-out",padding .5s "ease-out" .25s,-webkit-transform .5s "ease-out";transition:bottom .5s "ease-out",padding .5s "ease-out" .25s,-webkit-transform .5s "ease-out";transition:transform .5s "ease-out",bottom .5s "ease-out",padding .5s "ease-out" .25s;transition:transform .5s "ease-out",bottom .5s "ease-out",padding .5s "ease-out" .25s,-webkit-transform .5s "ease-out";-webkit-transition:bottom .5s var(--mm-ease-in-out-sine,"ease-out"),padding .5s .25s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .5s var(--mm-ease-in-out-sine,"ease-out");transition:bottom .5s var(--mm-ease-in-out-sine,"ease-out"),padding .5s .25s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .5s var(--mm-ease-in-out-sine,"ease-out");transition:transform .5s var(--mm-ease-in-out-sine,"ease-out"),bottom .5s var(--mm-ease-in-out-sine,"ease-out"),padding .5s .25s var(--mm-ease-in-out-sine,"ease-out");transition:transform .5s var(--mm-ease-in-out-sine,"ease-out"),bottom .5s var(--mm-ease-in-out-sine,"ease-out"),padding .5s .25s var(--mm-ease-in-out-sine,"ease-out"),-webkit-transform .5s var(--mm-ease-in-out-sine,"ease-out")}.micromag-viewer-partials-playback-controls-isCollapsed.micromag-viewer-partials-playback-controls-withSeekBar .micromag-viewer-partials-playback-controls-seekBar{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.micromag-viewer-partials-playback-controls-seekBar:focus-visible:focus-within{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff)}.micromag-viewer-partials-playback-controls-withMute .micromag-viewer-partials-playback-controls-muteButton{position:relative}.micromag-viewer-partials-playback-controls-withMute .micromag-viewer-partials-playback-controls-muteButton:before{background-color:transparent;background-image:radial-gradient(circle at bottom right,rgba(28,28,28,.3) 0,rgba(28,28,28,0) 50%);bottom:-10px;content:"";display:block;height:300%;pointer-events:none;position:absolute;right:-10px;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:300%;z-index:-1}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-muteButton:before{opacity:1}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-withSeekBar .micromag-viewer-partials-playback-controls-muteButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-muteButton:before{opacity:1}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-withoutShadow .micromag-viewer-partials-playback-controls-muteButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withMute.micromag-viewer-partials-playback-controls-withoutShadow .micromag-viewer-partials-playback-controls-muteButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withPlayPause .micromag-viewer-partials-playback-controls-playPauseButton{position:relative}.micromag-viewer-partials-playback-controls-withPlayPause .micromag-viewer-partials-playback-controls-playPauseButton:before{background-color:transparent;background-image:radial-gradient(circle at bottom left,rgba(28,28,28,.3) 0,rgba(28,28,28,0) 50%);bottom:-10px;content:"";display:block;height:300%;left:-10px;pointer-events:none;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:300%;z-index:-1}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-playPauseButton:before{opacity:.5}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-withSeekBar .micromag-viewer-partials-playback-controls-playPauseButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-isCollapsed .micromag-viewer-partials-playback-controls-playPauseButton:before{opacity:.5}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-withoutShadow .micromag-viewer-partials-playback-controls-playPauseButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withPlayPause.micromag-viewer-partials-playback-controls-withoutShadow .micromag-viewer-partials-playback-controls-playPauseButton:before{opacity:0}.micromag-viewer-partials-playback-controls-withSeekBar:after{background-image:-webkit-gradient(linear,left top,left bottom,color-stop(40%,rgba(28,28,28,0)),to(rgba(28,28,28,.4)));background-image:linear-gradient(180deg,rgba(28,28,28,0) 40%,rgba(28,28,28,.4));bottom:0;content:"";display:block;height:150px;left:0;pointer-events:none;position:absolute;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;width:100%;z-index:-1}.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-isCollapsed:after{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.micromag-viewer-partials-playback-controls-withSeekBar.micromag-viewer-partials-playback-controls-withoutShadow:after{background-image:none}.micromag-viewer-partials-playback-controls-withSuggestPlay .micromag-viewer-partials-playback-controls-muteButton,.micromag-viewer-partials-playback-controls-withSuggestPlay .micromag-viewer-partials-playback-controls-playPauseButton,.micromag-viewer-partials-playback-controls-withSuggestPlay .micromag-viewer-partials-playback-controls-seekBar{opacity:.25!important}.micromag-viewer-partials-playback-controls-withSuggestPlay .micromag-viewer-partials-playback-controls-suggest{opacity:1}
 .micromag-viewer-partials-web-view-container{height:100%;left:50%;position:absolute;top:0;-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);-webkit-transition:-webkit-transform .5s ease-in-out;transition:-webkit-transform .5s ease-in-out;transition:transform .5s ease-in-out;transition:transform .5s ease-in-out,-webkit-transform .5s ease-in-out;width:100%}.micromag-viewer-partials-web-view-container .micromag-viewer-partials-web-view-focusLock{height:100%;width:100%}.micromag-viewer-partials-web-view-container.micromag-viewer-partials-web-view-opened{-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%)}.micromag-viewer-partials-web-view-container.micromag-viewer-partials-web-view-opened .micromag-viewer-partials-web-view-webView{background-color:#343434;background-color:var(--mm-gray-800,#343434)}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.4.60",
+    "version": "0.4.65",
     "private": false,
     "description": "",
     "keywords": [
@@ -63,14 +63,14 @@
     "dependencies": {
         "@babel/runtime": "^7.28.6",
         "@folklore/routes": "^0.2.36",
-        "@micromag/core": "^0.4.60",
-        "@micromag/element-badge": "^0.4.60",
-        "@micromag/element-scroll": "^0.4.60",
-        "@micromag/element-share-options": "^0.4.60",
-        "@micromag/element-webview": "^0.4.60",
-        "@micromag/elements": "^0.4.60",
-        "@micromag/intl": "^0.4.60",
-        "@micromag/screens": "^0.4.60",
+        "@micromag/core": "^0.4.65",
+        "@micromag/element-badge": "^0.4.65",
+        "@micromag/element-scroll": "^0.4.65",
+        "@micromag/element-share-options": "^0.4.65",
+        "@micromag/element-webview": "^0.4.65",
+        "@micromag/elements": "^0.4.65",
+        "@micromag/intl": "^0.4.65",
+        "@micromag/screens": "^0.4.65",
         "@react-spring/core": "^10.0.3",
         "@react-spring/web": "^10.0.3",
         "@use-gesture/react": "^10.3.0",
@@ -89,6 +89,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "515ac855ce6094c26f37b1dbf413ee80064713e6",
+    "gitHead": "33460a352e56298ae450392b04c09503ecfeae05",
     "types": "es/index.d.ts"
 }