//
// Drawer
//
// @param  hash  $params  properties for decoration
//
// .c-drawer {
//   _drawer({
//     background-color: _light(_color-black),
//     width: (_base-line-height * 10),
//     max-width: 80%,
//   });
// }
//
// import BasisDrawer from 'node_modules/getbasis/src/js/drawer.js';
// new BasisDrawer();
//
// <div class="c-drawer" data-c="drawer">
//   <nav id="drawer" class="c-drawer__body" data-c="drawer__body" role="navigation" aria-hidden="true">
//     <ul class="c-drawer__menu">
//       <li class="c-drawer__item"><a href="#">menu</a></li>
//       <li class="c-drawer__item"><a href="#">menu</a></li>
//       <li class="c-drawer__item">
//         <a href="#">menu</a>
//         <div class="c-drawer__toggle" data-c="drawer__toggle" aria-expanded="false">&gt;</div>
//         <ul class="c-drawer__submenu" data-c="drawer__submenu" aria-hidden="true">
//           <li class="c-drawer__subitem"><a href="#">submenu</a></li>
//           <li class="c-drawer__subitem"><a href="#">submenu</a></li>
//         </ul>
//       </li>
//     </ul>
//   </nav>
// </div>
//
// <div class="_c-hamburger-btn" data-c="drawer-btn" aria-expanded="false" aria-controls="drawer">
//   <div class="_c-hamburger-btn__bar"></div>
//   <div class="_c-hamburger-btn__bar"></div>
//   <div class="_c-hamburger-btn__bar"></div>
// </div>
//

_drawer(params = {}) {
  params = merge(
    {
      background-color: _light(_color-black),
      width: (_base-line-height * 10),
      max-width: 80%,
    },
    params
  );

  background-color = params['background-color'];
  width = params['width'];
  max-width = params['max-width'];

  position: relative;

  &__body {
    _position(absolute, 0, null, 0, -100%, 10);
    _transition(left);
    width: width;
    max-width: max-width;
    background-color: background-color;
    overflow-y: auto;

    &[aria-hidden="false"] {
      left: 0;
    }
  }

  &__submenu {
    height: 0;
    overflow: hidden;

    &[aria-hidden="false"] {
      height: auto;
      overflow: visible;
    }
  }

  &__toggle {
    cursor: pointer;
  }
}