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: .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;
  }

  summary {
    @include unselectable;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #aaa;
    background: #f1f1f1;
    border: 1px solid #ddd;
    width: 20px;
    display: flex;
    text-align: center;
    vertical-align: middle;
    line-height: 12px;
  }

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