quasar 2.16.4 → 2.16.6

package/dist/quasar.client.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.16.4
+ * Quasar Framework v2.16.6
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -8,8 +8,7 @@
 // src/flags.dev.js
 var attachPoint = null;
 function getAttachPoint() {
-  if (attachPoint !== null)
-    return attachPoint;
+  if (attachPoint !== null) return attachPoint;
   return attachPoint = typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {};
 }
 if (typeof __QUASAR_SSR__ !== "boolean") {
@@ -449,8 +448,7 @@ var Screen_default = createReactivePlugin({
   setDebounce: noop,
   install({ $q, onSSRHydrated }) {
     $q.screen = this;
-    if (false)
-      return;
+    if (false) return;
     if (this.__installed === true) {
       if ($q.config.screen !== void 0) {
         if ($q.config.screen.bodyClasses === false) {
@@ -560,8 +558,7 @@ var Plugin = createReactivePlugin({
 }, {
   __media: void 0,
   set(val) {
-    if (false)
-      return;
+    if (false) return;
     Plugin.mode = val;
     if (val === "auto") {
       if (Plugin.__media === void 0) {
@@ -640,10 +637,8 @@ function isKeyCode(evt, keyCodes4) {
 
 // src/plugins/private.body/Body.js
 function getMobilePlatform(is) {
-  if (is.ios === true)
-    return "ios";
-  if (is.android === true)
-    return "android";
+  if (is.ios === true) return "ios";
+  if (is.android === true) return "android";
 }
 function getBodyClasses({ is, has: has2, within }, cfg) {
   const cls = [
@@ -723,8 +718,7 @@ var Body_default = {
       }
       return;
     }
-    if (this.__installed === true)
-      return;
+    if (this.__installed === true) return;
     if (isRuntimeSsrPreHydration.value === true) {
       applyClientSsrCorrections();
     } else {
@@ -769,8 +763,7 @@ var History_default = {
   add: noop,
   remove: noop,
   install({ $q }) {
-    if (this.__installed === true)
-      return;
+    if (this.__installed === true) return;
     const { cordova: cordova2, capacitor } = client.is;
     if (cordova2 !== true && capacitor !== true) {
       return;
@@ -920,8 +913,7 @@ var en_US_default = {
 
 // src/plugins/lang/Lang.js
 function getLocale() {
-  if (false)
-    return;
+  if (false) return;
   const val = Array.isArray(navigator.languages) === true && navigator.languages.length !== 0 ? navigator.languages[0] : navigator.language;
   if (typeof val === "string") {
     return val.split(/[-_]/).map((v, i) => i === 0 ? v.toLowerCase() : i > 1 || v.length < 4 ? v.toUpperCase() : v[0].toUpperCase() + v.slice(1).toLowerCase()).join("-");
@@ -1371,7 +1363,7 @@ function prepareApp(app2, uiOpts, pluginOpts) {
 }
 var install_quasar_default = false ? function(parentApp, opts = {}, ssrContext) {
   const $q = {
-    version: "2.16.4",
+    version: "2.16.6",
     config: opts.config || {}
   };
   Object.assign(ssrContext, {
@@ -1401,7 +1393,7 @@ var install_quasar_default = false ? function(parentApp, opts = {}, ssrContext)
     ssrContext
   });
 } : function(parentApp, opts = {}) {
-  const $q = { version: "2.16.4" };
+  const $q = { version: "2.16.6" };
   if (globalConfigIsFrozen === false) {
     if (opts.config !== void 0) {
       Object.assign(globalConfig, opts.config);
@@ -1509,8 +1501,7 @@ function inc(p, amount) {
 function highjackAjax(stackEntry) {
   highjackCount++;
   stack.push(stackEntry);
-  if (highjackCount > 1)
-    return;
+  if (highjackCount > 1) return;
   xhr.prototype.open = function(_, url) {
     const stopStack = [];
     const loadStart = () => {
@@ -2140,13 +2131,11 @@ var QBreadcrumbs_default = createComponent({
     const sepClass = computed10(() => props4.separatorColor ? ` text-${props4.separatorColor}` : "");
     const activeClass = computed10(() => ` text-${props4.activeColor}`);
     return () => {
-      if (slots.default === void 0)
-        return;
+      if (slots.default === void 0) return;
       const vnodes = getNormalizedVNodes(
         hSlot(slots.default)
       );
-      if (vnodes.length === 0)
-        return;
+      if (vnodes.length === 0) return;
       let els = 1;
       const child = [], len = vnodes.filter((c) => c.type !== void 0 && c.type.name === "QBreadcrumbsEl").length, separator = slots.separator !== void 0 ? slots.separator : () => props4.separator;
       vnodes.forEach((comp) => {
@@ -2661,14 +2650,10 @@ var formTypes = ["button", "submit", "reset"];
 var mediaTypeRE = /[^\s]\/[^\s]/;
 var btnDesignOptions = ["flat", "outline", "push", "unelevated"];
 function getBtnDesign(props4, defaultValue) {
-  if (props4.flat === true)
-    return "flat";
-  if (props4.outline === true)
-    return "outline";
-  if (props4.push === true)
-    return "push";
-  if (props4.unelevated === true)
-    return "unelevated";
+  if (props4.flat === true) return "flat";
+  if (props4.outline === true) return "outline";
+  if (props4.push === true) return "push";
+  if (props4.unelevated === true) return "unelevated";
   return defaultValue;
 }
 function getBtnDesignAttr(props4) {
@@ -2879,8 +2864,7 @@ var QBtn_default = createComponent({
       ...onEvents.value
     }));
     function onClick(e) {
-      if (rootRef.value === null)
-        return;
+      if (rootRef.value === null) return;
       if (e !== void 0) {
         if (e.defaultPrevented === true) {
           return;
@@ -2901,8 +2885,7 @@ var QBtn_default = createComponent({
       navigateOnClick(e);
     }
     function onKeydown2(e) {
-      if (rootRef.value === null)
-        return;
+      if (rootRef.value === null) return;
       emit("keydown", e);
       if (isKeyCode(e, [13, 32]) === true && keyboardTarget !== rootRef.value) {
         keyboardTarget !== null && cleanup();
@@ -2917,11 +2900,9 @@ var QBtn_default = createComponent({
       }
     }
     function onTouchstart(e) {
-      if (rootRef.value === null)
-        return;
+      if (rootRef.value === null) return;
       emit("touchstart", e);
-      if (e.defaultPrevented === true)
-        return;
+      if (e.defaultPrevented === true) return;
       if (touchTarget !== rootRef.value) {
         touchTarget !== null && cleanup();
         touchTarget = rootRef.value;
@@ -2937,8 +2918,7 @@ var QBtn_default = createComponent({
       }, 200);
     }
     function onMousedown(e) {
-      if (rootRef.value === null)
-        return;
+      if (rootRef.value === null) return;
       e.qSkipRipple = avoidMouseRipple === true;
       emit("mousedown", e);
       if (e.defaultPrevented !== true && mouseTarget !== rootRef.value) {
@@ -2949,8 +2929,7 @@ var QBtn_default = createComponent({
       }
     }
     function onPressEnd(e) {
-      if (rootRef.value === null)
-        return;
+      if (rootRef.value === null) return;
       if (e !== void 0 && e.type === "blur" && document.activeElement === rootRef.value) {
         return;
       }
@@ -3208,8 +3187,7 @@ function use_anchor_default({
       }
     });
     configureAnchorEl = function(context = props4.contextMenu) {
-      if (props4.noParentEvent === true || anchorEl.value === null)
-        return;
+      if (props4.noParentEvent === true || anchorEl.value === null) return;
       let evts;
       if (context === true) {
         if (proxy.$q.platform.is.mobile === true) {
@@ -3631,8 +3609,7 @@ function use_portal_default(vm2, innerRef, renderPortalContent, type) {
   }
   function hidePortal(isReady) {
     portalIsAccessible.value = false;
-    if (isReady !== true)
-      return;
+    if (isReady !== true) return;
     removeFocusWaitFlag(focusObj);
     portalIsActive.value = false;
     const index = portalProxyList.indexOf(vm2.proxy);
@@ -6283,8 +6260,7 @@ var QChip_default = createComponent({
       return child;
     }
     return () => {
-      if (props4.modelValue === false)
-        return;
+      if (props4.modelValue === false) return;
       const data = {
         class: classes.value,
         style: sizeStyle.value
@@ -7644,8 +7620,7 @@ var QTabs_default = createComponent({
       });
     }
     function updateContainer(domSize) {
-      if (domProps.value === void 0 || contentRef.value === null)
-        return;
+      if (domProps.value === void 0 || contentRef.value === null) return;
       const size2 = domSize[domProps.value.container], scrollSize = Math.min(
         contentRef.value[domProps.value.scroll],
         Array.prototype.reduce.call(
@@ -7700,8 +7675,7 @@ var QTabs_default = createComponent({
     }
     function updateArrows() {
       const content = contentRef.value;
-      if (content === null)
-        return;
+      if (content === null) return;
       const rect = content.getBoundingClientRect(), pos = props4.vertical === true ? content.scrollTop : Math.abs(content.scrollLeft);
       if (isRTL.value === true) {
         leftArrow.value = Math.ceil(pos + rect.width) < content.scrollWidth - 1;
@@ -7737,8 +7711,7 @@ var QTabs_default = createComponent({
         (el) => el === fromEl || el.matches && el.matches(".q-tab.q-focusable") === true
       );
       const len = tabs.length;
-      if (len === 0)
-        return;
+      if (len === 0) return;
       if (keyCode === 36) {
         scrollToTabEl(tabs[0]);
         tabs[0].focus();
@@ -8649,8 +8622,7 @@ var QColor_default = createComponent({
     }
     function changeSpectrum(left, top, change) {
       const panel = spectrumRef.value;
-      if (panel === null)
-        return;
+      if (panel === null) return;
       const width3 = panel.clientWidth, height2 = panel.clientHeight, rect = panel.getBoundingClientRect();
       let x = Math.min(width3, Math.max(0, left - rect.left));
       if ($q.lang.rtl === true) {
@@ -9171,12 +9143,9 @@ function isLeapJalaaliYear(jy) {
   return jalCalLeap(jy) === 0;
 }
 function jalaaliMonthLength(jy, jm) {
-  if (jm <= 6)
-    return 31;
-  if (jm <= 11)
-    return 30;
-  if (isLeapJalaaliYear(jy))
-    return 30;
+  if (jm <= 6) return 31;
+  if (jm <= 11) return 30;
+  if (isLeapJalaaliYear(jy)) return 30;
   return 29;
 }
 function jalCalLeap(jy) {
@@ -10866,8 +10835,7 @@ var QDate_default = createComponent({
       emit("update:modelValue", (props4.multiple === true ? model : model[0]) || null, reason);
     }
     function getHeader() {
-      if (props4.minimal === true)
-        return;
+      if (props4.minimal === true) return;
       return h38("div", {
         class: "q-date__header " + headerClass.value
       }, [
@@ -11571,8 +11539,7 @@ var QDialog_default = createComponent({
     function focus(selector) {
       addFocusFn(() => {
         let node = innerRef.value;
-        if (node === null)
-          return;
+        if (node === null) return;
         if (selector !== void 0) {
           const target2 = node.querySelector(selector);
           if (target2 !== null) {
@@ -11992,8 +11959,7 @@ var QDrawer_default = createComponent({
       applyPosition();
     });
     watch15(() => props4.mini, () => {
-      if (props4.noMiniAnimation)
-        return;
+      if (props4.noMiniAnimation) return;
       if (props4.modelValue === true) {
         animateMini();
         $layout.animate();
@@ -12660,8 +12626,7 @@ var QTooltip_default = createComponent({
       }, props4.hideDelay);
     }
     function configureAnchorEl() {
-      if (props4.noParentEvent === true || anchorEl.value === null)
-        return;
+      if (props4.noParentEvent === true || anchorEl.value === null) return;
       const evts = $q.platform.is.mobile === true ? [
         [anchorEl.value, "touchstart", "delayShow", "passive"]
       ] : [
@@ -15203,8 +15168,7 @@ var QFile_default = createComponent({
       if (fileInput !== void 0 && fileInput !== null) {
         fileInput.value = "";
       }
-      if (files === void 0)
-        return;
+      if (files === void 0) return;
       if (props4.multiple === true ? props4.modelValue && files.every((f) => innerValue.value.includes(f)) : props4.modelValue === files[0]) {
         return;
       }
@@ -15382,8 +15346,7 @@ var QFooter_default = createComponent({
       updateLayout("size", height2);
     }
     function updateRevealed() {
-      if (props4.reveal !== true)
-        return;
+      if (props4.reveal !== true) return;
       const { direction, position: position2, inflectionPoint } = $layout.scroll.value;
       updateLocal(revealed, direction === "up" || position2 - inflectionPoint < 100 || $layout.height.value - containerHeight.value - position2 - size2.value < 300);
     }
@@ -15536,8 +15499,7 @@ var QForm_default = createComponent({
     }
     function focus() {
       addFocusFn(() => {
-        if (rootRef.value === null)
-          return;
+        if (rootRef.value === null) return;
         const target2 = rootRef.value.querySelector("[autofocus][tabindex], [data-autofocus][tabindex]") || rootRef.value.querySelector("[autofocus] [tabindex], [data-autofocus] [tabindex]") || rootRef.value.querySelector("[autofocus], [data-autofocus]") || Array.prototype.find.call(rootRef.value.querySelectorAll("[tabindex]"), (el) => el.tabIndex !== -1);
         target2 !== null && target2 !== void 0 && target2.focus({ preventScroll: true });
       });
@@ -15873,8 +15835,7 @@ var QImg_default = createComponent({
       }
     }
     function waitForCompleteness(target2, count) {
-      if (count === 1e3 || vmIsDestroyed(vm2) === true)
-        return;
+      if (count === 1e3 || vmIsDestroyed(vm2) === true) return;
       if (target2.complete === true) {
         onReady(target2);
       } else {
@@ -15884,8 +15845,7 @@ var QImg_default = createComponent({
       }
     }
     function onReady(target2) {
-      if (vmIsDestroyed(vm2) === true)
-        return;
+      if (vmIsDestroyed(vm2) === true) return;
       position2.value = position2.value ^ 1;
       images[position2.value].value = null;
       clearLoading();
@@ -16639,8 +16599,7 @@ var isPlainText = /[a-z0-9_ -]$/i;
 function use_key_composition_default(onInput) {
   return function onComposition(e) {
     if (e.type === "compositionend" || e.type === "change") {
-      if (e.target.qComposing !== true)
-        return;
+      if (e.target.qComposing !== true) return;
       e.target.qComposing = false;
       onInput(e);
     } else if (e.type === "compositionupdate" && e.target.qComposing !== true && typeof e.data === "string") {
@@ -18578,8 +18537,7 @@ function frame_debounce_default(fn) {
   let wait = false, frame, callArgs;
   function debounced() {
     callArgs = arguments;
-    if (wait === true)
-      return;
+    if (wait === true) return;
     wait = true;
     frame = window.requestAnimationFrame(() => {
       fn.apply(this, callArgs);
@@ -18727,10 +18685,8 @@ import { h as h77, ref as ref47, computed as computed81, nextTick as nextTick15,
 
 // src/utils/clone/clone.js
 function cloneDeep(data, hash = /* @__PURE__ */ new WeakMap()) {
-  if (Object(data) !== data)
-    return data;
-  if (hash.has(data))
-    return hash.get(data);
+  if (Object(data) !== data) return data;
+  if (hash.has(data)) return hash.get(data);
   const result = data instanceof Date ? new Date(data) : data instanceof RegExp ? new RegExp(data.source, data.flags) : data instanceof Set ? /* @__PURE__ */ new Set() : data instanceof Map ? /* @__PURE__ */ new Map() : typeof data.constructor !== "function" ? /* @__PURE__ */ Object.create(null) : data.prototype !== void 0 && typeof data.prototype.constructor === "function" ? data : new data.constructor();
   if (typeof data.constructor === "function" && typeof data.valueOf === "function") {
     const val = data.valueOf();
@@ -18897,8 +18853,7 @@ var QPopupEdit_default = createComponent({
       updatePosition
     });
     return () => {
-      if (props4.disable === true)
-        return;
+      if (props4.disable === true) return;
       return h77(QMenu_default, {
         ref: menuRef,
         class: "q-popup-edit",
@@ -20025,8 +19980,7 @@ var QScrollArea_default = createComponent({
       };
     });
     onActivated5(() => {
-      if (scrollPosition === null)
-        return;
+      if (scrollPosition === null) return;
       const scrollTarget = targetRef.value;
       if (scrollTarget !== null) {
         setHorizontalScrollPosition(scrollTarget, scrollPosition.left);
@@ -20636,8 +20590,7 @@ function useVirtualScroll({
     shouldActivate = true;
   });
   onActivated6(() => {
-    if (shouldActivate !== true)
-      return;
+    if (shouldActivate !== true) return;
     const scrollEl = getVirtualScrollTarget();
     if (prevScrollStart !== void 0 && scrollEl !== void 0 && scrollEl !== null && scrollEl.nodeType !== 8) {
       setScroll2(
@@ -21035,8 +20988,7 @@ var QSelect_default = createComponent({
       emit("update:modelValue", model);
     }
     function setOptionIndex(index) {
-      if ($q.platform.is.desktop !== true)
-        return;
+      if ($q.platform.is.desktop !== true) return;
       const val = index !== -1 && index < virtualScrollLength.value ? index : -1;
       if (optionIndex.value !== val) {
         optionIndex.value = val;
@@ -21151,8 +21103,7 @@ var QSelect_default = createComponent({
         closeMenu();
         return;
       }
-      if (e.target === void 0 || e.target.id !== state.targetUid.value || state.editable.value !== true)
-        return;
+      if (e.target === void 0 || e.target.id !== state.targetUid.value || state.editable.value !== true) return;
       if (e.keyCode === 40 && state.innerLoading.value !== true && menu.value === false) {
         stopAndPrevent(e);
         showPopup();
@@ -21216,8 +21167,7 @@ var QSelect_default = createComponent({
         }
         return;
       }
-      if (e.keyCode !== 13 && (e.keyCode !== 32 || props4.useInput === true || searchBuffer !== "") && (e.keyCode !== 9 || tabShouldSelect === false))
-        return;
+      if (e.keyCode !== 13 && (e.keyCode !== 32 || props4.useInput === true || searchBuffer !== "") && (e.keyCode !== 9 || tabShouldSelect === false)) return;
       e.keyCode !== 9 && stopAndPrevent(e);
       if (optionIndex.value !== -1 && optionIndex.value < optionsLength) {
         toggleOption(props4.options[optionIndex.value]);
@@ -23966,10 +23916,8 @@ var QSplitter_default = createComponent({
     limits: {
       type: Array,
       validator: (v) => {
-        if (v.length !== 2)
-          return false;
-        if (typeof v[0] !== "number" || typeof v[1] !== "number")
-          return false;
+        if (v.length !== 2) return false;
+        if (typeof v[0] !== "number" || typeof v[1] !== "number") return false;
         return v[0] >= 0 && v[0] <= v[1];
       }
     },
@@ -24453,8 +24401,7 @@ var QTh_default = createComponent({
       const name2 = vm2.vnode.key;
       if (name2) {
         col = props4.props.colsMap[name2];
-        if (col === void 0)
-          return;
+        if (col === void 0) return;
       } else {
         col = props4.props.col;
       }
@@ -25877,8 +25824,7 @@ var QTd_default = createComponent({
       }
       const name2 = vm2.vnode.key;
       const col = (props4.props.colsMap !== void 0 ? props4.props.colsMap[name2] : null) || props4.props.col;
-      if (col === void 0)
-        return;
+      if (col === void 0) return;
       const { row } = props4.props;
       return h122("td", {
         class: classes.value + col.__tdClass(row),
@@ -26270,8 +26216,7 @@ var QTime_default = createComponent({
         const payload = e.keyCode === 37 ? -1 : 1;
         if (validHours.value !== null) {
           const values = computedFormat24h.value === true ? validHours.value.values : validHours.value[isAM.value === true ? "am" : "pm"].values;
-          if (values.length === 0)
-            return;
+          if (values.length === 0) return;
           if (innerModel.value.hour === null) {
             setHour(values[0]);
           } else {
@@ -26291,8 +26236,7 @@ var QTime_default = createComponent({
         const payload = e.keyCode === 37 ? -1 : 1;
         if (validMinutes.value !== null) {
           const values = validMinutes.value.values;
-          if (values.length === 0)
-            return;
+          if (values.length === 0) return;
           if (innerModel.value.minute === null) {
             setMinute(values[0]);
           } else {
@@ -26312,8 +26256,7 @@ var QTime_default = createComponent({
         const payload = e.keyCode === 37 ? -1 : 1;
         if (validSeconds.value !== null) {
           const values = validSeconds.value.values;
-          if (values.length === 0)
-            return;
+          if (values.length === 0) return;
           if (innerModel.value.seconds === null) {
             setSecond(values[0]);
           } else {
@@ -27394,8 +27337,7 @@ function getRenderer(getPlugin, expose) {
     }
   }
   function removeFile(file) {
-    if (props4.disable)
-      return;
+    if (props4.disable) return;
     if (file.__status === "uploaded") {
       state.uploadedFiles.value = state.uploadedFiles.value.filter((f) => f.__key !== file.__key);
     } else if (file.__status === "uploading") {
@@ -27427,8 +27369,7 @@ function getRenderer(getPlugin, expose) {
     if (fileInput !== void 0 && fileInput !== null) {
       fileInput.value = "";
     }
-    if (localFiles === void 0)
-      return;
+    if (localFiles === void 0) return;
     localFiles.forEach((file) => {
       state.updateFileStatus(file, "idle");
       uploadSize.value += file.size;
@@ -27754,8 +27695,7 @@ function injectPlugin({ props: props4, emit, helpers }) {
     });
     let uploadIndex = 0, uploadIndexSize = 0, localUploadedSize = 0, maxUploadSize = 0, aborted;
     xhr2.upload.addEventListener("progress", (e) => {
-      if (aborted === true)
-        return;
+      if (aborted === true) return;
       const loaded = Math.min(maxUploadSize, e.loaded);
       helpers.uploadedSize.value += loaded - localUploadedSize;
       localUploadedSize = loaded;
@@ -30168,8 +30108,7 @@ var Plugin7 = createReactivePlugin({
   isActive: false
 }, {
   show(opts) {
-    if (false)
-      return;
+    if (false) return;
     props3 = registerProps(opts);
     const { group } = props3;
     Plugin7.isActive = true;
@@ -30295,8 +30234,7 @@ var Plugin8 = createReactivePlugin({
   setDefaults: noop,
   install({ $q, parentApp }) {
     $q.loadingBar = this;
-    if (false)
-      return;
+    if (false) return;
     if (this.__installed === true) {
       if ($q.config.loadingBar !== void 0) {
         this.setDefaults($q.config.loadingBar);
@@ -31421,7 +31359,7 @@ function runSequentialPromises(sequentialPromises, { threadsNumber = 1, abortOnF
 
 // src/index.dev.js
 var Quasar = {
-  version: "2.16.4",
+  version: "2.16.6",
   install: install_quasar_default,
   // TODO: remove in Qv3 (should only be used through the plugin)
   // We provide a deprecated fallback here

package/dist/quasar.css

@@ -3031,7 +3031,7 @@ body.body--dark .q-knob--editable:focus:before {
 }
 
 body.q-ios-padding .q-layout--standard .q-header > .q-toolbar:nth-child(1),
-body.q-ios-padding .q-layout--standard .q-header > .q-tabs:nth-child(1) .q-tabs-head,
+body.q-ios-padding .q-layout--standard .q-header > .q-tabs:nth-child(1) .q-tabs__content,
 body.q-ios-padding .q-layout--standard .q-drawer--top-padding .q-drawer__content {
   padding-top: 20px;
   min-height: 70px;
@@ -3039,7 +3039,7 @@ body.q-ios-padding .q-layout--standard .q-drawer--top-padding .q-drawer__content
   min-height: calc(env(safe-area-inset-top) + 50px);
 }
 body.q-ios-padding .q-layout--standard .q-footer > .q-toolbar:last-child,
-body.q-ios-padding .q-layout--standard .q-footer > .q-tabs:last-child .q-tabs-head,
+body.q-ios-padding .q-layout--standard .q-footer > .q-tabs:nth-last-child(1 of :not(.q-layout__shadow)) .q-tabs__content,
 body.q-ios-padding .q-layout--standard .q-drawer--top-padding .q-drawer__content {
   padding-bottom: env(safe-area-inset-bottom);
   min-height: calc(env(safe-area-inset-bottom) + 50px);