details {
  position: relative;
}

details > *,
details .lightbox-wrapper {
  display: none;
}

details,
summary {
  outline: none;
}

summary:first-of-type {
  cursor: pointer;
  display: block;
}

summary:before {
  content: "\25BA";
  margin-right: 0.25em;
}

details[open] > *,
details[open] .lightbox-wrapper {
  display: block;
}

details[open] > summary:before,
details.open > summary:before {
  content: "\25BC";
}

details[open] > summary:first-of-type ~ *,
details.open > summary:first-of-type ~ * {
  display: block;
}

/* hide native indicator */
summary::-webkit-details-marker {
  display: none;
}

.elided {
  summary:before {
    content: "" !important;
    display: none;
  }

  summary {
    @include unselectable;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: var(--primary-medium);
    background: var(--primary-low);
    border: 1px solid var(--primary-low-mid);
    width: 1.5em;
    line-height: 1;
  }

  summary:hover {
    color: var(--primary);
    background: var(--primary-low-mid);
    border-color: currentColor;
  }
}