
#view-email .nx-mail-refresh-btn{
  position:relative;
  overflow:hidden;
}
#view-email .nx-mail-refresh-btn .nx-refresh-glyph{
  display:block;
  transform-origin:50% 50%;
  font-size:17px;
  line-height:1;
}
#view-email .nx-mail-refresh-btn.is-refreshing .nx-refresh-glyph{
  animation:nxMailRefreshSpin .72s linear infinite;
}
#view-email .nx-mail-refresh-btn.is-done{
  border-color:color-mix(in srgb,var(--theme-accent) 35%,var(--theme-line))!important;
}
#view-email .nx-mail-refresh-btn.is-done .nx-refresh-glyph{
  animation:nxMailRefreshDone .45s ease;
}
#view-email .nx-mail-refresh-btn:disabled{
  opacity:.72;
  cursor:default;
}
#view-email .nx-mail-refresh-feedback{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-left:10px;
  color:var(--theme-muted);
  font-size:10px;
  opacity:0;
  transform:translateY(-2px);
  transition:opacity .18s ease,transform .18s ease;
}
#view-email .nx-mail-refresh-feedback.show{
  opacity:1;
  transform:translateY(0);
}
#view-email .nx-mail-refresh-feedback.ok{
  color:var(--theme-accent);
}
#view-email .nx-mail-refresh-feedback.error{
  color:#c65b4d;
}
#view-email .nx-mail-refresh-feedback i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  display:inline-block;
}
@keyframes nxMailRefreshSpin{
  to{transform:rotate(360deg)}
}
@keyframes nxMailRefreshDone{
  0%{transform:rotate(0) scale(1)}
  50%{transform:rotate(180deg) scale(1.16)}
  100%{transform:rotate(360deg) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  #view-email .nx-mail-refresh-btn.is-refreshing .nx-refresh-glyph,
  #view-email .nx-mail-refresh-btn.is-done .nx-refresh-glyph{
    animation:none!important;
  }
}
