.context-help-button {
  position: relative;
  transform-origin: center;
  background: var(--su-info-surface);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.context-help-button.is-unread {
  color: var(--su-brand);
  animation: context-help-attention 1s ease-in-out infinite;
}

.context-help-button:hover,
.context-help-button:focus,
.context-help-button:focus-visible,
.context-help-button.is-unread:hover,
.context-help-button.is-unread:focus,
.context-help-button.is-unread:focus-visible {
  border-color: var(--su-warning-border);
  background: var(--su-warning-surface);
  color: var(--su-danger);
  animation: none;
}

@keyframes context-help-attention {
  0%,
  100% {
    border-color: var(--su-warning-border);
    background: var(--su-warning-surface);
    color: var(--su-brand);
  }
  50% {
    border-color: var(--su-info-border);
    background: var(--su-info-surface);
    color: var(--su-brand);
  }
}