import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
import "./styles/scrim.css";
import { toRef } from "vue";
import { defineComponent } from "../../utils";
import { MaybeTransition, makeTransitionProps } from "../../composables/transition";
import { useBackgroundColor } from "../../composables/color";
import { FadeTransition } from "../transition";
const Scrim = defineComponent({
  name: "VeScrim",
  inheritAttrs: false,
  props: {
    modelValue: Boolean,
    color: String,
    ...makeTransitionProps({
      transition: {
        component: FadeTransition
      }
    })
  },
  setup(props, {
    attrs
  }) {
    const {
      backgroundColorClasses,
      backgroundColorStyles
    } = useBackgroundColor(toRef(props, "color"));
    return () => {
      return _createVNode(MaybeTransition, {
        "transition": props.transition,
        "appear": true
      }, {
        default: () => [props.modelValue && _createVNode("div", _mergeProps({
          "class": ["ve-scrim", backgroundColorClasses.value],
          "style": backgroundColorStyles.value
        }, attrs), null)]
      });
    };
  }
});
export {
  Scrim
};
//# sourceMappingURL=scrim.mjs.map
