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

/// Creates an infinity symbol out of an element, better browser support than
/// clip-path.
///
/// @param {Number} $size [60px] - A single value used to generate
/// the height and width of the symbol.
/// @param {Color | Mixed} $symbol-color [#000] The color of the symbol.
/// @param {Number} $rad-val [50px] - The border-radius value
/// that creates the infinity shape. Can be altered to mutate the shape.
///
/// @group Shapes
/// @require {function} to-fixed
@mixin infinity-symbol($size: 130px, $symbol-color: #000, $rad-val: 50px) {
  // Magic numbers used in $size calculations were just the values that were
  // closest to making the infinity symbol come out right at different sizes.
  $component-size: to-fixed($size * 0.4615389, 2);

  position: relative;
  width: $size;
  height: to-fixed($size * 0.76923077, 2);

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 0;
    width: $component-size;
    height: $component-size;
    border: 10px solid #{$symbol-color};
  }

  &::before {
    left: 0;
    border-radius: #{$rad-val} #{$rad-val} 0;
    transform: rotate(-45deg);
  }

  &::after {
    right: 0;
    left: auto;
    border-radius: #{$rad-val} #{$rad-val} #{$rad-val} 0;
    transform: rotate(45deg);
  }
}