@bagelink/vue 0.0.807 → 0.0.809

package/src/components/form/BglForm.vue

@@ -9,7 +9,7 @@ const props = withDefaults(
 		label?: string
 		id?: string
 		schema: BglFormSchemaFnT<any>
-		modelValue?: Record<string, any>
+		modelValue?: { [key: string]: any }
 		onDelete?: (id: string) => void
 		onSubmit?: (data: any) => void
 		status?: FormStatus
@@ -26,7 +26,7 @@ const slots = useSlots()
 const { showModal } = useModal()
 
 const instAt = new Date()
-const timeSinceInst = () => new Date().getTime() - instAt.getTime()
+const timeSinceInst = () => Date.now() - instAt.getTime()
 let formData = $ref(props.modelValue || {})
 let isDirty = $ref(false)
 let data = $computed({

package/src/components/form/inputs/CheckInput.vue

@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<{
 	value?: any
 }>(), { defaultValue: false })
 
-const inputId = $computed(() => props.id || Math.random().toString(36).substring(7))
+const inputId = $computed(() => props.id || Math.random().toString(36).slice(7))
 
 const checked = defineModel<boolean | undefined | any[]>('modelValue', { default: undefined })
 

package/src/components/form/inputs/ColorPicker.vue

@@ -10,7 +10,7 @@ const props = withDefaults(
 		editMode?: boolean
 		small?: boolean
 		required?: boolean
-		nativeInputAttrs?: Record<string, any>
+		nativeInputAttrs?: { [key: string]: any }
 	}>(),
 	{
 		editMode: true,

package/src/components/form/inputs/DatePicker.vue

@@ -5,7 +5,7 @@ import '@vuepic/vue-datepicker/dist/main.css'
 const props = defineProps<{
 	label?: string
 	id?: string
-	options?: Record<string, any>
+	options?: { [key: string]: any }
 	showTimeWrap?: boolean
 	modelValue?: Date
 	allowedDates?: string[] | Date[]

package/src/components/form/inputs/FileUpload.vue

@@ -45,9 +45,9 @@ async function fetchFiles() {
 
 onMounted(() => {
 	if (props.topic) fetchFiles()
-	if (!props.files && [file_bindkeys].flat().length) {
-		const ids = [file_bindkeys].flat().filter(Boolean)
-		if (!ids.length) return
+	if (!props.files && [file_bindkeys].flat().length > 0) {
+		const ids = [file_bindkeys].flat().filter(Boolean) as (string | number)[] | undefined
+		if (!ids?.length) return
 		if (props.multiple) {
 			ids.forEach((id) => {
 				void bagel
@@ -74,7 +74,7 @@ watch(
 		if (newFiles) {
 			const filesToAdd = [newFiles]
 				.flat()
-				.filter(f => !storageFiles.find(sf => sf[bindKey] === f[bindKey]))
+				.filter(f => !storageFiles.some(sf => sf[bindKey] === f[bindKey]))
 			for (const file of filesToAdd) {
 				storageFiles.push(file)
 			}

package/src/components/form/inputs/OTP.vue

@@ -4,14 +4,14 @@ import { reactive } from 'vue'
 const props = defineProps<{ digitCount: number, default?: string, modelValue?: string }>()
 
 const emit = defineEmits(['update:modelValue', 'complete'])
-const digits = reactive<(number | string | null)[]>([])
+const digits = reactive<(number | string | undefined)[]>([])
 const otpCont = $ref<HTMLElement>()
 
 function handlePaste(event: ClipboardEvent, index: number) {
 	event.preventDefault()
 	const { clipboardData } = event
-	const pastedText = clipboardData?.getData('text').replace(/\D/g, '') // Ensure only numeric digits are pasted
-	const pastedDigits = pastedText?.split('')
+	const pastedText = clipboardData?.getData('text').replaceAll(/\D/g, '') // Ensure only numeric digits are pasted
+	const pastedDigits = [...(pastedText ?? '')]
 	if (!pastedDigits) return
 	for (let i = 0; i < pastedDigits.length; i++) {
 		const digit = pastedDigits[i]
@@ -37,7 +37,7 @@ function handleKeyDown(event: KeyboardEvent, index: number) {
 	}
 
 	if (event.key === 'Backspace') {
-		digits[index] = null
+		digits[index] = undefined
 
 		if (index !== 0) {
 			const prevDigit = otpCont?.children[index - 1] as any
@@ -67,13 +67,13 @@ if (props.default && props.default.length === props.digitCount) {
 	}
 } else {
 	for (let i = 0; i < props.digitCount; i++) {
-		digits[i] = null
+		digits[i] = undefined
 	}
 }
 
 function isDigitsFull() {
 	for (const elem of digits) {
-		if (elem == null || elem == undefined) {
+		if (elem === undefined) {
 			return false
 		}
 	}

package/src/components/form/inputs/PasswordInput.vue

@@ -13,7 +13,7 @@ export interface TextInputProps {
 	pattern?: string
 	shrink?: boolean
 	disabled?: boolean
-	nativeInputAttrs?: Record<string, any>
+	nativeInputAttrs?: { [key: string]: any }
 	icon?: MaterialIcons
 	iconStart?: MaterialIcons
 	multiline?: boolean

package/src/components/form/inputs/RadioPillsInput.vue

@@ -12,7 +12,7 @@ const props = withDefaults(
 	}>(),
 	{
 		modelValue: '',
-		id: () => `radio-pill-${Math.random().toString(36).substring(2, 9)}`,
+		id: () => `radio-pill-${Math.random().toString(36).slice(2, 9)}`,
 		label: '',
 	},
 )

package/src/components/form/inputs/RichText.vue

@@ -50,7 +50,7 @@ const config: {
 	name: string
 	command: any
 	icon: MaterialIcons
-	option?: Record<string, any>
+	option?: { [key: string]: any }
 	disabled?: () => boolean
 }[] = [
 	{

package/src/components/form/inputs/RichText2/Toolbar.vue

@@ -6,8 +6,8 @@ import SelectInput from '../SelectInput.vue'
 defineProps<{ config: ToolbarConfig }>()
 const emit = defineEmits(['action'])
 
-// const colorPicker = $ref<HTMLInputElement | null>(null)
-// const fontSizeInput = $ref<HTMLInputElement | null>(null)
+// const colorPicker = $ref<HTMLInputElement | undefined>()
+// const fontSizeInput = $ref<HTMLInputElement | undefined>()
 
 interface toolbarOption {
 	name: ToolbarConfigOption | 'separator'

package/src/components/form/inputs/RichText2/formatting.ts

@@ -104,7 +104,7 @@ function increaseFontSize() {
 }
 
 function decreaseFontSize() {
-
+// TODO:
 }
 
 function removeFormatting() {
@@ -135,7 +135,7 @@ function insertList(type: string) {
 		const list = document.createElement(type)
 		const listItem = document.createElement('li')
 		listItem.textContent = range.toString()
-		list.appendChild(listItem)
+		list.append(listItem)
 		range.deleteContents()
 		range.insertNode(list)
 	}
@@ -158,7 +158,9 @@ export function insertImage() {
 	console.log('image')
 	const { showModalForm } = useModal()
 	console.log(showModalForm)
-	showModalForm({ title: 'Upload Image', schema: [{ id: 'image', type: 'file' }], onSubmit: (data) => {} })
+	showModalForm({ title: 'Upload Image', schema: [{ id: 'image', type: 'file' }], onSubmit: (_data) => {
+		//
+	} })
 	// const url = prompt('Enter the image URL:')
 	// if (url) {
 	// 	const selection = window.getSelection()

package/src/components/form/inputs/RichText2/index.vue

@@ -7,7 +7,7 @@ import Toolbar from './Toolbar.vue'
 const props = defineProps<{ modelValue: string, toolbarConfig?: ToolbarConfig }>()
 const emit = defineEmits(['update:modelValue'])
 
-const editableContent = $ref<HTMLElement | null>(null)
+const editableContent = $ref<HTMLElement | undefined>()
 const defaultConfig: ToolbarConfig = [
 	'bold',
 	'italic',

package/src/components/form/inputs/SelectInput.vue

@@ -32,14 +32,14 @@ const emit = defineEmits(['update:modelValue'])
 
 const searchPlaceholder = $computed(() => props.searchPlaceholder || 'Search')
 
-const searchInput = $ref<HTMLInputElement | null>(null)
+const searchInput = $ref<HTMLInputElement | undefined>()
 
 let selectedItems = $ref<Option[]>([])
 
 const selectedItemCount = $computed(() => selectedItems.length ?? 0)
 let search = $ref<string>('')
 
-const dropdown = $ref<InstanceType<typeof Dropdown> | null>(null)
+const dropdown = $ref<InstanceType<typeof Dropdown> | undefined>()
 let selected = $ref(false)
 let open = $ref(false)
 
@@ -64,7 +64,7 @@ const filteredOptions = $computed(() =>	props.options.filter((option) => {
 	const searchTerm = search
 		.split(/\s+/)
 		.filter(Boolean)
-		.map(t => new RegExp(t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi'))
+		.map(t => new RegExp(t.replaceAll(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi'))
 	return (
 		Boolean(option)
 		&& (searchTerm.every(s => getLabel(option).match(s))
@@ -72,7 +72,7 @@ const filteredOptions = $computed(() =>	props.options.filter((option) => {
 	)
 }))
 
-const isSelected = (option: Option) => selectedItems.find(item => getValue(option) === getValue(item)) !== undefined
+const isSelected = (option: Option) => selectedItems.some(item => getValue(option) === getValue(item)) !== undefined
 
 function updateOpen(visible: boolean) {
 	open = visible
@@ -100,7 +100,7 @@ function getLabel(option: Option) {
 }
 
 function getValue(option?: Option) {
-	if (!option) return undefined
+	if (!option) return
 	if (typeof option === 'string') return option
 	if (typeof option === 'number') return option
 	return option.value

package/src/components/form/inputs/SignaturePad.vue

@@ -121,8 +121,8 @@ function draw() {
 		if (!isEmpty()) url = save()
 		const ratio = props.ratio ?? 1 / 2
 		const { width } = c.getBoundingClientRect()
-		c.width = props.width ? Number(props.width.replace(/px/g, '')) : width
-		c.height = props.height ? Number(props.height.replace(/px/g, '')) : width * ratio
+		c.width = props.width ? Number(props.width.replaceAll('px', '')) : width
+		c.height = props.height ? Number(props.height.replaceAll('px', '')) : width * ratio
 		clear()
 		if (!props.clearOnResize && url !== undefined) fromDataURL(url)
 		if (props.waterMark) addWaterMark(props.waterMark)

package/src/components/form/inputs/TableField.vue

@@ -6,14 +6,14 @@ import { VueDraggableNext } from 'vue-draggable-next'
 const props = withDefaults(
 	defineProps<{
 		description?: string
-		meta: Record<string, any> /* EntityMeta */
+		meta: { [key: string]: any } /* EntityMeta */
 		fieldname: string
 		bagelApp?: any
 		modelValue: any
 	}>(),
 	{
 		description: '',
-		bagelApp: null,
+		bagelApp: undefined,
 	},
 )
 const emits = defineEmits(['update:modelValue'])
@@ -21,10 +21,10 @@ let bagel: any
 let api: any
 const listRef = ref(props.modelValue)
 const fieldMeta = props.meta.doc_meta.fields.find(
-	(field: Record<string, any>) => field.fieldname === props.fieldname,
+	(field: { [key: string]: any }) => field.fieldname === props.fieldname,
 )
 const entityMeta = props.meta.links.find(
-	(link: Record<string, any>) => link.id === fieldMeta?.options,
+	(link: { [key: string]: any }) => link.id === fieldMeta?.options,
 )
 
 function handleUpdateModelValue(value: any, index: number, fieldname: string) {
@@ -58,7 +58,7 @@ function removeRow(idx: number) {
 }
 
 function ended() {
-	listRef.value.forEach((item: Record<string, any>, index: number) => {
+	listRef.value.forEach((item: { [key: string]: any }, index: number) => {
 		item.idx = index + 1
 	})
 	emits('update:modelValue', listRef.value)

package/src/components/form/inputs/TelInput.vue

@@ -121,7 +121,7 @@ let selectedIndex = $ref<number>()
 const dropdownOpenDirection = $ref('below')
 const searchQuery = $ref('')
 
-// const refInput = $ref<HTMLInputElement | null>(null)
+// const refInput = $ref<HTMLInputElement | undefined>()
 
 // Computed: activeCountry
 const activeCountry = $computed(() => props.allCountries.find(
@@ -132,11 +132,11 @@ const activeCountry = $computed(() => props.allCountries.find(
 const isPreferred = (country?: Country) => props.preferredCountries.includes(country?.iso2 as CountryCode)
 
 const filteredCountries = $computed(() => {
-	if (props.onlyCountries.length) {
+	if (props.onlyCountries.length > 0) {
 		return props.allCountries.filter(({ iso2 }) => props.onlyCountries.some(c => c.toUpperCase() === iso2),
 		)
 	}
-	if (props.excludeCountries.length) {
+	if (props.excludeCountries.length > 0) {
 		return props.allCountries.filter(
 			({ iso2 }) => !props.excludeCountries.includes(iso2.toUpperCase())
 				&& !props.excludeCountries.includes(iso2.toLowerCase()),
@@ -149,7 +149,7 @@ const sortedCountries = $computed(() => {
 	const preferredCountries = getCountries(props.preferredCountries)
 
 	const countriesList = [...preferredCountries, ...filteredCountries]
-	const cleanInput = searchQuery.replace(
+	const cleanInput = searchQuery.replaceAll(
 		// eslint-disable-next-line regexp/no-obscure-range
 		/[~`!#$%&*()+={};:'"<>.,/?-_]/g,
 		'',

package/src/components/form/inputs/TextInput.vue

@@ -21,7 +21,7 @@ const props = withDefaults(
 		shrink?: boolean
 		disabled?: boolean
 		type?: string
-		nativeInputAttrs?: Record<string, any>
+		nativeInputAttrs?: { [key: string]: any }
 		icon?: MaterialIcons
 		iconStart?: MaterialIcons
 		multiline?: boolean

package/src/components/form/inputs/ToggleInput.vue

@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<{
 	defaultValue?: boolean
 }>(), { defaultValue: false })
 
-const inputId = $ref(props.id || Math.random().toString(36).substring(7))
+const inputId = $ref(props.id || Math.random().toString(36).slice(7))
 
 const checked = defineModel<boolean | undefined>('modelValue', { default: undefined })
 

package/src/components/formkit/FileUploader.vue

@@ -15,7 +15,7 @@ import { onMounted, onUnmounted } from 'vue'
 
 const props = withDefaults(
 	defineProps<{
-		context: Record<string, any>
+		context: { [key: string]: any }
 		dragDropLabel?: string
 		browseLabel?: string
 		multiple?: boolean

package/src/components/formkit/MiscFields.vue

@@ -2,7 +2,7 @@
 import { Btn } from '@bagelink/vue'
 
 const props = defineProps<{
-	context: Record<string, any>
+	context: { [key: string]: any }
 	addBtnLabel: string
 }>()
 

package/src/components/layout/Layout.vue

@@ -17,14 +17,14 @@ const props = withDefaults(defineProps<LayoutProrps>(), {
 	mRows: () => ([]),
 })
 
-const gridTemplateRows = $computed(() => (props.rows.length ? props.rows.join(' ') : 'auto'))
+const gridTemplateRows = $computed(() => (props.rows.length > 0 ? props.rows.join(' ') : 'auto'))
 const gapSize = $computed(() => `${props.gap}rem`)
 const mGridTemplateRows = $computed(() => {
 	if (props.mRows?.length) return props.mRows.join(' ')
 	return gridTemplateRows
 })
 
-const gridTemplateColumns = $computed(() => (props.columns.length ? props.columns.join(' ') : 'auto'))
+const gridTemplateColumns = $computed(() => (props.columns.length > 0 ? props.columns.join(' ') : 'auto'))
 
 const mGridTemplateColumns = $computed(() => {
 	if (props.mColumns?.length) return props.mColumns.join(' ')

package/src/components/layout/Tabs.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:modelValue'])
 const slots = useSlots()
-const group = Math.random().toString(36).substring(7)
+const group = Math.random().toString(36).slice(7)
 const { currentTab } = useTabs(group)
 
 const tabValue = (tab: Tab) => (typeof tab === 'string' ? tab : tab.id)
@@ -30,7 +30,7 @@ const tabComponent = defineComponent({
 		const currentTabIndex = props.tabs.findIndex(
 			tab => tabValue(tab) === currentTab.value
 		)
-		if (currentTabIndex === -1) return null
+		if (currentTabIndex === -1) return
 		const slotChildren = slots.default?.()[1]?.children
 
 		return h('div', (slotChildren as VNode[])[currentTabIndex])

package/src/components/layout/TabsNav.vue

@@ -26,7 +26,7 @@ currentTab.value
 		? props.tabs[0]
 		: props.tabs[0].id
 
-const tabsWrap = ref<HTMLElement | null>(null)
+const tabsWrap = ref<HTMLElement | undefined>(undefined)
 const tabs = ref<HTMLElement[]>([])
 
 function updateIndicator() {

package/src/components/layout/tabsManager.ts

@@ -4,7 +4,7 @@ const state = reactive(new Map())
 
 export function useTabs(group: string) {
 	if (!state.has(group)) {
-		state.set(group, reactive({ currentTab: null }))
+		state.set(group, reactive({ currentTab: undefined }))
 	}
 
 	const currentTab = computed({

package/src/components/lightbox/Lightbox.vue

@@ -9,10 +9,10 @@ let currentItem = $ref<LightboxItem>()
 let group = $ref<LightboxItem[]>([])
 let currentIndex = $ref(0)
 
-function open(item: LightboxItem, groupItems: LightboxItem[] = []) {
+function open(item: LightboxItem, groupItems?: LightboxItem[]) {
 	isOpen = true
 	currentItem = item
-	if (!groupItems.length) return
+	if (groupItems === undefined) return
 	group = groupItems
 	currentIndex = groupItems.findIndex(({ src }) => item.src === src)
 	document.addEventListener('keydown', handleKeydown)

package/src/components/lightbox/index.ts

@@ -5,22 +5,28 @@ import { createApp } from 'vue'
 import Lightbox from './Lightbox.vue'
 
 type OpenFunction = (item: LightboxItem, groupItems?: LightboxItem[]) => void
-const groups: Record<string, LightboxItem[]> = {}
+const groups: { [key: string]: LightboxItem[] } = {}
+
+let clickHandler: ((e: MouseEvent) => any) = (_e: MouseEvent) => void 0
+
 const lightboxDirective: Directive = {
 	mounted(el: HTMLElement, binding) {
 		el.classList.add('hover')
 		const item = bindingToItem(binding, el)
 		groupHandler(item)
-		el.addEventListener('click', (e) => { openClickHandler(e, el, binding) })
+		clickHandler = (e: MouseEvent) => { openClickHandler(e, el, binding) }
+		el.addEventListener('click', clickHandler)
 	},
 	updated(el: HTMLElement, binding) {
 		const item = bindingToItem(binding, el)
 		groupHandler(item)
-		el.removeEventListener('click', (e) => { openClickHandler(e, el, binding) })
-		el.addEventListener('click', (e) => { openClickHandler(e, el, binding) })
+
+		el.removeEventListener('click', clickHandler)
+		clickHandler = (e: MouseEvent) => { openClickHandler(e, el, binding) }
+		el.addEventListener('click', clickHandler)
 	},
-	unmounted(el: HTMLElement, binding) {
-		el.removeEventListener('click', (e) => { openClickHandler(e, el, binding) })
+	unmounted(el: HTMLElement) {
+		el.removeEventListener('click', clickHandler)
 	}
 }
 
@@ -60,7 +66,7 @@ function determineFileType(url: string): string {
 	return 'unknown'
 }
 
-let lightboxInstance: InstanceType<typeof Lightbox> | null = null
+let lightboxInstance: InstanceType<typeof Lightbox> | undefined
 
 function getLightboxInstance(): InstanceType<typeof Lightbox> {
 	if (!lightboxInstance) {

package/src/composables/index.ts

@@ -9,7 +9,7 @@ interface useBglSchemaParamsT<T> {
 	data?: any[]
 }
 
-export function useBglSchema<T = Record<string, unknown>>(
+export function useBglSchema<T = { [key: string]: unknown }>(
 	{ schema, showFields, data }: useBglSchemaParamsT<T> = {}
 ): BglFormSchemaT<T> {
 	let _schema = schema
@@ -18,7 +18,7 @@ export function useBglSchema<T = Record<string, unknown>>(
 	}
 	if (_schema) {
 		return (
-			showFields && showFields.length
+			showFields && showFields.length > 0
 				? _schema.filter(f => showFields.includes(f.id as string))
 				: _schema
 		) as BglFormSchemaT<T>

package/src/plugins/modal.ts

@@ -19,7 +19,7 @@ export interface ModalFormOptions extends ModalOptions {
 	'onSubmit'?: (formData: any) => any
 	'onDelete'?: (id: string) => Promise<void>
 	'onError'?: (err: any) => void
-	'modelValue'?: Record<string, any>
+	'modelValue'?: { [key: string]: any }
 	'onUpdate:modelValue'?: (val: any) => void
 }
 
@@ -39,7 +39,7 @@ type ModalType = 'modal' | 'modalForm' | 'confirmModal'
 type ConfirmModalUserOptions = string | { title: string, message: string, confirmText?: string, cancelText?: string, confirmBtnColor?: string, cancelBtnColor?: string }
 
 export interface ModalComponentProps {
-	componentSlots: Record<string, any>
+	componentSlots: { [key: string]: any }
 	modalType: ModalType
 	modalOptions: ModalOptions | ModalFormOptions | ModalConfirmOptions
 }
@@ -50,8 +50,8 @@ export interface ModalFormComponentProps extends ModalComponentProps {
 }
 
 export interface ModalApi {
-	showModal: (options: ModalOptions, slots?: Record<string, any>) => ModalComponentProps | undefined
-	showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => ModalFormComponentProps | undefined
+	showModal: (options: ModalOptions, slots?: { [key: string]: any }) => ModalComponentProps | undefined
+	showModalForm: (options: ModalFormOptions, slots?: { [key: string]: any }) => ModalFormComponentProps | undefined
 	hideModal: (index?: number) => void
 	confirmModal: (options: ConfirmModalUserOptions) => Promise<boolean>
 }
@@ -86,7 +86,7 @@ export const ModalPlugin: Plugin = {
 		const showModal = (
 			modalType: ModalType,
 			options: ModalOptions | ModalFormOptions,
-			slots: Record<string, any> = {}
+			slots: { [key: string]: any } = {}
 		): ModalComponentProps | ModalFormComponentProps | undefined => {
 			const modalComponent = {
 				modalOptions: options,
@@ -102,9 +102,9 @@ export const ModalPlugin: Plugin = {
 		}
 
 		app.provide(ModalSymbol, {
-			showModal: (options: ModalOptions, slots?: Record<string, any>) => showModal('modal', options, slots),
+			showModal: (options: ModalOptions, slots?: { [key: string]: any }) => showModal('modal', options, slots),
 
-			showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal('modalForm', options, slots) as ModalFormComponentProps,
+			showModalForm: (options: ModalFormOptions, slots?: { [key: string]: any }) => showModal('modalForm', options, slots) as ModalFormComponentProps,
 
 			confirmModal: (options: ConfirmModalUserOptions) => confirmModal(options),
 

package/src/styles/appearance.css

@@ -478,6 +478,20 @@
     object-fit: scale-down;
 }
 
+
+.shadow-10 {
+    box-shadow: 0 0 10px 0 var(--bgl-shadow) !important;
+}
+
+.shadow-20,
+.shadow {
+    box-shadow: 0 0 20px 0 var(--bgl-shadow) !important;
+}
+
+.shadow-30 {
+    box-shadow: 0 0 30px 0 var(--bgl-shadow) !important;
+}
+
 .shadow-light {
     box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
 }
@@ -1118,4 +1132,26 @@
     .m_user-select-all {
         user-select: all;
     }
+
+    .m_shadow-10 {
+        box-shadow: 0 0 10px 0 var(--bgl-shadow) !important;
+    }
+
+    .m_shadow-20,
+    .m_shadow {
+        box-shadow: 0 0 20px 0 var(--bgl-shadow) !important;
+    }
+
+    .m_shadow-30 {
+        box-shadow: 0 0 30px 0 var(--bgl-shadow) !important;
+    }
+
+    .m_shadow-light {
+        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
+    }
+
+    .m_shadow-txt {
+        filter: drop-shadow(0 0 10px var(--bgl-black-tint));
+    }
+
 }