.show-hide > label {
  width            : 100%;
  background-color : var(--st-color-3);
  padding          : 0.5em;
  border           : 1px solid grey;
  cursor           : pointer;
}

.show-hide > label ~ * {
  border     : 1px solid grey;
  padding    : 0.5em;
  margin-top : calc(-0.5em - 2px);
}

.show-hide > input[type=checkbox] {
  position : absolute;
  left     : -1000px;
}

.show-hide > label::after {
  display : inline-block;
  float   : right;
}

.show-hide > input ~ label::after {
  content : "  \25BC";
}

.show-hide > input:checked ~ label::after {
  content : "  \25B6";
}

.show-hide > input:checked ~ label ~ * {
  display : none;
}

/*
 Dark mode
 */
@media (prefers-color-scheme : dark) {
  
  .show-hide > label {
    background-color : var(--st-color-8);
    border           : 1px solid var(--st-color-8);
  }
  
  .show-hide > label ~ * {
    border     : 1px solid var(--st-color-8);
    background-color : var(--st-color-7);
  }
}