#window-zoom-info {
  pointer-events: none;

  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  & > div {
    padding: var(--spacing);
    min-width: 100px;
    background: var(--toast-notification-background-color);
    color: var(--toast-notification-color);
    text-align: center;
    border-radius: 100px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);

    // This is so sad but CodeMirror uses z-indexes like crazy
    // and we need to make sure we stay above all of that.
    z-index: 20;
  }

  .zoom-in {
    &-appear {
      transform: scale(0.25);
      opacity: 0;
    }
  }

  .zoom-out {
    &-appear {
      transform: scale(1.75);
      opacity: 0;
    }
  }

  .zoom-in,
  .zoom-out {
    &-exit-active {
      opacity: 0;
      transition: opacity 100ms ease-out;
    }
    &-appear-active {
      transform: scale(1);
      opacity: 1;
      transition: all 100ms ease-out;
    }
  }
}
