@import "./theme.scss";

@mixin themeify {
  @each $theme-name, $theme-map in $themes {
    $theme-map :$theme-map !global;
    [kf-theme='#{$theme-name}' ] & {
      @content
    }
  }
}

@function themed($key){
    @return map-get($theme-map, $key);
}

@mixin colorWithAlpha($color,$key,$alpha:1,$important:false) {
  @include themeify{
    @if ($key == background) {
      background: rgba(themed($color),$alpha) if($important, !important,null);
    } @else if ($key == color) {
      color:rgba(themed($color),$alpha) if($important, !important,null);;
    } @else if ($key == borderColor) {
      border-color: rgba(themed($color),$alpha) if($important, !important,null);;
    }
  }
}

@mixin colorValueByKey($color,$key,$important:false) {
  @include themeify{
    @if ($key == background) {
      background: themed($color) if($important, !important,null);
    } @else if ($key == color) {
      color:themed($color) if($important, !important,null);;
    } @else if ($key == borderColor) {
      border-color: themed($color) if($important, !important,null);;
    }
  }
}

@mixin colorValue($color,$important:false) {
  @include themeify{
    color: themed($color) if($important, !important,null);
  }
}

@mixin bgValue($color,$important:false) {
  @include themeify{
    background: themed($color) if($important, !important,null);
  }
}

@mixin bgLinearValue($color1,$color2,$important:false) {
  @include themeify{
    background: linear-gradient(themed($color2), themed($color2)),linear-gradient(themed($color1), themed($color1)) if($important, !important,null);
  }
}



@mixin borderValue($color,$important:false) {
  @include themeify{
    border-color: themed($color) if($important, !important,null);
  }
}


@mixin borderStyle($width,$style:'solid',$color,) {
  @include themeify{
    border: $width $style themed($color) ;
  }
}