.menu-collapsible{

  // menu

  .menu-label{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .menu-label-text, .menu-items-toggle{
    display: block;
  }
  
  .menu-items{
    // hide menu items by default
    display: none;
  }

  .menu-items-toggle{
    display: block;
  }

  .menu-items, .menu-child-items{
    padding-left: 10px;
    border-left: 5px solid rgba(0,0,0,0.1);
    margin: 10px 0 10px 6px;
    .medium-dark-bg &, .dark-bg & {
      border-color: rgba(255,255,255,0.1);
    }
    .light-bg &, .menu-dropdown & {
      border-color: rgba(0,0,0,0.1);
    }
  }

  // expanded menu

  &.menu-component.js-expanded{
    &>.menu-label-wrapper .menu-icon-expand{
      display: none;
    }
    .menu-items{
      display: block;
    }
  }
  
  // collapsed menu

  &.menu-component.js-collapsed{
    &>.menu-label-wrapper .menu-icon-collapse{
      display: none;
    }
    .menu-items{
      display: none;
    }
  }

  .menu-child-items{
    display: none;
  }

  // expanded menu item

  .menu-item.js-expanded{
    &>.menu-item-label-wrapper .menu-icon-expand{
      display: none;
    }
    .menu-child-items{
      display: block;
    }
  }

  // collapsed menu item

  .menu-item.js-collapsed{
    &>.menu-item-label-wrapper .menu-icon-collapse{
      display: none;
    }
    .menu-child-items{
      display: none;
    }
  }

}