////
/// @group Main
////

/// Burger menu icon mixin
/// @author Joren Van Hee
/// @link https://github.com/jorenvanhee/sass-burger
///
/// @example scss
///   .icon {
///     --burger-icon-gutter: 6px;
///     --burger-icon-stroke-width: 2px;
///     --burger-icon-width: 30px;
///     // Default vars
///     // --burger-icon-color: currentColor;
///     // --burger-icon-radius: 0;
///     // --burger-icon-speed: 200ms;
///     // --burger-icon-cross-angle: 45deg;
///     @include burger;
///
///     &.is-active {
///       @include burger-to-cross;
///     }
///   }
///
@mixin burger() {
  margin-bottom: calc(var(--burger-icon-stroke-width) + var(--burger-icon-gutter));
  margin-top: calc(var(--burger-icon-stroke-width) + var(--burger-icon-gutter));
  position: relative;
  user-select: none;

  // Burger parts
  // (---) top    -> &::before
  // [---] middle -> &
  // (---) bottom -> &::after
  &,
  &::before,
  &::after {
    background-color: var(--burger-icon-color, currentColor);
    border-radius: var(--burger-icon-radius, 0);
    height: var(--burger-icon-stroke-width);
    transition-duration: var(--burger-icon-speed, 200ms);
    transition-property: background-color, transform;
    width: var(--burger-icon-width);
  }

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

  &::before {
    top: calc(-1 * var(--burger-icon-stroke-width) - var(--burger-icon-gutter));
  }

  &::after {
    top: calc(var(--burger-icon-stroke-width) + var(--burger-icon-gutter));
  }
}

/// Animate burger icon to a cross
///
/// @example scss
///   .icon {
///     --burger-icon-cross-angle: 30deg;
///     --burger-icon-cross-color: megenta;
///     @include burger;
///
///     &.is-active {
///       @include burger-to-cross;
///     }
///   }
///
@mixin burger-to-cross() {
  & {
    background-color: transparent;
  }

  &:before,
  &:after {
    background-color: var(--burger-icon-cross-color, currentColor);
  }

  &:before {
    transform: translateY(calc(var(--burger-icon-stroke-width) + var(--burger-icon-gutter))) rotate(var(--burger-icon-cross-angle, 45deg));
  }

  &:after {
    transform: translateY(calc(-1 * var(--burger-icon-stroke-width) - var(--burger-icon-gutter))) rotate(calc(-1 * var(--burger-icon-cross-angle, 45deg)));
  }
}