import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, unref, withCtx } from "vue";
import { ScalarButton, ScalarIcon, cva, cx } from "@scalar/components";
//#region src/v2/features/settings/components/Appearance.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "flex flex-col gap-2" };
var Appearance_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "Appearance",
	props: { colorMode: {} },
	emits: ["update:colorMode"],
	setup(__props, { emit: __emit }) {
		const emit = __emit;
		const buttonStyles = cva({
			base: "w-full shadow-none text-c-1 justify-start pl-2 gap-2 border",
			variants: { active: {
				true: "bg-primary text-c-1 hover:bg-inherit",
				false: "bg-b-1 hover:bg-b-2"
			} }
		});
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock("div", _hoisted_1, [
				createVNode(unref(ScalarButton), {
					class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: __props.colorMode === "system" }))),
					onClick: _cache[0] || (_cache[0] = ($event) => emit("update:colorMode", "system"))
				}, {
					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", { "bg-c-accent text-b-1 border-transparent": __props.colorMode === "system" }]) }, [__props.colorMode === "system" ? (openBlock(), createBlock(unref(ScalarIcon), {
						key: 0,
						icon: "Checkmark",
						size: "xs",
						thickness: "3.5"
					})) : createCommentVNode("", true)], 2), _cache[3] || (_cache[3] = createTextVNode(" System Preference (default) ", -1))]),
					_: 1
				}, 8, ["class"]),
				createVNode(unref(ScalarButton), {
					class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: __props.colorMode === "light" }))),
					onClick: _cache[1] || (_cache[1] = ($event) => emit("update:colorMode", "light"))
				}, {
					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", { "bg-c-accent text-b-1 border-transparent": __props.colorMode === "light" }]) }, [__props.colorMode === "light" ? (openBlock(), createBlock(unref(ScalarIcon), {
						key: 0,
						icon: "Checkmark",
						size: "xs",
						thickness: "3.5"
					})) : createCommentVNode("", true)], 2), _cache[4] || (_cache[4] = createTextVNode(" Light Mode Always ", -1))]),
					_: 1
				}, 8, ["class"]),
				createVNode(unref(ScalarButton), {
					class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: __props.colorMode === "dark" }))),
					onClick: _cache[2] || (_cache[2] = ($event) => emit("update:colorMode", "dark"))
				}, {
					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", { "bg-c-accent text-b-1 border-transparent": __props.colorMode === "dark" }]) }, [__props.colorMode === "dark" ? (openBlock(), createBlock(unref(ScalarIcon), {
						key: 0,
						icon: "Checkmark",
						size: "xs",
						thickness: "3.5"
					})) : createCommentVNode("", true)], 2), _cache[5] || (_cache[5] = createTextVNode(" Dark Mode Always ", -1))]),
					_: 1
				}, 8, ["class"])
			]);
		};
	}
});
//#endregion
export { Appearance_vue_vue_type_script_setup_true_lang_default as default };

//# sourceMappingURL=Appearance.vue.script.js.map