////
/// Core Group Annotations
/// @group core
////

$fontsizes-helpers-map: (
  xxs:  12,
  xs:   14,
  sm:   16,
  md:   20,
  lg:   24,
  xl:   32,
  xxl:  44,
  xxxl: 56
) !default;

/* `````````````````````
  FUNCTIONS
````````````````````` */

/// Return numeric value that doesn't have the unit.
///
/// @param {String} $value - Sized unit to be cleaned
///
/// @example
///   clean-unit(12px);

@function clean-unit($value) {
  @if (is-null($value)) {
    @return $value;
  }
  @return ($value / ($value * 0 + 1));
}

/// Map deep get
/// @author Hugo Giraudel
/// @access public
/// @param {Map} $map - Map
/// @param {Arglist} $keys - Key chain
/// @return {*} - Desired value
@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;
}

/// Return rem from px
///
/// @param {String} $px - Font size in pixels
/// @param {String} $root-font-size [$base-font-size-px] - Pixel font size for conversion
///
/// @example scss - Get 1rem conversion from 16px, using $base-font-size-px
///   .foo {
///     font-size: px-rem(12px);
///   }

@function px-rem($px, $root-font-size: $base-font-size-px) {
  @return clean-unit($px / $root-font-size) * 1rem;
}

/// Return font-size value from type map and convert to rem.
///
/// @param {Number} $size [16] - Type scale value from `$type-scale` (Default to 16 = 16px)
///
/// @example scss - Set font-size to 1.5rem (24px)
///   .foo {
///     font-size: font-size(24);
///   }

@function font-size($size: 16) {
  @return px-rem(map-get($type-scale, $size));
}

/// Return line-height value from line-height map.
///
/// @param {String} $scale ["normal"] - Type scale value from `$line-height-scale` (Default to "normal" = 1.5)
///
/// @example scss - Set line-height to loose (2)
///   .foo {
///     line-height: line-height("loose");
///   }

@function line-height($scale: normal) {
  @return map-get($line-height-scale, $scale);
}

/// Return font-weight value from font-weight map.
///
/// @param {String} $scale ["regular"] - Type scale value from `$weight-scale` (Default to "regular" = 400)
///
/// @example scss - Set font-weight to bold (700)
///   .foo {
///     font-weight: font-weight("bold");
///   }

@function font-weight($scale: regular) {
  @return map-get($weight-scale, $scale);
}

/// Return space value from type map and convert to rem.
///
/// @param {Number} $scale [2] - Space scale value from `$space-scale` (Default to  1N = 8px)
///
/// @example scss - Set margin-bottom to 24px
///   .foo {
///     margin-bottom: space(3N);
///   }

@function space($scale) {
  @return px-rem(map-get($space-scale, $scale));
}

/* `````````````````````
  MIXINS
````````````````````` */

/// Set font size
///
/// @param {Number} $size [16] - Type scale value from `$type-scale` (Default to 16 = 16px)
///
/// @require {variable} $type-scale
///
/// @example scss - Set font-size to 1.5rem (24px)
///   .foo {
///     @include font-size(24);
///   }

@mixin font-size($size) {
  font-size: font-size($size);
}

/// Set line-height
///
/// @param {String} $scale ["normal"] - Type scale value from `$line-height-scale` (Default to "normal" = 1.5)
///
/// @example scss - Set line-height to loose (2)
///   .foo {
///     @include line-height(2);
///   }

@mixin line-height($value: normal) {
  line-height: line-height($value);
}

/// Set space property
///
/// @param {String} $property ["margin"] - Property to apply spacing `["margin", "padding"]`
/// @param {Number} $scale [2] - Space scale value from `$space-scale` (Default to  2 = 8px)
/// @param {String} $direction - Direction of the spacing `["top", "right", "bottom", "left"]`
///
/// @example scss - Set margin-bottom to 24px
///   .foo {
///     @include space("margin", 3N, "bottom");
///   }

@mixin space($property: margin, $size: 1N, $direction: null) {
  $scale: px-rem(map-get($space-scale, $size));
  @if $direction {
    @if $direction == 'x' {
      #{$property}-left: $scale;
      #{$property}-right: $scale;
    }
    @else if $direction == 'y' {
      #{$property}-top: $scale;
      #{$property}-bottom: $scale;
    }
    @else {
      #{$property}-#{$direction}: $scale;
    }
  }
  @else {
    #{$property}: $scale;
  }
}

/// Set media query styles
///
/// @param {String} $media [md] - Layout size `["xs", "sm", "md", "lg", "xl"]`
///
/// @example scss -
///   .foo {
///     @include respond-from(md) {
///     }
///   }

@mixin respond-from($media) {
  @if $media == xs {
    @media (min-width: 0) {
      @content;
    }
  }
  @else if $media == sm {
    @media (min-width: $bp-sm) {
      @content;
    }
  }
  @else if $media == md {
    @media (min-width: $bp-md) {
      @content;
    }
  }
  @else if $media == lg {
    @media (min-width: $bp-lg) {
      @content;
    }
  }
  @else if $media == xl {
    @media (min-width: $bp-xl) {
      @content;
    }
  }
  @else if $media == null {
    @content;
  }
}

/// Set text style
///
/// @param {String} $type [md] - text types `["xs, "sm", "md", "lg", "lead"]` - (Default to "md")
///
/// @example scss -
///   .foo {
///     @include text-styles(lg);
///   }

@mixin text-styles($type: md) {
  @if ($type == md) {
    font-size: font-size();
    line-height: line-height();
  }
  @else if ($type == lg) {
    font-size: font-size(18);
    line-height: line-height();

    @include respond-from(md) {
      font-size: font-size(20);
    }
  }
  @else if ($type == sm) {
    font-size: font-size(14);
    line-height: line-height();
  }
  @else if ($type == xs) {
    font-size: font-size(12);
    line-height: line-height();
    @include scheme-element-text-color(g600);
  }
  @else if ($type == lead) {
    font-size: font-size(20);
    line-height: line-height("snug");

    @include respond-from(md) {
      font-size: font-size(24);
    }
  }
}

@mixin font-weight() {
  @each $name, $test in $weight-scale {
    .#{$prefix}-text--#{$name} {
      font-weight: $test;
    }
  }
}