.moviemasher .editor .panel.player {
  grid-area: player;
}

.moviemasher .editor .panel.player .foot .time {
  font-size: 0.75em;
  text-align: right;
  flex-grow: 1;
}


.moviemasher .editor .panel.player .content {
  width: var(--preview-width);
  height: var(--preview-height);
  margin-inline: auto;
  color: var(--color-fore-tertiary);
  position: relative;
}

.moviemasher .editor .panel.player .content > .svgs {
  position: relative;
}


.moviemasher .editor .panel.player .content > .svgs > svg,
.moviemasher .editor .panel.player .content > .svgs > div {
  position: absolute;
  left: 0px;
  top: 0px;
}

.moviemasher .editor .panel.player .content > .svgs > svg.bounds,
.moviemasher .editor .panel.player .content > .svgs > svg.background,
.moviemasher .editor .panel.player .content > .svgs > svg.track {
  pointer-events: none;
}

.moviemasher .editor .panel.player .content > .svgs > svg .outline {
  cursor: move;
  pointer-events: fill;
  stroke-width: 0;
  fill: transparent;
}

.moviemasher .editor .panel.player .content > .svgs > svg .outline.animate:hover {
  stroke-width: calc(2 * var(--border-size));
  stroke-dasharray: 4px;
  stroke-dashoffset: 8px;
  stroke: white;
  animation: 
    stroke 1s linear infinite forwards,
    color 1s linear 0.5s infinite alternate;
}

@keyframes color { to {  stroke: black } }
@keyframes stroke { to { stroke-dashoffset: 0; } }
/* 
.moviemasher .editor .panel.player .content > .svgs > svg.bounds .handle.ne {
  cursor: ne-resize;
}
.moviemasher .editor .panel.player .content > .svgs > svg.bounds .handle.se {
  cursor: se-resize;
}
.moviemasher .editor .panel.player .content > .svgs > svg.bounds .handle.nw {
  cursor: nw-resize;
}
.moviemasher .editor .panel.player .content > .svgs > svg.bounds .handle.sw {
  cursor: sw-resize;
}
.moviemasher .editor .panel.player .content > .svgs > svg.bounds .handle.n {
  cursor: n-resize;
}
.moviemasher .editor .panel.player .content > .svgs > svg.bounds .handle.s {
  cursor: s-resize;
}
.moviemasher .editor .panel.player .content > .svgs > svg.bounds .handle.e {
  cursor: e-resize;
}
.moviemasher .editor .panel.player .content > .svgs > svg.bounds .handle.w {
  cursor: w-resize;
} */

.moviemasher .editor .panel.player .content > .svgs > svg.bounds.back > * {
  stroke-width: calc(2 * var(--border-size));

  stroke: black;
}

.moviemasher .editor .panel.player .content > .svgs > svg.bounds.back .handle {
  pointer-events: fill;
}

.moviemasher .editor .panel.player .content > .svgs > svg.bounds.fore > * {
  stroke: none;
  fill: white;
}

/* 
@supports (-moz-appearance:none) {
  .moviemasher .player.panel .content > .svgs > svg .filtered {
    filter: none;
  }
  .moviemasher .player.panel .content > .svgs > svg use.mozilla  {
    stroke-width: var(--border-size);
    stroke: black;
    fill: white;
  }
}
@supports not (-moz-appearance:none) {
  .moviemasher .player.panel .content > .svgs > svg use.mozilla {
    display: none;
  }
} */