/// Functions
///--------------------------

/// Add alpha channel to a color
/// @access public
/// @param {Color} $color - color to work with
/// @param {Number} $percentage - percentage of `$color` opacity
/// @return {Color} $color
@function mix-alpha($color, $percentage) {
  @return rgba($color, $percentage);
}

/// Add spacing length according to given unit
/// @access public
/// @param {Number} $num
/// @return {Size} $em
@function space-x($num) {
  @return $num * $space-unit;
}

/// Calculate z-index value
/// @access public
/// @use {List} $z-indexes
/// @param {String} $key1 - key to retrieve for z-index matching
/// @param {String} $key2 - optiona, second key for deeper matching
/// @return {Number} z-index value
@function z-index($key1, $key2: null) {
  $map: $z-indexes;
  $found-index: null;
  @if (map-has-key($map, $key1)) {
    $found-index: index(map-keys($map), $key1);
    @if ($key2) {
      $map: map-get($map, $key1);
      $found-index: index($map, $key2);
    }
  }
  @return $found-index;
}



/// Mixins
///--------------------------

/// UX/UI rules regarding element that can be clicked and
/// others than <a/> tags
@mixin clickable() {
  cursor: pointer;
  &:focus { outline: 0; }
}

@mixin unclickable() {
  cursor: default;
  &:focus { outline: 0; }
}

@mixin unselectable() {
  user-select: none;
}

@mixin disabled() {
  cursor: not-allowed;
  &:focus { outline: 0; }
}

@mixin gradient($primary, $secondary, $direction) {
  background: linear-gradient($direction, $primary, $secondary);
}

/// Place contextualised element (&) at the root,
/// prefixed with left handed class
/// @access public
@mixin left-handed() {
  @at-root .left-handed & {
    @content;
  }
}

/// Place contextualised element (&) at the root,
/// prefixed with right handed class
/// @access public
@mixin right-handed() {
  @at-root .right-handed & {
    @content;
  }
}

/// Centering an element (you'll have to change the position
/// of the element though)
@mixin centered() {
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/// Mixin from "bootstrap v4"
/// @link https://getbootstrap.com/docs/4.3/utilities/clearfix/
@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}

/// Reverse an element
@mixin reversed() {
  transform: scaleX(-1);
}

/// Add led effect with the input color
@mixin led($color) {
  color: $color;
  text-shadow: 0 0 4px brighten($color, 90);
}

/// Extend element to fit all four positions
@mixin fit-positions() {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
