@use 'sass:string';
@use 'sass:meta';

/// Adds the border radius property along with the background-clip: padding box
/// property, value pair.
///
/// @param {Number} $radius [10px] - The border-radius value.
///
/// @group Utilities
@mixin border-radius($radius: 10px) {
  @if meta.type-of($radius) == 'string' {
    $radius: string.to-lower-case($radius);
  }

  @if meta.type-of($radius) ==
    'string' and
    ($radius == 'circle' or $radius == 'circ' or $radius == 'cir')
  {
    $radius: 50%;
  }

  border-radius: $radius;
  background-clip: padding-box; // Stops bg color from leaking outside the border
}