@import "themes";

@mixin themeify($themes: $themes) {
  @each $theme-name, $theme-map in $themes {
    $theme-map: $theme-map !global;
    [data-theme="#{""+$theme-name}"] & {
      @content;
      $theme-map: null !global;
    }
  }
}

@mixin sizify($size: $sizes) {
  @each $size-name, $size-map in $sizes {
    $size-map: $size-map !global;
    [data-size="#{""+$size-name}"] & {
      @content;
      $size-map: null !global;
    }
  }
}


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

@function sized($key) {
  @return map-get($size-map, $key);
}

@mixin background-color($color) {
  @include themeify($themes) {
    background-color: themed($color) !important;
  }
}

@mixin border-color($color) {
  @include themeify($themes) {
    border-color: themed($color) !important;
  }
}

@mixin border-left-color($color) {
  @include themeify($themes) {
    border-left-color: themed($color) !important;
  }
}

@mixin border-top-color($color) {
  @include themeify($themes) {
    border-top-color: themed($color) !important;
  }
}

@mixin border-right-color($color) {
  @include themeify($themes) {
    border-right-color: themed($color) !important;
  }
}

@mixin border-bottom-color($color) {
  @include themeify($themes) {
    border-bottom-color: themed($color) !important;
  }
}

@mixin font-color($color) {
  @include themeify($themes) {
    color: themed($color) !important;
  }
}

@mixin table-background-image($color) {
  @include themeify($themes) {
    background-image: linear-gradient(themed($color), themed($color)), linear-gradient(themed($color), themed($color)) !important
  }
}

@mixin stroke-color($color) {
  @include themeify($themes) {
    stroke: themed($color) !important;
  }
}

@mixin height($value) {
  @include sizify($sizes) {
    height: sized($value) !important;
  }
}
@mixin not-important-height($value) {
  @include sizify($sizes) {
    height: sized($value);
  }
}

@mixin width($value) {
  @include sizify($sizes) {
    width: sized($value) !important;
  }
}

@mixin line-height($value) {
  @include sizify($sizes) {
    line-height: sized($value) !important;
  }
}

@mixin margin-bottom($value) {
  @include sizify($sizes) {
    margin-bottom: sized($value) !important;
  }
}

@mixin bottom($value) {
  @include sizify($sizes) {
    bottom: sized($value) !important;
  }
}

@mixin top($value) {
  @include sizify($sizes) {
    top: sized($value) !important;
  }
}

@mixin padding-left($value) {
  @include sizify($sizes) {
    padding-left: sized($value) !important;
  }
}

@mixin padding-right($value) {
  @include sizify($sizes) {
    padding-right: sized($value) !important;
  }
}

@mixin padding-top($value) {
  @include sizify($sizes) {
    padding-top: sized($value) !important;
  }
}

@mixin padding-bottom($value) {
  @include sizify($sizes) {
    padding-bottom: sized($value) !important;
  }
}

@mixin min-height($value) {
  @include sizify($sizes) {
    min-height: sized($value) !important;
  }
}