@use "sass:math";

@function calculateRem($size) {
  @return (math.div($size, $font-base))+rem;
}

@function calculateEm($size) {
  @return (math.div($size, $font-base))+em;
}

@mixin small {
  @media (max-width: #{$small-max}) {
    @content;
  }
}

@mixin medium {
  @media (min-width: #{$medium}) {
    @content;
  }
}

@mixin large {
  @media (min-width: #{$large}) {
    @content;
  }
}

@mixin extra-large {
  @media (min-width: #{$x-large}) {
    @content;
  }
}

@function createColor($value) {
  @if($color-type == hsl) {
    @return createHSLColor($value);
  }
  @else if($color-type == rgba) {
    @return createRGBAColor($value);
  }
  @else if($color-type == hex) {
    @return createHexColor($value);
  }
  @warn "Invalid color type: `#{$color-type}`.";
  @return null;
}

@function createHSLColor($value) {
  $hue: hue($value);
  $saturation: saturation($value);
  $lightness: lightness($value);
  $alpha: alpha($value);
  @return unquote("hsl(#{$hue}, #{$saturation}, #{$lightness}, #{$alpha})");
}

@function createRGBAColor($value) {
  $red: red($value);
  $green: green($value);
  $blue: blue($value);
  $alpha: alpha($value);
  @return unquote("rgba(#{$red}, #{$green}, #{$blue}, #{$alpha})");
}

@function createHexColor($value) {
  $hex: ie_hex_str($value);
  @return unquote("#" + str_slice($hex, 4));
}

@mixin element-color($background, $border, $color: getTextColor($background)) {
  background-color: $background;
  border-color: $border;
  color: $color;
}

// This does not always yield perfect results. Know a better solution? Please contribute!
@function getTextColor($color) {
  @if(lightness($color) > 60) {
    @return var(--color-black);
  }
  @else {
    @return var(--color-white);
  }
}