Cacher is the code snippet organizer for pro developers

.accordion.dropdown
  input.accordion_toggle(id="item01", type="checkbox")
  label.accordion_label.dropdown_btn(for="item01") Item Label
  .accordion_body
    p Accordion Body
  .dropdown_overlay
  .dropdown_body
    p Dropdown Body

.accordion_toggle {
  display: none;
}

.accordion_label {
  .accordion_toggle:checked ~ & {
    font-weight: bold;
  }
}

.accordion_body {
  * {
    opacity: 0;
    overflow: hidden;
    padding: 0;
    line-height: 0;
    transition: opacity .2s ease-out, overflow .2s ease, padding .2s ease-out, line-height .2s ease-out;
  }
  .accordion_toggle:checked ~ & {
    * {
      opacity: initial;
      overflow: initial;
      padding: initial;
      line-height: 1.5;
    }
  }
}

.dropdown_btn {
  cursor: pointer;
  position: relative;
  z-index: 1001;
}

.dropdown_body {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #ffffff;
  transition: opacity .2s .2s ease-out, visibility .2s .2s ease;
  z-index: 1001;
  @include media() {
    .dropdown:hover & {
      opacity: 1;
      visibility: visible;
    }
  }
}

.dropdown_overlay {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  z-index: 1000;
  transition: opacity .2s .2s ease-out, visibility .2s .2s ease;
  pointer-events: none;
  @include media() {
    .dropdown:hover & {
      opacity: 1;
      visibility: visible;
    }
  }
}