//-- burger

.burger {
  @include set-col(s, 1);
  @include media-min(lg) {
    display: none;
  }

  transition     : .3s;
  margin-left    : auto;
  display        : flex;
  flex-direction : column;
  justify-content: space-between;

  width          : 32px;
  height         : 21px;

  position       : relative;
  z-index        : 20;

  &__bar {
    background: $black;
    height    : 3px;
    width     : 100%;
    transition: .3s;
  }

  .isActive & {
    .burger__bar {
      &:first-child {
        transform: translateY(9px) rotate(45deg);
      }

      &:nth-child(2) {
        transform: scale(0,1);
      }

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

  }
}