.ProseMirror {
  &.is-typing {
    .problem {
      border-bottom-color: transparent;
    }
  }

  .problem {
    border-bottom: 1px dashed red;
  }

  .problem[data-suggestions] {
    cursor: pointer;
  }

  &-spellcheck {
    &-suggestions {
      --Link-color: var(--color-black);
      --Link-hoverColor: var(--color-black);
      --Link-hoverDecoration: none;

      background: var(--color-white);
      box-shadow: var(--shadow-3);
      left: var(--Tether-rl);
      opacity: 0;
      overflow-y: scroll;
      padding: var(--gap-s) 0;
      position: fixed;
      transform: scaleY(0);
      transform-origin: top;
      transition:
        opacity var(--time-xs) var(--ease-in),
        transform var(--time-s) var(--ease-out);
      z-index: 200000;

      &.is-opening:not(.is-removing) {
        opacity: 1;
        transform: none;
      }

      &[data-tether-ry='b'] {
        bottom: calc(100vh - var(--Tether-rt));
        max-height: calc(
          var(--Tether-rt) - var(--Page-headerHeight) - var(--gap-s)
        );
        transform-origin: bottom;
      }

      &[data-tether-ry='t'] {
        max-height: calc(
          100vh - var(--Tether-rt) - var(--Tether-rh) - var(--gap-s) * 2
        );
        top: calc(var(--Tether-rt) + var(--Tether-rh));
      }

      > li {
        background-color: transparent;
        cursor: pointer;
        display: block;
        font-size: inherit;
        padding: var(--gap-s) var(--gap-l);
        text-align: left;
        width: 100%;

        &.active,
        &:hover,
        &:focus {
          background-color: var(--color-blue1);
        }
      }
    }
  }
}
