@use "sass:map";
@use "sass:list";

$prefix: "--uikit-theme";

$themes: (
  "light",
  "dark",
);

$colors: (
  "bg-color-topbar",
  "bg-color-operate",
  "bg-color-input",
  "bg-color-bubble-reciprocal",
  "bg-color-bubble-own",
  "bg-color-default",
  "bg-color-tag-mask",
  "bg-color-mask",
  "text-color-primary",
  "text-color-secondary",
  "text-color-tertiary",
  "text-color-disable",
  "text-color-link",
  "text-color-link-hover",
  "text-color-link-disabled",
  "text-color-anti-primary",
  "text-color-anti-secondary",
  "text-color-warning",
  "text-color-success",
  "text-color-error",
  "dropdown-color-default",
  "dropdown-color-hover",
  "dropdown-color-active",
  "list-color-default",
  "list-color-hover",
  "list-color-active",
  "stroke-color-primary",
  "stroke-color-secondary",
  "shadow-color",
  "floating-color-default",
  "floating-color-operate",
  "toast-color-default",
  "toast-color-success",
  "toast-color-warning",
  "toast-color-error",
  "button-color-hangup",
  "button-color-accept",
);

$color-map: ();

@mixin theme() {
  @each $theme in $themes {

    $color-map: () !global;

    [data-uikit-theme="#{$theme}"] & {
      @each $color in $colors {
        $value: --uikit-theme-#{$theme}-#{$color};
        $color-map: map.merge($color-map, ($color: var($value))) !global;
      }

      @content;

      transition: 
        background-color 0.3s ease-out,
        border-color 0.3s ease-out;
    }
  }
}

@function get($color) {
  @if map.get($color-map, $color) {
    @return map.get($color-map, $color);
  } @else {
    @return var(--uikit-basic-color-#{$color});
  }
}