details {
  position: relative;
  background-color: var(--primary-very-low);
  padding: 0.25rem 0.75rem;
  margin-bottom: 0.5rem;

  &:not([open]) {
    &:hover,
    &:focus,
    &:focus-within {
      background-color: var(--d-hover);
    }
  }

  aside.quote .title,
  blockquote,
  code {
    background-color: rgba(var(--primary-rgb), 0.05);
  }
}

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

details,
summary {
  outline: none;
}

summary {
  > p {
    margin-block: 0;
    padding-block: 1rem;
  }
}

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 {
  background-color: unset;
  padding: 0;

  &:not([open]) {
    //specificity needed to overrule non-elided
    &:hover,
    &:focus,
    &:focus-within {
      background-color: unset;
    }

    summary:hover {
      background: var(--d-hover);
    }
  }

  &[open] {
    background: var(--primary-very-low);
    padding: 0.5rem 0.75rem;
    summary {
      padding: 0;
    }
  }

  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.5rem 0.75rem;
    color: var(--primary-medium);
    background: var(--primary-very-low);
    width: min-content;
    line-height: 1;

    &:hover,
    &:focus,
    &:focus-within {
      color: var(--primary);
      cursor: pointer;
    }
  }
}