/*
---
name: Hamberger Button
category:
  - object/component
  - object/component/hamberger-btn
---

```html
<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>
```
*/

.{_prefix}c-hamburger-btn {
  height = 16px;
  bar-height = 2px;

  _hamburger-btn({
    height: height,
    bar-height: bar-height,
  });

  &[aria-expanded="true"] > &__bar {
    &:nth-child(1), &:nth-child(3) {
      top: (height / 2 - bar-height / 2);
    }

    &:nth-child(1) {
      transform: rotate(45deg);
    }

    &:nth-child(2) {
      background-color: transparent;
    }

    &:nth-child(3) {
      transform: rotate(-45deg);
    }
  }
}