// Functions

// Remove the unit of a length
@function strip-unit($number) {
  @if type-of($number) == "number" and not unitless($number) {
    @return divide($number, ($number * 0 + 1));
  }

  @return $number;
}

// Convert size px to rem
@function px-to-rem($value) {
  // Assumes the browser default font size = `16px`
  @return (divide(strip-unit($value), 16)) * 1rem;
}

// Convert size rem to px
@function rem-to-px($value) {
  // Assumes the browser default font size = `16px`
  @return (strip-unit($value) * 16) * 1px;
}

// * Colors
// *******************************************************************************

// ? Override shade, tint and shift function with custom background color option i.e $card-bg to make it similar like design
// Shade a color: mix a color with background/white
@function tint-color($color, $weight, $background: null) {
  $background: if($background, $background, #fff);

  @return mix($background, $color, $weight);
}

// Shade a color: mix a color with background/black
@function shade-color($color, $weight, $background: null) {
  $background: if($background, $background, #000);

  @return mix($background, $color, $weight);
}

// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight, $background: null) {
  @return if($weight > 0, shade-color($color, $weight, $background), tint-color($color, -$weight));
}