:root {
  --explanation-arrow-size: .5rem;

  --explanation-mark-bg: var(--main-text);
  --explanation-mark-bg-hover: var(--profile-1);
  --explanation-mark-text: var(--main-bg);
  --explanation-mark-text-hover: var(--main-text);
  --explanation-dialog-bg: var(--blocking-message-bg);
  --explanation-dialog-text: var(--blocking-message-content-text);

  --explanation-show-in-time: var(--menu-in-time);
  --explanation-show-out-time: var(--menu-out-time);
  --explanation-show-in-fun: var(--menu-in-fun);
  --explanation-show-out-fun: var(--menu-out-fun);

  --explanation-z-index: 2;
}

.explanation {
  display: inline-block;
  font-family: var(--normal-font-family);
  font-weight: var(--normal-font-weight);
}
.explanation .mark {
  user-select: none;
  background-color: var(--explanation-mark-bg);
  color: var(--explanation-mark-text);
  font-size: 80%;
  padding: 0 .4rem;
  border-radius: 50%;
  margin-left: .5rem;
  min-width: .4rem;
  text-align: center;
  transition: all var(--hover-out-time) var(--hover-out-fun);
}
.explanation.active .mark,
.explanation .mark:active,
.explanation .mark:focus,
.explanation .mark:hover {
  cursor: pointer;
  background-color: var(--explanation-mark-bg-hover);
  color: var(--explanation-mark-text-hover);
  transition: all var(--hover-in-time) var(--hover-in-fun);
}
.explanation .dialog {
  position: absolute;
  left: 0; /* Will be set by JS */
  margin-top: var(--explanation-arrow-size);
  max-width: 25em;
  z-index: var(--explanation-z-index);
  background-color: var(--explanation-dialog-bg);
  color: var(--explanation-dialog-text);
  padding: .5rem 1rem;
  border-radius: .8rem;
  box-sizing: border-box;
  display: none;
}
.explanation .arrow {
  position: absolute;
}
.explanation .arrow:after {
  content: ' ';
  position: absolute;
  z-index: var(--explanation-z-index);
  margin-left: .6rem;
  border-top: none;
  border-right: var(--explanation-arrow-size) solid transparent;
  border-left: var(--explanation-arrow-size) solid transparent;
  border-bottom: var(--explanation-arrow-size) solid
                 var(--explanation-dialog-bg);
  display: none;
}
.explanation.preactive .dialog,
.explanation.preactive .arrow:after {
  display: block;
  opacity: 0;
  transition: opacity
              var(--explanation-show-out-time)
              var(--explanation-show-out-fun);
}
.explanation.active .dialog,
.explanation.active .arrow:after {
  opacity: 1;
  transition: opacity
              var(--explanation-show-in-time)
              var(--explanation-show-in-fun);
}