div#related-tags-container {
  &.visible a#show-related-tags-link,
  &.hidden a#hide-related-tags-link,
  &.hidden div.related-tags {
    display: none;
  }
}

div.related-tags {
  width: 100%;
  margin-bottom: 1em;
  padding: 1em;
  background: var(--related-tags-container-background);
  overflow: auto;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;

  div.user-related-tags-columns, div.current-related-tags-columns, div.source-related-tags-columns {
    display: flex;
  }

  div.tag-column {
    max-width: 15em;
    margin-right: 2em;

    &.is-empty-true {
      display: none;
    }

    &.wide-column {
      max-width: 45em;
    }

    ul {
      margin: 0;

      li {
        em {
          font-weight: bold;
        }

        svg {
          margin-top: 2px;
          cursor: pointer;
        }

        a {
          min-width: 3em;
        }

        a.selected {
          background: var(--selected-related-tag-background-color);
          color: var(--selected-related-tag-color);
        }
      }
    }
  }
}
