/*
---
name: Drawer
category:
  - object/component
  - object/component/drawer
---

```html
<div class="_c-drawer" data-c="drawer" style="min-height: 200px">
  <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">
          <span class="_ic-angle-right" aria-hidden="true"></span>
        </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>
```
*/

.{_prefix}c-drawer {
  item-padding-coefficient = 1;

  _drawer();

  &__menu {
    _list-unstyled();
  }

  &__item, &__subitem {
    position: relative;
    color: #fff;

    > a {
      color: #fff;
      text-decoration: none;
      _transition(background-color);

      +_hover() {
        color: #ccc;
      }
    }
  }

  &__item {
    _padding(.5, item-padding-coefficient, 0);
  }

  &__submenu {
    _list-unstyled();
    _margin(0, (item-padding-coefficient * -1), 0, 0);
    padding-left: 1em;
  }

  &__subitem {
    _padding(.5, item-padding-coefficient, 0, 0);
  }

  &__toggle {
    _position(absolute, _space(.5), 5px, 0);
    _square(_base-line-height);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__body--fixed {
    position: fixed;
  }
}