@ionic/core 8.8.19-dev.11786610762.137bbb21 → 8.8.19-dev.11786735826.1fad7c0a

package/dist/collection/components/breadcrumb/breadcrumb.md.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -61,12 +55,12 @@
  */
 :host {
   /**
-   * @prop --color: Text color of the breadcrumb
-   * @prop --color-active: Text color of the active breadcrumb
-   * @prop --color-hover: Text color of the breadcrumb on hover
-   * @prop --color-focused: Text color of the breadcrumb when focused
-   * @prop --background-focused: Background color of the breadcrumb when focused
-   */
+    * @prop --color: Text color of the breadcrumb
+    * @prop --color-active: Text color of the active breadcrumb
+    * @prop --color-hover: Text color of the breadcrumb on hover
+    * @prop --color-focused: Text color of the breadcrumb when focused
+    * @prop --background-focused: Background color of the breadcrumb when focused
+    */
   display: flex;
   flex: 0 0 auto;
   align-items: center;
@@ -77,18 +71,18 @@
 }
 
 .breadcrumb-native {
-  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
-  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
+  text-align: inherit;
   white-space: inherit;
+  color: inherit;
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
@@ -189,12 +183,6 @@
   font-size: 1.375rem;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/breadcrumbs/breadcrumbs.ios.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/breadcrumbs/breadcrumbs.js

@@ -3,103 +3,45 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
  */
 export class Breadcrumbs {
-    constructor() {
-        /**
-         * The number of breadcrumbs to show before the collapsed indicator.
-         * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
-         * the breadcrumbs will not be collapsed.
-         */
-        this.itemsBeforeCollapse = 1;
-        /**
-         * The number of breadcrumbs to show after the collapsed indicator.
-         * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
-         * the breadcrumbs will not be collapsed.
-         */
-        this.itemsAfterCollapse = 1;
-        this.breadcrumbsInit = () => {
-            this.setBreadcrumbSeparator();
-            this.setMaxItems();
-        };
-        this.resetActiveBreadcrumb = () => {
-            const breadcrumbs = this.getBreadcrumbs();
-            // Only reset the active breadcrumb if we were the ones to change it
-            // otherwise use the one set on the component
-            const activeBreadcrumb = breadcrumbs.find((breadcrumb) => breadcrumb.active);
-            if (activeBreadcrumb && this.activeChanged) {
-                activeBreadcrumb.active = false;
-            }
-        };
-        this.setMaxItems = () => {
-            const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
-            const breadcrumbs = this.getBreadcrumbs();
-            for (const breadcrumb of breadcrumbs) {
-                breadcrumb.showCollapsedIndicator = false;
-                breadcrumb.collapsed = false;
-            }
-            // If the number of breadcrumbs exceeds the maximum number of items
-            // that should show and the items before / after collapse do not
-            // exceed the maximum items then we need to collapse the breadcrumbs
-            const shouldCollapse = maxItems !== undefined && breadcrumbs.length > maxItems && itemsBeforeCollapse + itemsAfterCollapse <= maxItems;
-            if (shouldCollapse) {
-                // Show the collapsed indicator in the first breadcrumb that collapses
-                breadcrumbs.forEach((breadcrumb, index) => {
-                    if (index === itemsBeforeCollapse) {
-                        breadcrumb.showCollapsedIndicator = true;
-                    }
-                    // Collapse all breadcrumbs that have an index greater than or equal to
-                    // the number before collapse and an index less than the total number
-                    // of breadcrumbs minus the items that should show after the collapse
-                    if (index >= itemsBeforeCollapse && index < breadcrumbs.length - itemsAfterCollapse) {
-                        breadcrumb.collapsed = true;
-                    }
-                });
-            }
-        };
-        this.setBreadcrumbSeparator = () => {
-            const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
-            const breadcrumbs = this.getBreadcrumbs();
-            // Check if an active breadcrumb exists already
-            const active = breadcrumbs.find((breadcrumb) => breadcrumb.active);
-            // Set the separator on all but the last breadcrumb
-            for (const breadcrumb of breadcrumbs) {
-                // The only time the last breadcrumb changes is when
-                // itemsAfterCollapse is set to 0, in this case the
-                // last breadcrumb will be the collapsed indicator
-                const last = maxItems !== undefined && itemsAfterCollapse === 0
-                    ? breadcrumb === breadcrumbs[itemsBeforeCollapse]
-                    : breadcrumb === breadcrumbs[breadcrumbs.length - 1];
-                breadcrumb.last = last;
-                // If the breadcrumb has defined whether or not to show the
-                // separator then use that value, otherwise check if it's the
-                // last breadcrumb
-                const separator = breadcrumb.separator !== undefined ? breadcrumb.separator : last ? undefined : true;
-                breadcrumb.separator = separator;
-                // If there is not an active breadcrumb already
-                // set the last one to active
-                if (!active && last) {
-                    breadcrumb.active = true;
-                    this.activeChanged = true;
-                }
-            }
-        };
-        this.getBreadcrumbs = () => {
-            return Array.from(this.el.querySelectorAll('ion-breadcrumb'));
-        };
-        this.slotChanged = () => {
-            this.resetActiveBreadcrumb();
-            this.breadcrumbsInit();
-        };
-    }
+    collapsed;
+    activeChanged;
+    el;
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * The maximum number of breadcrumbs to show before collapsing.
+     */
+    maxItems;
+    /**
+     * The number of breadcrumbs to show before the collapsed indicator.
+     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
+     * the breadcrumbs will not be collapsed.
+     */
+    itemsBeforeCollapse = 1;
+    /**
+     * The number of breadcrumbs to show after the collapsed indicator.
+     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
+     * the breadcrumbs will not be collapsed.
+     */
+    itemsAfterCollapse = 1;
+    /**
+     * Emitted when the collapsed indicator is clicked on.
+     */
+    ionCollapsedClick;
     onCollapsedClick(ev) {
         const breadcrumbs = this.getBreadcrumbs();
         const collapsedBreadcrumbs = breadcrumbs.filter((breadcrumb) => breadcrumb.collapsed);
-        this.ionCollapsedClick.emit(Object.assign(Object.assign({}, ev.detail), { collapsedBreadcrumbs }));
+        this.ionCollapsedClick.emit({ ...ev.detail, collapsedBreadcrumbs });
     }
     maxItemsChanged() {
         this.resetActiveBreadcrumb();
@@ -108,30 +50,101 @@ export class Breadcrumbs {
     componentWillLoad() {
         this.breadcrumbsInit();
     }
+    breadcrumbsInit = () => {
+        this.setBreadcrumbSeparator();
+        this.setMaxItems();
+    };
+    resetActiveBreadcrumb = () => {
+        const breadcrumbs = this.getBreadcrumbs();
+        // Only reset the active breadcrumb if we were the ones to change it
+        // otherwise use the one set on the component
+        const activeBreadcrumb = breadcrumbs.find((breadcrumb) => breadcrumb.active);
+        if (activeBreadcrumb && this.activeChanged) {
+            activeBreadcrumb.active = false;
+        }
+    };
+    setMaxItems = () => {
+        const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
+        const breadcrumbs = this.getBreadcrumbs();
+        for (const breadcrumb of breadcrumbs) {
+            breadcrumb.showCollapsedIndicator = false;
+            breadcrumb.collapsed = false;
+        }
+        // If the number of breadcrumbs exceeds the maximum number of items
+        // that should show and the items before / after collapse do not
+        // exceed the maximum items then we need to collapse the breadcrumbs
+        const shouldCollapse = maxItems !== undefined && breadcrumbs.length > maxItems && itemsBeforeCollapse + itemsAfterCollapse <= maxItems;
+        if (shouldCollapse) {
+            // Show the collapsed indicator in the first breadcrumb that collapses
+            breadcrumbs.forEach((breadcrumb, index) => {
+                if (index === itemsBeforeCollapse) {
+                    breadcrumb.showCollapsedIndicator = true;
+                }
+                // Collapse all breadcrumbs that have an index greater than or equal to
+                // the number before collapse and an index less than the total number
+                // of breadcrumbs minus the items that should show after the collapse
+                if (index >= itemsBeforeCollapse && index < breadcrumbs.length - itemsAfterCollapse) {
+                    breadcrumb.collapsed = true;
+                }
+            });
+        }
+    };
+    setBreadcrumbSeparator = () => {
+        const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
+        const breadcrumbs = this.getBreadcrumbs();
+        // Check if an active breadcrumb exists already
+        const active = breadcrumbs.find((breadcrumb) => breadcrumb.active);
+        // Set the separator on all but the last breadcrumb
+        for (const breadcrumb of breadcrumbs) {
+            // The only time the last breadcrumb changes is when
+            // itemsAfterCollapse is set to 0, in this case the
+            // last breadcrumb will be the collapsed indicator
+            const last = maxItems !== undefined && itemsAfterCollapse === 0
+                ? breadcrumb === breadcrumbs[itemsBeforeCollapse]
+                : breadcrumb === breadcrumbs[breadcrumbs.length - 1];
+            breadcrumb.last = last;
+            // If the breadcrumb has defined whether or not to show the
+            // separator then use that value, otherwise check if it's the
+            // last breadcrumb
+            const separator = breadcrumb.separator !== undefined ? breadcrumb.separator : last ? undefined : true;
+            breadcrumb.separator = separator;
+            // If there is not an active breadcrumb already
+            // set the last one to active
+            if (!active && last) {
+                breadcrumb.active = true;
+                this.activeChanged = true;
+            }
+        }
+    };
+    getBreadcrumbs = () => {
+        return Array.from(this.el.querySelectorAll('ion-breadcrumb'));
+    };
+    slotChanged = () => {
+        this.resetActiveBreadcrumb();
+        this.breadcrumbsInit();
+    };
     render() {
         const { color, collapsed } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '40b6dc5e9e13ca903d2e67b726f505813365a653', class: createColorClasses(color, {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'fe64e9cdf597ede2db140bf5fa05a0359d82db57', class: createColorClasses(color, {
+                [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'breadcrumbs-collapsed': collapsed,
-            }) }, h("slot", { key: '40eac8ef488b237dc9d21b349d0837c9bf3e52f3', onSlotchange: this.slotChanged })));
+            }) }, h("slot", { key: 'a2c99b579e339055c50a613d5c6b61032f5ddffe', onSlotchange: this.slotChanged })));
     }
     static get is() { return "ion-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["breadcrumbs.ios.scss"],
-            "md": ["breadcrumbs.md.scss"],
-            "ionic": ["breadcrumbs.md.scss"]
+            "md": ["breadcrumbs.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["breadcrumbs.ios.css"],
-            "md": ["breadcrumbs.md.css"],
-            "ionic": ["breadcrumbs.md.css"]
+            "md": ["breadcrumbs.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/breadcrumbs/breadcrumbs.md.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/button/button.ios.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -59,28 +53,6 @@
  *   }
  * }
  */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
 :host {
   /**
    * @prop --background: Background of the button
@@ -125,6 +97,7 @@
   display: inline-block;
   width: auto;
   color: var(--color);
+  font-family: var(--ion-font-family, inherit);
   text-align: center;
   text-decoration: none;
   white-space: normal;
@@ -140,13 +113,21 @@
   pointer-events: none;
 }
 
+:host(.button-solid) {
+  --background: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary-contrast, #fff);
+}
+
 :host(.button-outline) {
+  --border-color: var(--ion-color-primary, #0054e9);
   --background: transparent;
+  --color: var(--ion-color-primary, #0054e9);
 }
 
 :host(.button-clear) {
   --border-width: 0;
   --background: transparent;
+  --color: var(--ion-color-primary, #0054e9);
 }
 
 :host(.button-block) {
@@ -196,18 +177,18 @@
   padding-inline-end: var(--padding-end);
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
-  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
-  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
+  text-align: inherit;
   white-space: inherit;
+  color: inherit;
   display: flex;
   position: relative;
   align-items: center;
@@ -252,18 +233,36 @@
   flex-shrink: 0;
 }
 
-::slotted(ion-icon),
-::slotted(ion-spinner) {
+::slotted(ion-icon) {
+  font-size: 1.35em;
   pointer-events: none;
 }
 
+::slotted(ion-icon[slot=start]) {
+  -webkit-margin-start: -0.3em;
+  margin-inline-start: -0.3em;
+  -webkit-margin-end: 0.3em;
+  margin-inline-end: 0.3em;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+::slotted(ion-icon[slot=end]) {
+  -webkit-margin-start: 0.3em;
+  margin-inline-start: 0.3em;
+  -webkit-margin-end: -0.2em;
+  margin-inline-end: -0.2em;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 ion-ripple-effect {
   color: var(--ripple-color);
 }
 
 .button-native::after {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -311,7 +310,7 @@ ion-ripple-effect {
 
 :host(.button-clear.ion-color) .button-native {
   background: transparent;
-  color: var(--ion-color-foreground);
+  color: var(--ion-color-base);
 }
 
 :host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
@@ -327,90 +326,6 @@ ion-ripple-effect {
   color: var(--ion-toolbar-background, var(--color));
 }
 
-.button-native ion-ripple-effect,
-.button-native::after {
-  border-radius: inherit;
-}
-
-:host(.button-has-badge) .button-native {
-  --overflow: visible;
-}
-
-:host ::slotted(ion-badge[vertical]:not(:empty)) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-:host {
-  font-family: var(--ion-font-family, inherit);
-}
-
-:host(.button-solid) {
-  --background: var(--ion-color-primary, #0054e9);
-  --color: var(--ion-color-primary-contrast, #fff);
-}
-
-:host(.button-outline) {
-  --border-color: var(--ion-color-primary, #0054e9);
-  --color: var(--ion-color-primary, #0054e9);
-}
-
-:host(.button-clear) {
-  --color: var(--ion-color-primary, #0054e9);
-}
-
-::slotted(ion-icon) {
-  font-size: 1.35em;
-}
-
-::slotted(ion-icon[slot=start]) {
-  -webkit-margin-start: -0.3em;
-  margin-inline-start: -0.3em;
-  -webkit-margin-end: 0.3em;
-  margin-inline-end: 0.3em;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-::slotted(ion-icon[slot=end]) {
-  -webkit-margin-start: 0.3em;
-  margin-inline-start: 0.3em;
-  -webkit-margin-end: -0.2em;
-  margin-inline-end: -0.2em;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.button-native ::slotted(ion-badge) {
-  position: fixed;
-}
-
-:host ::slotted(ion-badge[vertical]:not(:empty)) {
-  -webkit-padding-start: 2px;
-  padding-inline-start: 2px;
-  -webkit-padding-end: 2px;
-  padding-inline-end: 2px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-}
-
-:host(.in-datetime) {
-  -webkit-margin-start: 2px;
-  margin-inline-start: 2px;
-  -webkit-margin-end: 2px;
-  margin-inline-end: 2px;
-  margin-top: 0px;
-  margin-bottom: 0px;
-  min-height: 32px;
-}
-
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -466,12 +381,6 @@ ion-ripple-effect {
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -528,6 +437,7 @@ ion-ripple-effect {
  * }
  */
 :host {
+  --border-radius: 14px;
   --padding-top: 13px;
   --padding-bottom: 13px;
   --padding-start: 1em;
@@ -555,12 +465,13 @@ ion-ripple-effect {
 }
 
 :host(.button-outline) {
+  --border-radius: 14px;
   --border-width: 1px;
   --border-style: solid;
   --background-activated: var(--ion-color-primary, #0054e9);
   --background-focused: var(--ion-color-primary, #0054e9);
   --background-hover: transparent;
-  --background-focused-opacity: 0.1;
+  --background-focused-opacity: .1;
   --color-activated: var(--ion-color-primary-contrast, #fff);
 }
 
@@ -569,7 +480,7 @@ ion-ripple-effect {
   --background-activated-opacity: 0;
   --background-focused: var(--ion-color-primary, #0054e9);
   --background-hover: transparent;
-  --background-focused-opacity: 0.1;
+  --background-focused-opacity: .1;
   font-size: min(1.0625rem, 51px);
   font-weight: normal;
 }
@@ -590,6 +501,7 @@ ion-ripple-effect {
 }
 
 :host(.button-large) {
+  --border-radius: 16px;
   --padding-top: 17px;
   --padding-start: 1em;
   --padding-end: 1em;
@@ -599,6 +511,7 @@ ion-ripple-effect {
 }
 
 :host(.button-small) {
+  --border-radius: 6px;
   --padding-top: 4px;
   --padding-start: 0.9em;
   --padding-end: 0.9em;
@@ -607,24 +520,12 @@ ion-ripple-effect {
   font-size: min(0.8125rem, 39px);
 }
 
-:host(.button-soft) {
-  --border-radius: 6px;
-}
-
-:host(.button-soft.button-large) {
-  --border-radius: 8px;
-}
-
-:host(.button-soft.button-small) {
-  --border-radius: 4px;
-}
-
 :host(.button-round) {
   --border-radius: 999px;
-}
-
-:host(.button-rectangular) {
-  --border-radius: 0px;
+  --padding-top: 0;
+  --padding-start: 26px;
+  --padding-end: 26px;
+  --padding-bottom: 0;
 }
 
 :host(.button-strong) {
@@ -647,7 +548,7 @@ ion-ripple-effect {
     *
     * Since the `ion-button` uses `rem` for the font size, we can't
     * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size
+    * dynamic-font-clamp`. Instead, we need to adjust the base size 
     * to account for the ion-button` font size.
     *
     * For example, if the default font size of `ion-button` is 16px
@@ -669,7 +570,7 @@ ion-ripple-effect {
     *
     * Since the `ion-button` uses `rem` for the font size, we can't
     * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size
+    * dynamic-font-clamp`. Instead, we need to adjust the base size 
     * to account for the ion-button` font size.
     *
     * For example, if the default font size of `ion-button` is 13px
@@ -691,7 +592,7 @@ ion-ripple-effect {
     *
     * Since the `ion-button` uses `rem` for the font size, we can't
     * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size
+    * dynamic-font-clamp`. Instead, we need to adjust the base size 
     * to account for the ion-button` font size.
     *
     * For example, if the default font size of `ion-button` is 20px
@@ -753,13 +654,4 @@ ion-ripple-effect {
 :host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
   background: var(--ion-toolbar-color, var(--color));
   color: var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff));
-}
-
-:host(.in-datetime) {
-  --padding-top: 3px;
-  --padding-bottom: 3px;
-  --padding-start: 5px;
-  --padding-end: 5px;
-  font-size: clamp(17px, 1.0625rem, 21.08px);
-  font-weight: 400;
 }