/*
  Here's the dropdown CSS file. This file contains CSS for 6
  colors of dropdown menus, which I've named. Feel free to
  change the names and styles of each dropdown. I've tried to
  make them as similar to the ones that already exist on the
  Mathematica page.
*/

/* Example dropdown colors */
.example-collapse {
  color: #fff;
  background-color: #6c757d;
}

/* Proof dropdown colors */
.proof-collapse {
  color: #fff;
  background-color: #dc3545;
}

/* Definition dropdown colors */
.definition-collapse {
  color: #fff;
  background-color: #28a745;
}

/* Theorem dropdown colors */
.theorem-collapse {
  color: #fff;
  background-color: #007bff;
}

/* Problem dropdown colors */
.problem-collapse {
  color: #000;
  background-color: #ffc107;
}

/* Solution dropdown colors */
.solution-collapse {
  color: #fff;
  background-color: #bf538d;
}

input[type="checkbox"] {
  display: none;
}

/* Toggle styling */
.lbl-toggle {
  display: block;
  border-radius: 4px;
  padding: 6px 12px;
  margin: 10px 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
}

/* Toggle hovor color */
.lbl-toggle:hover {
  background-color: #5bc0de;
}

.collapsible-content {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 1s ease-in-out;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 100%;
}

/* Background color of dropdown content */
.collapsible-content .content-inner {
  background: rgb(240, 240, 240);
  padding: 1rem;
}