@mixin with-theme($theme, $element-class, $default-theme) {
  $is-default: $theme == $default-theme;

  $theme-attr: "[data-theme=#{$theme}]";
  $prefix-theme-attr: if($is-default, ":root, #{$theme-attr}", $theme-attr);

  $selector: if(
    $element-class,
    "#{$prefix-theme-attr} .mie#{$element-class}, .mie#{$element-class}#{$theme-attr}",
    $theme-attr
  );

  #{$selector} {
    @content;
  }
}

@mixin with-default-theme($element-class, $default-theme) {
  @include with-theme($default-theme, $element-class, $default-theme) {
    @content;
  }
}

@mixin with-light-theme($element-class, $default-theme) {
  @include with-theme("light", $element-class, $default-theme) {
    @content;
  }
}

@mixin with-dark-theme($element-class, $default-theme) {
  @include with-theme("dark", $element-class, $default-theme) {
    @content;
  }
}
