.comparison {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em;

  @media (min-width: 1600px) {
    margin-left: -10vw;
    margin-right: -10vw;
  }

  > pre {
    flex-grow: 1;
    width: calc(50% - 0.5em);
    min-width: min(50ch, 100%);
    margin: 0;

    > .playground {
      margin: 0;
    }
  }
}

.language-cpp:before, .language-rust:before {
  content: ' ';
  background-size:cover;
  position:absolute;
  right: 5px;
  top: 5px;
}

.language-cpp:before {
  background-image: url('img/cpp.svg'); /* aspect: 306 / 344 */
  width: 20px;
  height: 22.5px;
}

html.rust, html.light {
  .language-rust:before {
    background-image: url('img/rust-black.svg'); /* aspect: 1 / 1 */
    width: 25px;
    height: 25px;
  }
}

html.coal, html.navy, html.ayu {
  .language-rust:before {
    background-image: url('img/rust-white.svg'); /* aspect: 1 / 1 */
    width: 25px;
    height: 25px;
  }
}

.feedback-link {
  display: inline-block;
  border: 1px solid var(--theme-popup-border);
  background-color: var(--theme-popup-bg);
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 80%;
  margin-top: 2em;
}

summary:has(:only-child) > p {
    display: inline;
}

summary {
    cursor: pointer;
}

details > summary {
    background-color: var(--table-alternate-bg);
    padding-left: 0.8em;
    margin-left: -0.2em;
}

details {
    margin: 0.2em 0;
    padding-left: 0.2em;
    border-left: 5px solid var(--table-header-bg);
}
