@use 'sass:list';
@use 'sass:math';
@use '../../functions/tint' as *;
@use '../../functions/to-fixed' as *;

/// Creates a menu icon 'hamburger' with a set width, height, number of bars,
/// and colors. The mixin uses the height of the icon and the weight of the bars
/// to determine spacing.
///
/// @param {Color} $color [#112] - Color to use for the icon.
/// @param {Color} $color-hover [hsl(0 0% 54.12%)] - Color to use when the icon
/// is hovered over.
/// @param {Number} $width [20px] - Width of the icon.
/// @param {Number} $height [$width * 0.8] - Total height of the icon.
/// @param {Number} $bars [3] - Number of bars in the icon.
/// @param {Number} $thickness [to-fixed(math.div($width, 6 + $bars), 3)] -
/// Height of individual bars or 'patties' in the hamburger.
/// @param {List} $transition: - The transition property you want to apply to
/// the hover and active states of the hamburger button.
///
/// @group Utilities
/// @require {function} tint
/// @require {function} to-fixed
@mixin hamburger(
  $color: #112,
  $color-hover: tint($color, 20%),
  $color-active: tint($color, 12%),
  $width: 3rem,
  $height: $width * 0.8,
  $bars: 3,
  $thickness: to-fixed(math.div($width, 6 + $bars), 3),
  $transition: (
    backgound-color 0.25s ease-in,
    box-shadow 0.25s ease-in
  )
) {
  // box-shadow CSS output
  $shadow: ();
  $hover-shadow: ();
  $active-shadow: ();

  // Spacing between bars is calculated based on the total height of the icon
  // and the weight of each bar
  $spacing: math.div(($height - ($thickness * $bars)), ($bars - 1));

  @if math.unit($spacing) == 'px' {
    $spacing: math.floor($spacing);
  }

  @for $i from 2 through $bars {
    $offset: ($thickness + $spacing) * ($i - 1);
    $shadow: list.append($shadow, 0 $offset 0 $color, comma);
  }

  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: $width;
  height: $height;
  cursor: pointer;

  // Hamburger 'patties' / Horizontal icon bars
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: $thickness;
    background: $color;
    box-shadow: $shadow;

    @if $transition {
      transition: $transition;
    }
  }

  // Hover & focus state
  @if $color-hover {
    @for $i from 2 through $bars {
      $offset: ($thickness + $spacing) * ($i - 1);
      $hover-shadow: list.append(
        $hover-shadow,
        0 $offset 0 $color-hover,
        comma
      );
    }

    &:hover::after {
      background: $color-hover;
      box-shadow: $hover-shadow;
    }

    &:focus-visible::after {
      background: $color-hover;
      box-shadow: $hover-shadow;
    }
  }

  // Active state
  @if $color-active {
    @for $i from 2 through $bars {
      $offset: ($thickness + $spacing) * ($i - 1);
      $active-shadow: list.append(
        $active-shadow,
        0 $offset 0 $color-active,
        comma
      );
    }

    &:active::after {
      background: $color-active;
      box-shadow: $active-shadow;
    }
  }
}