//
// Hamburger Button
//
// @param  hash  params  properties for decoration
//
// .c-hamburger-btn {
//   _hamburger-btn({
//     height: 16px,
//     width: 22px,
//     bar-height: 2px,
//     color: _color-text,
//   });
// }
//
// <div class="c-hamburger-btn" role="button" aria-expanded="false">
//   <div class="c-hamburger-btn__bar"></div>
//   <div class="c-hamburger-btn__bar"></div>
//   <div class="c-hamburger-btn__bar"></div>
// </div>
//

_hamburger-btn(params = {}) {
  params = merge(
    {
      height: 16px,
      width: 22px,
      bar-height: 2px,
      color: _color-text,
    },
    params
  );

  height = params['height'];
  width = params['width'];
  bar-height = params['bar-height'];
  color = params['color'];

  position: relative;
  display: inline-block;
  box-sizing: content-box;
  cursor: pointer;
  height: height;
  width: width;

  &__bar {
    _position(absolute, null, 0, null, 0);
    display: block;
    background-color: color;
    height: bar-height;
    _transition(transform);

    &:nth-child(1) {
      top: 0;
    }

    &:nth-child(2) {
      top: (height / 2 - bar-height / 2);
    }

    &:nth-child(3) {
      top: (height - bar-height);
    }
  }
}