// Mixes a color with black to create its shade.
// --------------------------------------------------------------------------------------------
@function get-color-shade($color) {
  @return mix(#000, $color, 12%);
}

// Mixes a color with white to create its tint.
// --------------------------------------------------------------------------------------------
@function get-color-tint($color) {
  @return mix(#fff, $color, 10%);
}
// Converts a color to a comma separated rgb.
// --------------------------------------------------------------------------------------------
@function color-to-rgb-list($color) {
  @return #{red($color)},#{green($color)},#{blue($color)};
}

@mixin font-smoothing() {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

// Get the key from a map based on the index
@function index-to-key($map, $index) {
  $keys: map-keys($map);

  @return nth($keys, $index);
}

// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    576px
@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {
  $min: map-get($breakpoints, $name);

  @return if($name != index-to-key($breakpoints, 1), $min, null);
}

// Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
// --------------------------------------------------------------------------------------------
// Example usage:
// lar-color(primary, base) => var(--lar-color-primary, #3880ff)
// lar-color(secondary, contrast) => var(--lar-color-secondary-contrast)
// lar-color(primary, base, 0.5) => rgba(var(--lar-color-primary-rgb, 56, 128, 255), 0.5)
// --------------------------------------------------------------------------------------------
@function lar-color($name, $variation, $alpha: null, $rgb: null) {
  $values: map-get($colors, $name);
  $value: map-get($values, $variation);
  $variable: --lar-color-#{$name}-#{$variation};

  @if ($variation == base) {
    $variable: --lar-color-#{$name};
  }

  @if ($alpha) {
    $value: color-to-rgb-list($value);
    @return rgba(var(#{$variable}-rgb, $value), $alpha);
  }
  @if ($rgb) {
    $value: color-to-rgb-list($value);
    $variable: #{$variable}-rgb;
  }

  @return var(#{$variable}, $value);
}