/**
* Styling top level items
* 'mbb' is 'menu button bar'
*/
.mbb_accordion {
   background-color: var(--lightishBackground);
   cursor: pointer;
   padding: 15px 10px 10px 15px;
   width: auto;
   border: none;
   text-align: left;
   outline: none;
   transition: 0.4s;
   font-size: 1.25rem;
}

.mbb_accordion ul {
    list-style-type: none;
}
.mbb_accordion a,
.mbb_accordion label {
 display: block;
 background-color: var(--lightishBackground);
 box-shadow: inset 0 -1px lighten(#151515, 3%);
 transition: all .25s ease-in;
 font-size: 1.1rem;
}
.mbb_accordion label {
    cursor: pointer;
    padding: 5px;
}

.mbb_accordion label:hover {
    font-weight: bold;
}

/**
* Styling first level lists items
*/
.mbb_accordion-list label {
 padding-left: 1rem;
 background-color: var(--lightishBackground);
 box-shadow: inset 0 -1px lighten(#252525, 7%);
 &:focus,
 &:hover {background: darken(#252525, 7%);}
}

.mbb_accordion-list li a
{
    padding: 5px;
}

.mbb_accordion-list a
{
    background-color: var(--lightishBackground);
    box-shadow: inset 0 -1px lighten(#252525, 7%);
    &:focus,
    &:hover {background: darken(#252525, 7%);}
   }
/**
* Styling second level list items
*/
.mbb_sub-accordion-list label {
 padding-left: 4rem;
 background-color: var(--lightishBackground);
 box-shadow: inset 0 -1px lighten(#353535, 7%);
 &:focus,
 &:hover {background: darken(#353535, 7%);}
 font-size: 1rem;
}

.mbb_sub-accordion-list a {
 padding: 0rem;
 background-color: var(--lightishBackground);
 box-shadow: inset 0 -1px lighten(#353535, 7%);
 &:focus,
 &:hover {background: darken(#353535, 7%);}
 font-size: 1rem;
}

.mbb_sub-accordion-list li {
    padding-left: 1rem;
}

.mbb_sub-accordion-list li a {
    padding: .5rem;
}

/**
* Styling third level list items
*/
.mbb_sub-sub-accordion-list a,
.mbb_sub-sub-accordion-list label {
 padding-left: 6rem;
 background: var(--lightishBackground);
 box-shadow: inset 0 -1px lighten(#454545, 7%);
 &:focus,
 &:hover {background: darken(#454545, 7%);}
}

/**
* Hide nested lists
*/
.mbb_accordion-list,
.mbb_sub-accordion-list,
.mbb_sub-sub-accordion-list {
 height: 100%;
 max-height: 0;
 overflow: hidden;
 transition: max-height .5s ease-in-out;
}

.mbb_accordion__list input[type=checkbox]:checked + label + ul {
    /* reset the height when checkbox is checked */
  max-height: 2000px;
 }
 
.mbb_accordion__list ul {
    list-style-type: none;
} 

/**
* Rotating chevron icon
*/
label > span {
 float: right;
 transition: transform .65s ease;
}
.mbb_accordion__list input[type=checkbox]:checked + label > span {transform: rotate(90deg);}
.mbb_accordion__list input[type=radio]:checked + label > span {transform: rotate(90deg);}

/* 
 * pg_ means that these styles 
 * are intended for main-content  
 * as opposed to menu-items
 */

pg_accordion {
    /* background-color: var(--lightishBackground); */
    /* background-color: pink; */
    cursor: pointer;
    padding: 15px 10px 10px 15px;
    width: auto;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
    font-size: 1.25rem;
 }
 
 .pg_accordion ul {
     list-style-type: none;
 }
 .pg_accordion a,
 .pg_accordion label {
  display: block;
  box-shadow: inset 0 -1px lighten(#151515, 3%);
  transition: all .25s ease-in;
  font-size: 1.2rem;
 }
 .pg_accordion label {
     cursor: pointer;
     padding: 5px;
     padding-bottom: 10px;
     font-weight: bold;
 }
 
 .pg_accordion label:hover {
     font-weight: bold;
 }
 
 /**
 * Styling first level lists items
 */
 .pg_accordion-list label {
  padding-left: 1rem;
  box-shadow: inset 0 -1px lighten(#252525, 7%);
  &:focus,
  &:hover {background: darken(#252525, 7%);}
 }

 /**
 * Styling second level list items
 */
 .pg_sub-accordion-list label {
  padding-left: 4rem;
  box-shadow: inset 0 -1px lighten(#353535, 7%);
  &:focus,
  &:hover {background: darken(#353535, 7%);}
  font-size: 1rem; 
 }

 .pg_sub-accordion-list li {
     padding-left: 1rem;
 }

 /**
 * Styling third level list items
 */
 /* .pg_sub-sub-accordion-list a,
 .pg_sub-sub-accordion-list label {
  padding-left: 6rem;
  background: var(--lightishBackground);
  box-shadow: inset 0 -1px lighten(#454545, 7%);
  &:focus,
  &:hover {background: darken(#454545, 7%);}
 }
  */
 /**
 * Hide nested lists
 */
 .pg_accordion-list,
 .pg_sub-accordion-list,
 .pg_sub-sub-accordion-list {
  height: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease-in-out;
 }
 
 .pg_accordion__list input[type=checkbox]:checked + label + ul {
     /* reset the height when checkbox is checked */
   max-height: 2000px;
  }
  
 .pg_accordion__list ul {
     list-style-type: none;
 } 
 
 /**
 * Rotating chevron icon
 */
 label > span {
  /* float: right; */
  float: left;
  padding-right: 20px;
  transition: transform .65s ease;
  transform-origin: 2px 50%;
 }

 .pg_accordion__list input[type=checkbox]:checked + label > span {
    transform: rotate(90deg); 
    /* transform-origin: -100% 50%; */
}
 .pg_accordion__list input[type=radio]:checked + label > span {transform: rotate(90deg);}