.directive-collapsible > button {
  width: 100%;
  text-align: left;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  user-select: none;
  font-size: 100%;
  padding: 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.directive-collapsible > button.expanded {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  margin-bottom: 0px;
}

.directive-collapsible > button:after {
  content: "\02795";
  /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  float: right;
  margin-left: 5px;
}

.directive-collapsible > button.expanded:after {
  content: "\2796";
  /* Unicode character for "minus" sign (-) */
}

.directive-collapsible .collapsible-content {
  border-top: none;
  margin-bottom: 10px;
}

.directive-collapsible .collapsible-content {
  display: none;
}

.directive-collapsible > button.expanded+.collapsible-content {
  display: block;
  border-style: solid;
  border-width: 1px;
  border-top: none;
  padding: 6px 12px;
  padding-top: 12px;
  margin-bottom: 10px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.directive-collapsible > button {
  color: var(--color-text);
  border-color: var(--color-spacer);
  background-color: var(--color-nav);
}

.directive-collapsible > button:after {
  color: var(--color-text);
}

.directive-collapsible .collapsible-content {
  border-color: var(--color-spacer);
}