.player.overlay-active .interactive-area {
  filter: blur($blur);
}
.interactive-area {
  pointer-events: none;
  position: relative;
  top: 0;
  margin: #{$gui-gutter}px;
  transition: margin #{$hover-animation-time}ms ease-in-out;
  flex: 1;
}
.player {
  &.size-sm {
    .interactive-area {
      margin: #{$gui-small-gutter}px;
    }
  }
  &.casting,
  &.metadata-loaded.hover,
  &.state-paused,
  &.state-idle,
  &.ad-break,
  &.menu-active {
    &:not(.overlay-active) {
      &.size-sm {
        .interactive-area {
          margin: 0px #{$gui-small-gutter}px;
        }
      }
    }
    .interactive-area {
      margin: 0px #{$gui-gutter}px;
    }
  }
}