// Burger parts
//
// (---) top    -> &::before
// [---] middle -> &
// (---) bottom -> &::after
// Vendor prefixes
$sass-burger-add-vendor-prefixes: true !default;

// Burger
@mixin burger($width: 30px, $height: 5px, $gutter: 3px, $color: #000, $border-radius: 0, $transition-duration: .3s) {
  $burger-height: $height !global;
  $burger-gutter: $gutter !global;
  margin-bottom: $height + $gutter;
  margin-top: $height + $gutter;
  position: relative;
  user-select: none;

  @if $sass-burger-add-vendor-prefixes {
    user-select: none;
  }

  &,
  &::before,
  &::after {
    background-color: $color;
    display: block;
    height: $height;
    transition-duration: $transition-duration;
    transition-property: background-color, transform;
    width: $width;

    @if $border-radius != 0 {
      border-radius: $border-radius;
    }

    @if $sass-burger-add-vendor-prefixes {
      transition-property: background-color, -o-transform;
    }

    @if $sass-burger-add-vendor-prefixes {
      transition-duration: $transition-duration;
    }
  }

  &::before,
  &::after {
    content: '';
    position: absolute;
  }

  &::before {
    top: - ($height + $gutter);
  }

  &::after {
    top: $height + $gutter;
  }
}

// Select parts of the burger
@mixin burger-parts {
  &,
  &::before,
  &::after {
    @content;
  }
}

@mixin burger-top {
  &::before {
    @content;
  }
}

@mixin burger-middle {
  @content;
}

@mixin burger-bottom {
  &::after {
    @content;
  }
}

// Burger animations
@mixin burger-to-cross($color: auto) {
  background-color: transparent;

  @if ($color != auto) {
    &::before,
    &::after {
      background-color: $color;
    }
  }

  &::before {
    @if $sass-burger-add-vendor-prefixes {
      transform: translateY($burger-gutter + $burger-height) rotate(45deg);
    }
    transform: translateY($burger-gutter + $burger-height) rotate(45deg);
  }

  &::after {
    @if $sass-burger-add-vendor-prefixes {
      transform: translateY(- ($burger-gutter + $burger-height)) rotate(-45deg);
    }
    transform: translateY(- ($burger-gutter + $burger-height)) rotate(-45deg);
  }
}