@import "../elements/button/theme";
@import "../elements/page/theme";
@import "../elements/panel/theme";
@import "../elements/forms/theme";
@import "../elements/tooltips/theme";
@import "../elements/modals/theme";
@import "../elements/code/theme";
@import "../elements/table/theme";
@import "colors";

$themes: (
        colors: $colors-theme,
        button: $button-theme,
        page: $page-theme,
        panel: $panel-theme,
        form: $form-theme,
        tooltips: $tooltips-theme,
        modals: $modals-theme,
        code: $code-theme,
        table: $table-theme,
);

@mixin themed($element: 'colors') {
  @each $theme, $map in map-get($themes, $element) {
    .theme--#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get(map-get($themes, $element), $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

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

@mixin useTheme($prop, $color, $theme: 'colors') {
  @include themed($theme) {
    #{$prop}: t($color);
  }
}