.course-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  min-height: 0;
  background: var(--background-color);
  border-right: 2px solid var(--menu-border-color);

  color: var(--foreground-color);

  z-index: 8;

  display: flex;
  flex-direction: column;

  transition: transform 0.5s;
}

@media screen and (min-width: 50rem) {
  .course-menu {
    width: 35rem;
  }
}

.course-menu-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-height: 0;
}

.mafi-header {
  width: auto;
  background: var(--menu-header-background-color);
  color: var(--background-color);
  font-size: 1.5rem;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 1rem;
  padding-right: 1rem;
  max-height: 3rem;
  min-height: 3rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--menu-border-color);
}

button.mafi-open-button {
  position: fixed;
  left: 0.25em;
  top: 0.25em;
}

button#page-color-button {
  position: fixed;
  right: 0.25em;
  top: 0.25em;
}

.mafi-header button {
  border: none;
  background: transparent;
  font-size: var(--icon-size);
  color: var(--background-color);
}

@media (prefers-color-scheme: dark) {
  .mafi-color-button::before {
    content: "\f185";
  }

  .light .mafi-color-button::before {
    content: "\f186";
  }
}

@media (prefers-color-scheme: light) {
  .mafi-color-button::before {
    content: "\f186";
  }

  .dark .mafi-color-button::before {
    content: "\f185";
  }
}

.mafi-right-buttons {
  height: 100%;
}

.mafi-right-buttons button {
  height: 100%;
}

.mafi-header button:hover {
  color: var(--icon-hover-color);
}

.mafi-header button:active {
  color: var(--icon-active-color);
}

.course-menu[inert] {
  transform: translateX(-100%);
}

.mafi-chapter-list-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-bottom: 1px solid var(--menu-border-color);
}

.mafi-chapter-list {
  min-height: 0;
  overflow: auto;
}

.mafi-chapter-list-wrapper .list-title {
  border-bottom: 1px solid var(--menu-border-color);
}

.mafi-chapter-list-wrapper .list-title h2 {
  margin: 1rem;
  font-size: 1.25rem;
}

.mafi-link-wrapper {
  width: auto;
}

.mafi-link-wrapper.mafi-chapter {
  font-weight: bold;
  background: var(--shade2);
}
.mafi-link-wrapper.mafi-section {
  background: var(--shade1);
}

.mafi-link-wrapper a {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.mafi-link-wrapper a:hover {
  color: var(--background-color);
}

.mafi-link {
  display: flex;
  color: var(--foreground-color);
  width: auto;
  height: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  text-decoration: none;
}

.mafi-link:visited {
  color: var(--foreground-color);
}

.mafi-link-wrapper:hover {
  color: var(--background-color);
  background: var(--icon-hover-color);
}

.mafi-link-wrapper:active {
  color: var(--background-color);
  background: var(--icon-active-color);
}

.course-menu .course-menu-body .mafi-options {
  margin-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 1rem !important; /* Override style.css last-child rule */
}

.mafi-options div {
  margin: 0;
}

.mafi-hidden {
  display: none;
}

.mafi-toggle-wrapper {
  position: relative;
  padding-left: 2.2rem;
}

.mafi-toggle {
  position: absolute;
  display: inline-block;
  width: 2rem;
  height: 1rem;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.mafi-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.mafi-hide-radio {
  margin: 0;
}

.mafi-hide-radio fieldset {
  border-radius: 0.5rem;
  margin: 0;
}

.mafi-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--shade2);
  transition: 0.4s;
}

.mafi-slider:before {
  position: absolute;
  content: "";
  width: 1rem;
  left: 2px;
  top: 2px;
  bottom: 2px;
  background: var(--foreground-color);
  transition: 0.4s;
}

input:checked + .mafi-slider {
  background: var(--accent5);
}

input:focus + .mafi-slider {
  box-shadow: 0 0 1px var(--shade3);
}

input:checked + .mafi-slider:before {
  transform: translateX(calc(1rem - 4px));
}

.mafi-slider.round {
  border-radius: 8px;
}

.mafi-slider.round:before {
  border-radius: 8px;
}

/* Use this to test what gets selected by the "hide everything but" button
body > :not(.course-menu):not(.dropdown-menu-wrapper):not(h1,h2):not(.theorem):not(.proof):not(.definition):not(.example) {
    background: red;
} */

@media print {
  .mafi-open-button {
    display: none;
  }

  body {
    width: 100%;
  }
}