// В этом файле должны быть стили для БЭМ-блока burger, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority

.burger {
  position: relative;
  z-index: 1;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  width: 25px;
  height: 16px;
  border: none;
  padding: 0;
  background: transparent;
  user-select: none;
  cursor: pointer;

  > span {
    // stylelint-disable-line  selector-combinator-blacklist
    display: block;
    position: relative;
    width: 13px;
    height: $toggler-part-height;
    font-size: 0;
    color: transparent;
    background: $color-1;
    transition: background $transition-time $transition-time;

    &:before,
    &:after {
      content: "";
      position: absolute;
      right: 0;
      width: 25px;
      height: $toggler-part-height;
      background: #3a3a3a;
      transform-origin: 50% 50%;
      transition: top $transition-time $transition-time,
        background-color $transition-time, transform $transition-time;
    }

    &:before {
      top: -8px;
    }

    &:after {
      top: 8px;
    }
  }

  &--close {
    > span {
      // stylelint-disable-line  selector-combinator-blacklist
      transition: background $transition-time 0s;
      background: transparent;

      &:before,
      &:after {
        top: 0;
        transition: top $transition-time,
          transform $transition-time $transition-time;
      }

      &:before {
        transform: rotate3d(0, 0, 1, 45deg);
      }

      &:after {
        transform: rotate3d(0, 0, 1, -45deg);
        background-color: $color-1;
      }
    }
  }
}
