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] > * {
  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;
}

/* FF: hide div generated by lazyYT plugin */
details .lazyYT-container {
  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: #aaa;
    background: #f1f1f1;
    border: 1px solid #ddd;
    width: 21px;
    line-height: 12px;
  }

  summary:hover {
    color: #222;
    background: #d8d8d8;
    border-color: #cdcdcd;
  }
}