.toggling {

  cursor: pointer;
  position: relative;
  height: calc(1 * var(--line-height));
  display: list-item;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &:hover .toggle-heading {
    text-decoration: underline;
  }

  &::marker {
    background-color: aqua;
    white-space-collapse: preserve;
    text-overflow: unset;
    overflow: auto;
    white-space: normal;
  }

  &.open {
    height: auto;
    white-space: normal;
  }

  .toggle-heading {
    font-family: var(--ffm-game-heading);
  }

}



/* MOBILE */
@media (max-width: 600px) {  

  .toggling {

    .toggle-content::before {
      content: " - ";
    }
  
  }

}

/* DESKTOP */
@media (min-width: 600px) {

  .toggling {
    display: flex;
    gap: 1rem;

    .toggle-heading {
      flex: 0 0 auto;
    }
    
    .toggle-content {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}




.old.toggling {

  &.empty {
    pointer-events: none;
    opacity: 30%;

    .toggler img {
      transform: rotate(-90deg);
    }
  }

  > .toggled {
    display: none;
  }

  > .toggler {
    cursor: pointer;
    position: relative;

    &::after {
      content: "see more";
      font-style: italic;
      position: absolute;
      right: 0;
      /* font-size: .5rem; */
    }

    * {
      vertical-align: middle;
    }

    img {
      display: inline-block;
      width: 1.3rem;
    }
  }

  &.open {
    > .toggled {
      display: block;
    }
    > .toggler img {
      transform: rotate(180deg);
    }
  }

}