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

package/css/core.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/css/core.scss","../src/themes/functions.color.scss","../src/components/modal/modal.native.vars.scss","../src/themes/mixins.scss","../src/themes/native/native.globals.scss","../src/components/menu/menu.ios.vars.scss","../src/components/menu/menu.md.vars.scss"],"names":[],"mappings":"AASA,MCoOQ,6BACA,oCACA,mCACA,gDACA,mCACA,kCALA,+BACA,sCACA,qCACA,kDACA,qCACA,oCALA,8BACA,sCACA,oCACA,iDACA,oCACA,mCALA,6BACA,qCACA,mCACA,0CACA,mCACA,kCALA,6BACA,qCACA,mCACA,0CACA,mCACA,kCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,2BACA,qCACA,iCACA,wCACA,iCACA,gCALA,4BACA,qCACA,kCACA,+CACA,kCACA,iCALA,0BACA,iCACA,gCACA,6CACA,gCACA,+BDhOJ,yBC6IA,+DACA,0EACA,yEACA,0FACA,sEACA,oEAIA,qGDtJA,2BC6IA,iEACA,4EACA,2EACA,4FACA,wEACA,sEAIA,yGDtJA,0BC6IA,gEACA,4EACA,0EACA,2FACA,uEACA,qEAIA,uGDtJA,yBC6IA,+DACA,2EACA,yEACA,oFACA,sEACA,oEAIA,qGDtJA,yBC6IA,+DACA,2EACA,yEACA,oFACA,sEACA,oEAIA,qGDtJA,wBC6IA,8DACA,yEACA,wEACA,yFACA,qEACA,mEAIA,mGDtJA,uBC6IA,6DACA,2EACA,uEACA,kFACA,oEACA,kEAIA,iGDtJA,wBC6IA,8DACA,2EACA,wEACA,yFACA,qEACA,mEAIA,mGDtJA,sBC6IA,4DACA,uEACA,sEACA,uFACA,mEACA,iEAIA,+FD7IJ,SACE,8FAEF,QACE,2DAGF,KACE,uCACA,2CAGF,KACE,uCACA,4BAGF,wBACE,gBAaF,iQAIE,YEnCwB,IF2C1B,qIAEE,eE1C2B,IFkD7B,yEAEE,qDACA,mDAOF,qCACE,4CACE,0BA+BJ,2DACE,sBACA,mBAaF,wCACE,4CAMF,UGuQM,MHtQiB,EGuQjB,KHvQuB,EG2R3B,IH3RkB,EG4RlB,OH5RwB,EAExB,aACA,kBAEA,sBACA,8BAEA,0BACA,QInGuB,EJ2GzB,uCACE,oBAWF,oBACE,kBAEA,qBAEA,YAGF,8CACE,kBAGF,iRAeE,wBAGF,oBACE,UAGF,wCACE,cAMF,6CAEE,8BAGF,6BACE,KACE,mDAIJ,iDACE,KAGE,0EACA,mFACA,6EACA,iFAOJ,mFAEE,cAGF,iCACE,cAMF,cG0VM,iCHtVN,mBACE,eACA,0BAUA,oBAMA,kBAUF,+BACE,mBAGF,4CACE,gBAGF,0BACE,WK7RoB,4BLgStB,mCACE,WK9RwB,2BLqS1B,yBACE,WM5SmB,6BN+SrB,uBACE,WMhTmB,6BNsTrB,6EACE,2BACA,4BAGF,4EACE,8BACA,+BAGF,qEACE,oBAGF,0EACE,2DAGF,uCACE,yCAEE,4BAUJ,qJAEE,yBAGF,2GACE,oBACA,0BAGF,uMAEE,aASF,6CACE,iBASF,6BACE,qBACA,sBAUF,wDACE,YACA,iBAUF,uNAOE,aAgBF,oCACE,gBAUF,4CACE,kBACE","file":"core.css","sourcesContent":["@use \"sass:map\";\n@import \"../themes/native/native.globals\";\n@import \"../components/menu/menu.ios.vars\";\n@import \"../components/menu/menu.md.vars\";\n@import \"../components/modal/modal.native.vars\";\n\n// Ionic Colors\n// --------------------------------------------------\n\n:root {\n  /**\n   * Set the theme colors from the\n   * `native.theme.default.scss` file.\n   */\n  @include set-theme-colors($colors);\n  @include generate-color-variables();\n\n  @each $color-name, $value in $colors {\n    .ion-color-#{$color-name} {\n      @include generate-color($color-name);\n    }\n  }\n}\n\n// Ionic Font Family\n// --------------------------------------------------\n\nhtml.ios {\n  --ion-default-font: -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", \"Roboto\", sans-serif;\n}\nhtml.md {\n  --ion-default-font: \"Roboto\", \"Helvetica Neue\", sans-serif;\n}\n\nhtml {\n  --ion-dynamic-font: -apple-system-body;\n  --ion-font-family: var(--ion-default-font);\n}\n\nbody {\n  background: var(--ion-background-color);\n  color: var(--ion-text-color);\n}\n\nbody.backdrop-no-scroll {\n  overflow: hidden;\n}\n\n// Modal - Card Style\n// --------------------------------------------------\n\n/**\n * Card style modal needs additional padding on the\n * top of the header. We accomplish this by targeting\n * the first toolbar in the header.\n * Footer also needs this. We do not adjust the bottom\n * padding though because of the safe area.\n */\nhtml.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,\nhtml.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type,\nhtml.ios ion-modal ion-footer ion-toolbar:first-of-type,\nhtml.ios ion-footer.modal-footer-moving ion-toolbar:first-of-type {\n  padding-top: $modal-sheet-padding-top;\n}\n\n/**\n* Card style modal needs additional padding on the\n* bottom of the header. We accomplish this by targeting\n* the last toolbar in the header.\n*/\nhtml.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type,\nhtml.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type {\n  padding-bottom: $modal-sheet-padding-bottom;\n}\n\n/**\n* Add padding on the left and right\n* of toolbars while accounting for\n* safe area values when in landscape.\n*/\nhtml.ios ion-modal ion-toolbar,\nhtml.ios .modal-footer-moving ion-toolbar {\n  padding-right: calc(var(--ion-safe-area-right) + 8px);\n  padding-left: calc(var(--ion-safe-area-left) + 8px);\n}\n\n/**\n * Card style modal on iPadOS\n * should only have backdrop on first instance.\n */\n@media screen and (min-width: 768px) {\n  html.ios ion-modal.modal-card:first-of-type {\n    --backdrop-opacity: 0.18;\n  }\n}\n\n/**\n * Subsequent modals should not have a backdrop/box shadow\n * as it will cause the screen to appear to get progressively\n * darker. With Ionic 6, declarative modals made it\n * possible to have multiple non-presented modals in the DOM,\n * so we could no longer rely on ion-modal:first-of-type.\n * Here we disable the opacity/box-shadow for every modal\n * that comes after the first presented modal.\n *\n * Note: ion-modal:not(.overlay-hidden):first-of-type\n * does not match the first modal to not have\n * the .overlay-hidden class, it will match the\n * first modal in general only if it does not\n * have the .overlay-hidden class.\n * The :nth-child() pseudo-class has support\n * for selectors which would help us here. At the\n * time of writing it does not have great cross browser\n * support.\n *\n * Note 2: This should only apply to non-card and\n * non-sheet modals. Card and sheet modals have their\n * own criteria for displaying backdrops/box shadows.\n *\n * Do not use :not(.overlay-hidden) in place of\n * .show-modal because that triggers a memory\n * leak in Blink: https://bugs.chromium.org/p/chromium/issues/detail?id=1418768\n */\nion-modal.modal-default.show-modal ~ ion-modal.modal-default {\n  --backdrop-opacity: 0;\n  --box-shadow: none;\n}\n\n/**\n * This works around a bug in WebKit where the\n * content will overflow outside of the bottom border\n * radius when re-painting. As long as a single\n * border radius value is set on .ion-page, this\n * issue does not happen. We set the top left radius\n * here because the top left corner will always have a\n * radius no matter the platform.\n * This behavior only applies to card modals.\n */\nhtml.ios ion-modal.modal-card .ion-page {\n  border-top-left-radius: var(--border-radius);\n}\n\n// Page Container Structure\n// --------------------------------------------------\n\n.ion-page {\n  @include position(0, 0, 0, 0);\n\n  display: flex;\n  position: absolute;\n\n  flex-direction: column;\n  justify-content: space-between;\n\n  contain: layout size style;\n  z-index: $z-index-page-container;\n}\n\n/**\n * Allows pointer events to pass through child route page wrappers\n * when they only contain a sheet modal that permits background interaction.\n * https://github.com/ionic-team/ionic-framework/issues/30700\n */\n.ion-page.ion-page-overlay-passthrough {\n  pointer-events: none;\n}\n\n/**\n * When making custom dialogs, using\n * ion-content is not required. As a result,\n * some developers may wish to have dialogs\n * that are automatically sized by the browser.\n * These changes allow certain dimension values\n * such as fit-content to work correctly.\n */\nion-modal > .ion-page {\n  position: relative;\n\n  contain: layout style;\n\n  height: 100%;\n}\n\n.split-pane-visible > .ion-page.split-pane-main {\n  position: relative;\n}\n\nion-route,\nion-route-redirect,\nion-router,\nion-select-option,\nion-nav-controller,\nion-menu-controller,\nion-action-sheet-controller,\nion-alert-controller,\nion-loading-controller,\nion-modal-controller,\nion-picker-controller,\nion-popover-controller,\nion-toast-controller,\n.ion-page-hidden {\n  /* stylelint-disable-next-line declaration-no-important */\n  display: none !important;\n}\n\n.ion-page-invisible {\n  opacity: 0;\n}\n\n.can-go-back > ion-header ion-back-button {\n  display: block;\n}\n\n// Ionic Safe Margins\n// --------------------------------------------------\n\nhtml.plt-ios.plt-hybrid,\nhtml.plt-ios.plt-pwa {\n  --ion-statusbar-padding: 20px;\n}\n\n@supports (padding-top: 20px) {\n  html {\n    --ion-safe-area-top: var(--ion-statusbar-padding);\n  }\n}\n\n@supports (padding-top: env(safe-area-inset-top)) {\n  html {\n    // `--safe-area-inset-*` are set by Capacitor\n    // @see https://capacitorjs.com/docs/apis/system-bars#android-note\n    --ion-safe-area-top: var(--safe-area-inset-top, env(safe-area-inset-top));\n    --ion-safe-area-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));\n    --ion-safe-area-left: var(--safe-area-inset-left, env(safe-area-inset-left));\n    --ion-safe-area-right: var(--safe-area-inset-right, env(safe-area-inset-right));\n  }\n}\n\n// Global Card Styles\n// --------------------------------------------------\n\nion-card.ion-color .ion-inherit-color,\nion-card-header.ion-color .ion-inherit-color {\n  color: inherit;\n}\n\nion-card-header + ion-card-content {\n  padding-top: 0;\n}\n\n// Menu Styles\n// --------------------------------------------------\n\n.menu-content {\n  @include transform(translate3d(0, 0, 0));\n}\n\n.menu-content-open {\n  cursor: pointer;\n  touch-action: manipulation;\n\n  /**\n   * The containing element itself should be clickable but\n   * everything inside of it should not clickable when menu is open\n   *\n   * Setting pointer-events after scrolling has already started\n   * will not cancel scrolling which is why we also set\n   * overflow-y below.\n   */\n  pointer-events: none;\n\n  /**\n   * This accounts for scenarios where the main content itself\n   * is scrollable.\n   */\n  overflow-y: hidden;\n}\n\n/**\n * Setting overflow cancels any in-progress scrolling\n * when the menu opens. This prevents users from accidentally\n * scrolling the main content while also dragging the menu open.\n * The code below accounts for both ion-content and then custom\n * scroll containers within ion-content (such as virtual scroll)\n */\n.menu-content-open ion-content {\n  --overflow: hidden;\n}\n\n.menu-content-open .ion-content-scroll-host {\n  overflow: hidden;\n}\n\n.ios .menu-content-reveal {\n  box-shadow: $menu-ios-box-shadow-reveal;\n}\n\n[dir=\"rtl\"].ios .menu-content-reveal {\n  box-shadow: $menu-ios-box-shadow-reveal-rtl;\n}\n\n.ios .menu-content-push {\n  box-shadow: $menu-ios-box-shadow-push;\n}\n\n.md .menu-content-reveal {\n  box-shadow: $menu-md-box-shadow;\n}\n\n.md .menu-content-push {\n  box-shadow: $menu-md-box-shadow;\n}\n\n// Accordion Styles\n// --------------------------------------------------\n\nion-accordion-group.accordion-group-expand-inset > ion-accordion:first-of-type {\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n}\n\nion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type {\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n}\n\nion-accordion-group > ion-accordion:last-of-type ion-item[slot=\"header\"] {\n  --border-width: 0px;\n}\n\nion-accordion.accordion-animated > [slot=\"header\"] .ion-accordion-toggle-icon {\n  transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  ion-accordion .ion-accordion-toggle-icon {\n    /* stylelint-disable declaration-no-important */\n    transition: none !important;\n  }\n}\n\n/**\n * The > [slot=\"header\"] selector ensures that we do\n * not modify toggle icons for any nested accordions. The state\n * of one accordion should not affect any accordions inside\n * of a nested accordion group.\n */\nion-accordion.accordion-expanding > [slot=\"header\"] .ion-accordion-toggle-icon,\nion-accordion.accordion-expanded > [slot=\"header\"] .ion-accordion-toggle-icon {\n  transform: rotate(180deg);\n}\n\nion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-previous ion-item[slot=\"header\"] {\n  --border-width: 0px;\n  --inner-border-width: 0px;\n}\n\nion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanding:first-of-type,\nion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanded:first-of-type {\n  margin-top: 0;\n}\n\n// Datetime Styles\n// --------------------------------------------------\n\n// Safari/iOS 15 changes the appearance of input[type=\"date\"].\n// For backwards compatibility from Ionic 5/Safari 14 designs,\n// we override the appearance only when using within an ion-input.\nion-input input::-webkit-date-and-time-value {\n  text-align: start;\n}\n\n/**\n * The .ion-datetime-button-overlay class contains\n * styles that allow any modal/popover to be\n * sized according to the dimensions of the datetime\n * when used with ion-datetime-button.\n */\n.ion-datetime-button-overlay {\n  --width: fit-content;\n  --height: fit-content;\n}\n\n/**\n * The grid variant can scale down when inline.\n * When used in a `fit-content` overlay, this causes\n * the overlay to shrink when the month/year picker is open.\n * Explicitly setting the dimensions lets us have a consistently\n * sized grid interface.\n */\n.ion-datetime-button-overlay ion-datetime.datetime-grid {\n  width: 320px;\n  min-height: 320px;\n}\n\n/**\n * When moving focus on page transitions we call .focus() on an element which can\n * add an undesired outline ring. This CSS removes the outline ring.\n * We also remove the outline ring from elements that are actively being focused\n * by the focus manager. We are intentionally selective about which elements this\n * applies to so we do not accidentally override outlines set by the developer.\n */\n[ion-last-focus],\nheader[tabindex=\"-1\"]:focus,\n[role=\"banner\"][tabindex=\"-1\"]:focus,\nmain[tabindex=\"-1\"]:focus,\n[role=\"main\"][tabindex=\"-1\"]:focus,\nh1[tabindex=\"-1\"]:focus,\n[role=\"heading\"][aria-level=\"1\"][tabindex=\"-1\"]:focus {\n  outline: none;\n}\n\n// Popover Styles\n// --------------------------------------------------\n\n/*\n * If a popover has a child ion-content (or class equivalent) then the .popover-viewport element\n * should not be scrollable to ensure the inner content does scroll. However, if the popover\n * does not have a child ion-content (or class equivalent) then the .popover-viewport element\n * should remain scrollable. This code exists globally because popover targets\n * .popover-viewport using ::slotted which only supports simple selectors.\n *\n * Note that we do not need to account for .ion-content-scroll-host here because that\n * class should always be placed within ion-content even if ion-content is not scrollable.\n */\n.popover-viewport:has(> ion-content) {\n  overflow: hidden;\n}\n\n/**\n * :has has cross-browser support, but it is still relatively new. As a result,\n * we should fallback to the old behavior for environments that do not support :has.\n * Developers can explicitly enable this behavior by setting overflow: visible\n * on .popover-viewport if they know they are not going to use an ion-content.\n * TODO FW-6106 Remove this\n */\n@supports not selector(:has(> ion-content)) {\n  .popover-viewport {\n    overflow: hidden;\n  }\n}\n","@use \"sass:map\";\n\n// Set the theme colors map to be used by the color functions\n// --------------------------------------------------------------------------------------------\n@mixin set-theme-colors($colorsMap) {\n  $theme-colors: $colorsMap !global;\n}\n\n// Gets the active color's css variable from a variation. Alpha is optional.\n// --------------------------------------------------------------------------------------------\n// Example usage:\n// current-color(base) => var(--ion-color-base)\n// current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)\n// --------------------------------------------------------------------------------------------\n@function current-color($variation, $alpha: null, $subtle: false) {\n  $variable: if($subtle, \"--ion-color-subtle-#{$variation}\", \"--ion-color-#{$variation}\");\n\n  @if $alpha == null {\n    @return var(#{$variable});\n  } @else {\n    @return rgba(var(#{$variable}-rgb), #{$alpha});\n  }\n}\n\n// Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.\n// --------------------------------------------------------------------------------------------\n// Example usage:\n// ion-color(primary, base) => var(--ion-color-primary, #3880ff)\n// ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)\n// ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)\n// --------------------------------------------------------------------------------------------\n@function ion-color($name, $variation, $alpha: null, $rgb: null, $subtle: false) {\n  @if not($theme-colors) {\n    @error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()';\n  }\n\n  $values: map.get($theme-colors, $name);\n  $values: map.get($values, if($subtle, subtle, bold));\n\n  $value: map.get($values, $variation);\n\n  // TODO(FW-6417): this can be removed when foreground is required\n  // Fallback to \"base\" variant when \"foreground\" variant is undefined\n  @if ($variation == foreground and $value == null) {\n    $variation: base;\n    $value: map.get($values, $variation);\n  }\n\n  // If the color requested is subtle we return `--ion-color-{color}-subtle-contrast`,\n  // otherwise we return `--ion-color-{color}-contrast`.\n  $variable: if($subtle, \"--ion-color-#{$name}-subtle-#{$variation}\", \"--ion-color-#{$name}-#{$variation}\");\n\n  // If the variation being used is \"base\", we do not include the variant.\n  // If the color requested is subtle we return `--ion-color-{color}-subtle`,\n  // otherwise we return `--ion-color-{color}`.\n  @if ($variation == base) {\n    $variable: if($subtle, \"--ion-color-#{$name}-subtle\", \"--ion-color-#{$name}\");\n  }\n\n  @if ($alpha) {\n    $value: color-to-rgb-list($value);\n\n    @return rgba(var(#{$variable}-rgb, $value), $alpha);\n  }\n\n  @if ($rgb) {\n    $value: color-to-rgb-list($value);\n    $variable: #{$variable}-rgb;\n  }\n\n  @return var(#{$variable}, $value);\n}\n\n// Mixes a color with black to create its shade.\n// --------------------------------------------------------------------------------------------\n@function get-color-shade($color) {\n  @if (type-of($color) != color) {\n    @return $color;\n  }\n  @return mix(#000, $color, 12%);\n}\n\n// Mixes a color with white to create its tint.\n// --------------------------------------------------------------------------------------------\n@function get-color-tint($color) {\n  @if (type-of($color) != color) {\n    @return $color;\n  }\n  @return mix(#fff, $color, 10%);\n}\n\n// Converts a color to a comma separated rgb.\n// --------------------------------------------------------------------------------------------\n@function color-to-rgb-list($color) {\n  @if (type-of($color) != color) {\n    @return $color;\n  }\n  @return #{red($color)}, #{green($color)}, #{blue($color)};\n}\n\n// Generates color variants for the specified color based on the\n// colors map for whichever hue is passed (bold, subtle).\n// --------------------------------------------------------------------------------------------\n// Example usage (bold):\n// .ion-color-primary {\n//   @include generate-color-variants(\"primary\");\n// }\n//\n// Example output (bold):\n// .ion-color-primary {\n//   --ion-color-base: var(--ion-color-primary-base, #105cef) !important;\n//   --ion-color-base-rgb: var(--ion-color-primary-base-rgb, 16, 92, 239) !important;\n//   --ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;\n//   --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;\n//   --ion-color-shade: var(--ion-color-primary-shade, #0f54da) !important;\n//   --ion-color-tint: var(--ion-color-primary-tint, #94a5f4) !important;\n// }\n// --------------------------------------------------------------------------------------------\n// Example usage (subtle):\n// .ion-color-primary {\n//   @include generate-color-variants(\"primary\", \"subtle\")\n// }\n//\n// Example output (subtle):\n// .ion-color-primary {\n//   --ion-color-subtle-base: var(--ion-color-primary-subtle-base, #f2f4fd) !important;\n//   --ion-color-subtle-base-rgb: var(--ion-color-primary-subtle-base-rgb, 242, 244, 253) !important;\n//   --ion-color-subtle-contrast: var(--ion-color-primary-subtle-contrast, #105cef) !important;\n//   --ion-color-subtle-contrast-rgb: var(--ion-color-primary-subtle-contrast-rgb, 16, 92, 239) !important;\n//   --ion-color-subtle-shade: var(--ion-color-primary-subtle-shade, #d0d7fa) !important;\n//   --ion-color-subtle-tint: var(--ion-color-primary-subtle-tint, #e9ecfc) !important;\n// }\n// --------------------------------------------------------------------------------------------\n@mixin generate-color-variants($color-name, $hue: \"bold\") {\n  @if not($theme-colors) {\n    @error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()';\n  }\n\n  // Grab the different hue color maps for the\n  // specified color and then grab the map of color variants\n  $hue-colors: map.get($theme-colors, $color-name);\n  $color-variants: map.get($hue-colors, $hue);\n\n  $prefix: if($hue == \"subtle\", \"-subtle\", \"\");\n  $name: \"\" + $color-name;\n\n  // TODO(FW-6417) this @if can be removed if we add subtle colors for ios and md\n  // Only proceed if the color variants exist\n  @if $color-variants {\n    // Grab the individual color variants\n    $base: map.get($color-variants, base);\n    $base-rgb: map.get($color-variants, base-rgb);\n    $contrast: map.get($color-variants, contrast);\n    $contrast-rgb: map.get($color-variants, contrast-rgb);\n    $shade: map.get($color-variants, shade);\n    $tint: map.get($color-variants, tint);\n    $foreground: map.get($color-variants, foreground);\n\n    // Generate CSS variables dynamically\n    --ion-color#{$prefix}-base: var(--ion-color-#{$name}#{$prefix}, #{$base}) !important;\n    --ion-color#{$prefix}-base-rgb: var(--ion-color-#{$name}#{$prefix}-rgb, #{$base-rgb}) !important;\n    --ion-color#{$prefix}-contrast: var(--ion-color-#{$name}#{$prefix}-contrast, #{$contrast}) !important;\n    --ion-color#{$prefix}-contrast-rgb: var(--ion-color-#{$name}#{$prefix}-contrast-rgb, #{$contrast-rgb}) !important;\n    --ion-color#{$prefix}-shade: var(--ion-color-#{$name}#{$prefix}-shade, #{$shade}) !important;\n    --ion-color#{$prefix}-tint: var(--ion-color-#{$name}#{$prefix}-tint, #{$tint}) !important;\n    // TODO(FW-6417): remove the fallback variable when the foreground variable is\n    // required by all palettes for all themes:\n    // --ion-color#{$prefix}-foreground: var(--ion-color-#{$name}#{$prefix}-foreground, #{$foreground}) !important;\n    --ion-color#{$prefix}-foreground: var(\n      --ion-color-#{$name}#{$prefix}-foreground,\n      var(--ion-color-#{$name}#{$prefix}, #{$foreground})\n    ) !important;\n  }\n}\n\n// Generates both bold and subtle color variables\n// for the specified color in the colors map.\n// --------------------------------------------------------------------------------------------\n@mixin generate-color($color-name) {\n  @include generate-color-variants($color-name);\n  @include generate-color-variants($color-name, \"subtle\");\n}\n\n// Generates color variables for all colors in the colors map for both hues (bold, subtle).\n// --------------------------------------------------------------------------------------------\n// Example usage:\n// :root {\n//   generate-color-variables()\n// }\n//\n// Example output:\n// :root {\n//   --ion-color-primary: #105cef;\n//   --ion-color-primary-rgb: 16, 92, 239;\n//   --ion-color-primary-contrast: #ffffff;\n//   --ion-color-primary-contrast-rgb: 255, 255, 255;\n//   --ion-color-primary-shade: #0f54da;\n//   --ion-color-primary-tint: #94a5f4;\n//   --ion-color-primary-foreground: #105cef;\n//   --ion-color-primary-subtle: #f2f4fd;\n//   --ion-color-primary-subtle-rgb: 242, 244, 253;\n//   --ion-color-primary-subtle-contrast: #105cef;\n//   --ion-color-primary-subtle-contrast-rgb: 16, 92, 239;\n//   --ion-color-primary-subtle-shade: #d0d7fa;\n//   --ion-color-primary-subtle-tint: #e9ecfc;\n//   --ion-color-primary-foreground: #105cef;\n//   ...\n//   --ion-color-dark: #292929;\n//   --ion-color-dark-rgb: 41, 41, 41;\n//   --ion-color-dark-contrast: #ffffff;\n//   --ion-color-dark-contrast-rgb: 255, 255, 255;\n//   --ion-color-dark-shade: #242424;\n//   --ion-color-dark-tint: #4e4e4e;\n//   --ion-color-dark-foreground: #242424;\n//   --ion-color-dark-subtle: #f5f5f5;\n//   --ion-color-dark-subtle-rgb: 245, 245, 245;\n//   --ion-color-dark-subtle-contrast: #292929;\n//   --ion-color-dark-subtle-contrast-rgb: 41, 41, 41;\n//   --ion-color-dark-subtle-shade: #e0e0e0;\n//   --ion-color-dark-subtle-tint: #efefef;\n//   --ion-color-dark-subtle-foreground: #242424;\n// }\n// --------------------------------------------------------------------------------------------\n@mixin generate-color-variables() {\n  @if not($theme-colors) {\n    @error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color().';\n  }\n\n  @each $color-name, $value in $theme-colors {\n    $name: \"\" + $color-name;\n\n    @each $hue in (bold, subtle) {\n      $colors: map.get($value, $hue);\n\n      @if $colors != null {\n        $prefix: if($hue == subtle, \"-subtle\", \"\");\n\n        --ion-color-#{$name}#{$prefix}: #{map.get($colors, base)};\n        --ion-color-#{$name}#{$prefix}-rgb: #{map.get($colors, base-rgb)};\n        --ion-color-#{$name}#{$prefix}-contrast: #{map.get($colors, contrast)};\n        --ion-color-#{$name}#{$prefix}-contrast-rgb: #{map.get($colors, contrast-rgb)};\n        --ion-color-#{$name}#{$prefix}-shade: #{map.get($colors, shade)};\n        --ion-color-#{$name}#{$prefix}-tint: #{map.get($colors, tint)};\n        // TODO(FW-6417): this \"if\" can be removed when foreground is defined for ios/md\n        // themes. It should not be added until we want foreground to be required for\n        // ios and md because this will be a breaking change, requiring users to add\n        // `--ion-color-{color}-foreground` in order to override the default colors\n        @if (map.get($colors, foreground)) {\n          --ion-color-#{$name}#{$prefix}-foreground: #{map.get($colors, foreground)};\n        }\n      }\n    }\n  }\n}\n","@import \"../../themes/native/native.globals\";\n\n// Modals\n// --------------------------------------------------\n\n/// @prop - Min width of the modal inset\n$modal-inset-min-width: 768px;\n\n/// @prop - Minimum height of the small modal inset\n$modal-inset-min-height-small: 600px;\n\n/// @prop - Minimum height of the large modal inset\n$modal-inset-min-height-large: 768px;\n\n/// @prop - Width of the large modal inset\n$modal-inset-width: 600px;\n\n/// @prop - Height of the small modal inset\n$modal-inset-height-small: 500px;\n\n/// @prop - Height of the large modal inset\n$modal-inset-height-large: 600px;\n\n/// @prop - Text color of the modal content\n$modal-text-color: $text-color;\n\n/// @prop - Padding top of the sheet modal\n$modal-sheet-padding-top: 6px;\n\n/// @prop - Padding bottom of the sheet modal\n$modal-sheet-padding-bottom: 6px;\n","@use \"./functions.string\" as string;\n\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n@mixin tablet-viewport() {\n  @media screen and (min-width: 768px) {\n    @content;\n  }\n}\n\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n@mixin mobile-viewport() {\n  @media screen and (max-width: 767px) {\n    @content;\n  }\n}\n\n@mixin input-cover() {\n  @include position(0, null, null, 0);\n  @include margin(0);\n\n  position: absolute;\n\n  width: 100%;\n  height: 100%;\n\n  border: 0;\n\n  outline: none;\n\n  background: transparent;\n\n  cursor: pointer;\n\n  appearance: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n}\n\n@mixin visually-hidden() {\n  position: absolute;\n\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  width: 100%;\n  height: 100%;\n\n  margin: 0;\n\n  padding: 0;\n\n  border: 0;\n\n  outline: 0;\n\n  opacity: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n@mixin text-inherit() {\n  color: inherit;\n\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n\n  letter-spacing: inherit;\n\n  text-align: inherit;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n\n  white-space: inherit;\n}\n\n@mixin button-state() {\n  @include position(0, 0, 0, 0);\n\n  position: absolute;\n\n  content: \"\";\n\n  opacity: 0;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n  $keys: map-keys($map);\n\n  @return nth($keys, $index);\n}\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    576px\n@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {\n  $min: map-get($breakpoints, $name);\n\n  @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"\"  (Returns a blank string)\n//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {\n  @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n  $n: index($breakpoint-names, $name);\n\n  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n//\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\t// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\t// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    767.98px\n@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {\n  $max: map-get($breakpoints, $name);\n\n  @return if($max and $max > 0, $max - 0.02, null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n  @content;\n\n  // $root: #{&};\n  // @at-root [dir] {\n  //   #{$root} {\n  //     @content;\n  //   }\n  // }\n}\n\n@mixin rtl() {\n  $root: #{&};\n\n  $rootSplit: string.str-split($root, \",\");\n  $selectors: #{string.add-root-selector($root, \"[dir=rtl]\")};\n  $selectorsSplit: string.str-split($selectors, \",\");\n\n  $hostContextSelectors: ();\n  $restSelectors: ();\n  $dirSelectors: ();\n\n  // Selectors must be split into individual selectors in case the browser\n  // doesn't support a specific selector.\n  // For example, Firefox and Safari doesn't support `:host-context()`.\n  // If an invalid selector is used, then the entire group of selectors\n  // will be ignored.\n  // @link https://www.w3.org/TR/selectors-3/#grouping\n  @each $selector in $selectorsSplit {\n    // Group the selectors back into a single selector to optimize the output.\n    @if str-index($selector, \":host-context\") {\n      $hostContextSelectors: append($hostContextSelectors, $selector, comma);\n    } @else {\n      // Group the selectors back into a single selector to optimize the output.\n      $restSelectors: append($restSelectors, $selector, comma);\n    }\n  }\n\n  // Supported by Chrome.\n  @if length($hostContextSelectors) > 0 {\n    @at-root #{$hostContextSelectors} {\n      @content;\n    }\n  }\n\n  // Supported by all browsers.\n  @if length($restSelectors) > 0 {\n    @at-root #{$restSelectors} {\n      @content;\n    }\n  }\n\n  // If browser can support `:dir()`, then add the `:dir()` selectors.\n  @supports selector(:dir(rtl)) {\n    // Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.\n    // `:host-context()` is added:\n    // - through the `add-root-selector()` function.\n    // - first so that it takes precedence over `:dir()`.\n    // For example,\n    // - Firefox doesn't support `:host-context()`, but does support `:dir()`.\n    // - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`\n    // @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/\n    // -- However, there is a Webkit bug on v16 that prevents `:dir()` from working when\n    // -- the app direction is changed dynamically. v17+ works fine.\n    // -- @link https://bugs.webkit.org/show_bug.cgi?id=257133\n\n    // Supported by Firefox.\n    @at-root #{string.add-root-selector($root, \":dir(rtl)\", false)} {\n      @content;\n    }\n  }\n}\n\n@mixin ltr() {\n  @content;\n}\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n  $url: url-encode($svg);\n  $viewBox: string.str-split(string.str-extract($svg, \"viewBox='\", \"'\"), \" \");\n\n  @if $flip-rtl != true or $viewBox == null {\n    @include multi-dir() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n    }\n  } @else {\n    $transform: \"transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n    $flipped-url: $svg;\n    $flipped-url: string.str-replace($flipped-url, \"<path\", \"<path #{$transform}\");\n    $flipped-url: string.str-replace($flipped-url, \"<line\", \"<line #{$transform}\");\n    $flipped-url: string.str-replace($flipped-url, \"<polygon\", \"<polygon #{$transform}\");\n    $flipped-url: url-encode($flipped-url);\n\n    @include ltr() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n    }\n\n    @include rtl() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$flipped-url}\");\n    }\n  }\n}\n\n// Add property horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin property-horizontal($prop, $start, $end: $start) {\n  @if $start == 0 and $end == 0 {\n    #{$prop}-left: $start;\n    #{$prop}-right: $end;\n  } @else {\n    -webkit-#{$prop}-start: $start;\n    #{$prop}-inline-start: $start;\n    -webkit-#{$prop}-end: $end;\n    #{$prop}-inline-end: $end;\n  }\n}\n\n// Add property for all directions\n// @param {string} $prop\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// @param {boolean} $content include content or use default\n// ----------------------------------------------------------\n@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {\n  @include property-horizontal($prop, $start, $end);\n  #{$prop}-top: $top;\n  #{$prop}-bottom: $bottom;\n}\n\n// Add padding horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin padding-horizontal($start, $end: $start) {\n  @include property-horizontal(padding, $start, $end);\n}\n\n// Add padding for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(padding, $top, $end, $bottom, $start);\n}\n\n// Add margin horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin margin-horizontal($start, $end: $start) {\n  @include property-horizontal(margin, $start, $end);\n}\n\n// Add margin for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(margin, $top, $end, $bottom, $start);\n}\n\n// Add position horizontal\n// @param {string} $start - amount to position start\n// @param {string} $end - amount to left: 0; end\n// ----------------------------------------------------------\n@mixin position-horizontal($start: null, $end: null) {\n  @if $start == $end {\n    @include multi-dir() {\n      right: $end;\n      left: $start;\n    }\n  } @else {\n    @at-root {\n      & {\n        inset-inline-start: $start;\n        inset-inline-end: $end;\n      }\n    }\n  }\n}\n\n// Add position for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin position($top: null, $end: null, $bottom: null, $start: null) {\n  @include position-horizontal($start, $end);\n  top: $top;\n  bottom: $bottom;\n}\n\n// Add border for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin border($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(border, $top, $end, $bottom, $start);\n}\n\n// Add border radius for all directions\n// @param {string} $top-start\n// @param {string} $top-end\n// @param {string} $bottom-end\n// @param {string} $bottom-start\n// ----------------------------------------------------------\n@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {\n  @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {\n    border-radius: $top-start;\n  } @else {\n    border-start-start-radius: $top-start;\n    border-start-end-radius: $top-end;\n    border-end-end-radius: $bottom-end;\n    border-end-start-radius: $bottom-start;\n  }\n}\n\n// Add direction for all directions\n// @param {string} $dir - Direction on LTR\n@mixin direction($dir) {\n  $other-dir: null;\n\n  @if $dir == ltr {\n    $other-dir: rtl;\n  } @else {\n    $other-dir: ltr;\n  }\n\n  @include ltr() {\n    direction: $dir;\n  }\n\n  @include rtl() {\n    direction: $other-dir;\n  }\n}\n\n// Add float for all directions\n// @param {string} $side\n// @param {string} $decorator - !important\n@mixin float($side, $decorator: null) {\n  @if $side == start {\n    @include ltr() {\n      float: left $decorator;\n    }\n\n    @include rtl() {\n      float: right $decorator;\n    }\n  } @else if $side == end {\n    @include ltr() {\n      float: right $decorator;\n    }\n\n    @include rtl() {\n      float: left $decorator;\n    }\n  } @else {\n    @include multi-dir() {\n      float: $side $decorator;\n    }\n  }\n}\n\n@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {\n  @if $horizontal == start or $horizontal == end {\n    $horizontal-ltr: null;\n    $horizontal-rtl: null;\n\n    @if $horizontal == start {\n      $horizontal-ltr: left;\n      $horizontal-rtl: right;\n    } @else {\n      $horizontal-ltr: right;\n      $horizontal-rtl: left;\n    }\n\n    @include ltr() {\n      background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;\n    }\n\n    @include rtl() {\n      background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;\n    }\n  } @else {\n    @include multi-dir() {\n      background-position: $horizontal $horizontal-amount $vertical $vertical-amount;\n    }\n  }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n  @if $x-axis == start {\n    @include ltr() {\n      transform-origin: left $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: right $y-axis;\n    }\n  } @else if $x-axis == end {\n    @include ltr() {\n      transform-origin: right $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: left $y-axis;\n    }\n  } @else if $x-axis == left or $x-axis == right {\n    @include multi-dir() {\n      transform-origin: $x-axis $y-axis;\n    }\n  } @else {\n    @include ltr() {\n      transform-origin: $x-axis $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: calc(100% - #{$x-axis}) $y-axis;\n    }\n  }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n  $extra: null;\n\n  $x: null;\n  $ltr-translate: null;\n  $rtl-translate: null;\n\n  @each $transform in $transforms {\n    @if (str-index($transform, translate3d)) {\n      $transform: string.str-replace($transform, \"translate3d(\");\n      $transform: string.str-replace($transform, \")\");\n\n      $coordinates: string.str-split($transform, \",\");\n\n      $x: nth($coordinates, 1);\n      $y: nth($coordinates, 2);\n      $z: nth($coordinates, 3);\n\n      $ltr-translate: translate3d($x, $y, $z);\n      $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n    } @else {\n      @if $extra == null {\n        $extra: $transform;\n      } @else {\n        $extra: $extra $transform;\n      }\n    }\n  }\n\n  @if $x == \"0\" or $x == null {\n    @include multi-dir() {\n      transform: $ltr-translate $extra;\n    }\n  } @else {\n    @include ltr() {\n      transform: $ltr-translate $extra;\n    }\n\n    @include rtl() {\n      transform: $rtl-translate $extra;\n    }\n  }\n}\n","// Global Utility Functions\n@import \"../functions.sizes\";\n@import \"../functions.string\";\n\n// Global Color Functions\n@import \"../functions.color\";\n\n// Global Font Functions\n@import \"../functions.font\";\n\n// Global Mixins\n@import \"../mixins\";\n\n// Default Theme\n@import \"./native.theme.default\";\n@include set-theme-colors($colors);\n\n// Default General\n// --------------------------------------------------\n$font-family-base: var(--ion-font-family, inherit);\n\n// Hairlines width\n$hairlines-width: 0.55px;\n\n// The minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries\n$screen-breakpoints: (\n  xs: 0,\n  sm: 576px,\n  md: 768px,\n  lg: 992px,\n  xl: 1200px,\n);\n\n// Input placeholder opacity\n// Ensures that the placeholder has the\n// correct color contrast against the background.\n$placeholder-opacity: var(--ion-placeholder-opacity, 0.6);\n\n$form-control-label-margin: 16px;\n\n// How much the stacked labels should be scaled by\n/// The value 0.75 is used to match the MD spec.\n/// iOS does not have a floating label design spec, so we standardize on 0.75.\n$form-control-label-stacked-scale: 0.75;\n\n// Z-Index\n// --------------------------------------------------\n// Grouped by elements which would be siblings\n\n$z-index-menu-overlay: 1000;\n$z-index-overlay: 1001;\n\n$z-index-fixed-content: 999;\n$z-index-refresher: -1;\n\n$z-index-page-container: 0;\n$z-index-toolbar: 10;\n$z-index-toolbar-background: -1;\n$z-index-toolbar-buttons: 99;\n\n$z-index-backdrop: 2;\n$z-index-overlay-wrapper: 10;\n\n$z-index-item-options: 1;\n$z-index-item-input: 2;\n$z-index-item-divider: 100;\n\n$z-index-reorder-selected: 100;\n","@import \"../../themes/native/native.globals.ios\";\n\n// iOS Menu\n// --------------------------------------------------\n\n/// @prop - Box shadow color of the menu\n$menu-ios-box-shadow-color: rgba(0, 0, 0, 0.08);\n\n/// @prop - Box shadow of the menu\n$menu-ios-box-shadow: -8px 0 42px $menu-ios-box-shadow-color;\n\n/// @prop - Box shadow of the menu in rtl mode\n$menu-ios-box-shadow-rtl: 8px 0 42px $menu-ios-box-shadow-color;\n\n/// @prop - Box shadow of the reveal menu\n$menu-ios-box-shadow-reveal: $menu-ios-box-shadow;\n\n/// @prop - Box shadow of the reveal menu\n$menu-ios-box-shadow-reveal-rtl: $menu-ios-box-shadow-rtl;\n\n/// @prop - Box shadow of the push menu\n$menu-ios-box-shadow-push: null;\n\n/// @prop - Box shadow of the overlay menu\n$menu-ios-box-shadow-overlay: null;\n","@import \"../../themes/native/native.globals.md\";\n\n// Material Design Menu\n// --------------------------------------------------\n\n/// @prop - Box shadow of the menu\n$menu-md-box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);\n"]}
+{"version":3,"sourceRoot":"","sources":["../src/css/core.scss","../src/components/modal/modal.vars.scss","../src/themes/ionic.mixins.scss","../src/themes/ionic.globals.scss","../src/components/menu/menu.ios.vars.scss","../src/components/menu/menu.md.vars.scss"],"names":[],"mappings":"AAMA,MAOI,6BACA,oCACA,mCACA,gDACA,mCACA,kCALA,+BACA,sCACA,qCACA,kDACA,qCACA,oCALA,8BACA,sCACA,oCACA,iDACA,oCACA,mCALA,6BACA,qCACA,mCACA,0CACA,mCACA,kCALA,6BACA,qCACA,mCACA,0CACA,mCACA,kCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,2BACA,qCACA,iCACA,wCACA,iCACA,gCALA,4BACA,qCACA,kCACA,+CACA,kCACA,iCALA,0BACA,iCACA,gCACA,6CACA,gCACA,+BAOJ,SACE,8FAEF,QACE,2DAGF,KACE,uCACA,2CAGF,KACE,uCACA,4BAGF,wBACE,gBAYF,iQAIE,YChC+B,IDwCjC,qIAEE,eCvC+B,ID+CjC,yEAEE,qDACA,mDAOF,qCACE,4CACE,0BA+BJ,2DACE,sBACA,mBAaF,wCACE,4CAyBA,mBATA,+DACA,0EACA,yEACA,0FACA,sEACA,oEAIA,qBATA,iEACA,4EACA,2EACA,4FACA,wEACA,sEAIA,oBATA,gEACA,4EACA,0EACA,2FACA,uEACA,qEAIA,mBATA,+DACA,2EACA,yEACA,oFACA,sEACA,oEAIA,mBATA,+DACA,2EACA,yEACA,oFACA,sEACA,oEAIA,kBATA,8DACA,yEACA,wEACA,yFACA,qEACA,mEAIA,iBATA,6DACA,2EACA,uEACA,kFACA,oEACA,kEAIA,kBATA,8DACA,2EACA,wEACA,yFACA,qEACA,mEAIA,gBATA,4DACA,uEACA,sEACA,uFACA,mEACA,iEAaF,UEmOM,KFlOuB,EEmOvB,MFnOiB,EEuPrB,IFvPkB,EEwPlB,OFxPwB,EAExB,aACA,kBAEA,sBACA,8BAEA,0BACA,QG3H+B,EHmIjC,uCACE,oBAWF,oBACE,kBAEA,qBAEA,YAGF,8CACE,kBAGF,iRAeE,wBAGF,oBACE,UAGF,wCACE,cAOF,6CACE,8BAGF,6BACE,KACE,mDAIJ,iDACE,KAGE,0EACA,mFACA,6EACA,iFAQJ,mFAEE,cAOF,cEgTM,iCF5SN,mBACE,eACA,0BAUA,oBAMA,kBAUF,+BACE,mBAGF,4CACE,gBAGF,0BACE,WIpT+B,4BJuTjC,mCACE,WIrT+B,2BJ4TjC,yBACE,WKnU8B,6BLsUhC,uBACE,WKvU8B,6BL2UhC,6EACE,2BACA,4BAEF,4EACE,8BACA,+BAEF,qEACE,oBAGF,0EACE,2DAGF,uCACE,yCAEE,4BASJ,qJAEE,yBAGF,2GACE,oBACA,0BAGF,uMAEE,aAMF,6CACE,iBASF,6BACE,qBACA,sBAUF,wDACE,YACA,iBAUF,uNAOE,aAaF,oCACE,gBAUF,4CACE,kBACE","file":"core.css","sourcesContent":["@use \"sass:map\";\n@import \"../themes/ionic.globals\";\n@import \"../components/menu/menu.ios.vars\";\n@import \"../components/menu/menu.md.vars\";\n@import \"../components/modal/modal.vars\";\n\n:root {\n  /**\n   * Loop through each color object from the\n   * `ionic.theme.default.scss` file\n   * and generate CSS Variables for each color.\n   */\n  @each $color-name, $value in $colors {\n    --ion-color-#{$color-name}: #{map.get($value, base)};\n    --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};\n    --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};\n    --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};\n    --ion-color-#{$color-name}-shade: #{map.get($value, shade)};\n    --ion-color-#{$color-name}-tint: #{map.get($value, tint)};\n  }\n}\n\n// Ionic Font Family\n// --------------------------------------------------\n\nhtml.ios {\n  --ion-default-font: -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", \"Roboto\", sans-serif;\n}\nhtml.md {\n  --ion-default-font: \"Roboto\", \"Helvetica Neue\", sans-serif;\n}\n\nhtml {\n  --ion-dynamic-font: -apple-system-body;\n  --ion-font-family: var(--ion-default-font);\n}\n\nbody {\n  background: var(--ion-background-color);\n  color: var(--ion-text-color);\n}\n\nbody.backdrop-no-scroll {\n  overflow: hidden;\n}\n\n// Modal - Card Style\n// --------------------------------------------------\n/**\n * Card style modal needs additional padding on the\n * top of the header. We accomplish this by targeting\n * the first toolbar in the header.\n * Footer also needs this. We do not adjust the bottom\n * padding though because of the safe area.\n */\nhtml.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,\nhtml.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type,\nhtml.ios ion-modal ion-footer ion-toolbar:first-of-type,\nhtml.ios ion-footer.modal-footer-moving ion-toolbar:first-of-type {\n  padding-top: $modal-sheet-padding-top;\n}\n\n/**\n* Card style modal needs additional padding on the\n* bottom of the header. We accomplish this by targeting\n* the last toolbar in the header.\n*/\nhtml.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type,\nhtml.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type {\n  padding-bottom: $modal-sheet-padding-bottom;\n}\n\n/**\n* Add padding on the left and right\n* of toolbars while accounting for\n* safe area values when in landscape.\n*/\nhtml.ios ion-modal ion-toolbar,\nhtml.ios .modal-footer-moving ion-toolbar {\n  padding-right: calc(var(--ion-safe-area-right) + 8px);\n  padding-left: calc(var(--ion-safe-area-left) + 8px);\n}\n\n/**\n * Card style modal on iPadOS\n * should only have backdrop on first instance.\n */\n@media screen and (min-width: 768px) {\n  html.ios ion-modal.modal-card:first-of-type {\n    --backdrop-opacity: 0.18;\n  }\n}\n\n/**\n * Subsequent modals should not have a backdrop/box shadow\n * as it will cause the screen to appear to get progressively\n * darker. With Ionic 6, declarative modals made it\n * possible to have multiple non-presented modals in the DOM,\n * so we could no longer rely on ion-modal:first-of-type.\n * Here we disable the opacity/box-shadow for every modal\n * that comes after the first presented modal.\n *\n * Note: ion-modal:not(.overlay-hidden):first-of-type\n * does not match the first modal to not have\n * the .overlay-hidden class, it will match the\n * first modal in general only if it does not\n * have the .overlay-hidden class.\n * The :nth-child() pseudo-class has support\n * for selectors which would help us here. At the\n * time of writing it does not have great cross browser\n * support.\n *\n * Note 2: This should only apply to non-card and\n * non-sheet modals. Card and sheet modals have their\n * own criteria for displaying backdrops/box shadows.\n *\n * Do not use :not(.overlay-hidden) in place of\n * .show-modal because that triggers a memory\n * leak in Blink: https://bugs.chromium.org/p/chromium/issues/detail?id=1418768\n */\nion-modal.modal-default.show-modal ~ ion-modal.modal-default {\n  --backdrop-opacity: 0;\n  --box-shadow: none;\n}\n\n/**\n * This works around a bug in WebKit where the\n * content will overflow outside of the bottom border\n * radius when re-painting. As long as a single\n * border radius value is set on .ion-page, this\n * issue does not happen. We set the top left radius\n * here because the top left corner will always have a\n * radius no matter the platform.\n * This behavior only applies to card modals.\n */\nhtml.ios ion-modal.modal-card .ion-page {\n  border-top-left-radius: var(--border-radius);\n}\n\n// Ionic Colors\n// --------------------------------------------------\n// Generates the color classes and variables based on the\n// colors map\n\n@mixin generate-color($color-name) {\n  $value: map-get($colors, $color-name);\n\n  $base: map-get($value, base);\n  $contrast: map-get($value, contrast);\n  $shade: map-get($value, shade);\n  $tint: map-get($value, tint);\n\n  --ion-color-base: var(--ion-color-#{$color-name}, #{$base}) !important;\n  --ion-color-base-rgb: var(--ion-color-#{$color-name}-rgb, #{color-to-rgb-list($base)}) !important;\n  --ion-color-contrast: var(--ion-color-#{$color-name}-contrast, #{$contrast}) !important;\n  --ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb, #{color-to-rgb-list($contrast)}) !important;\n  --ion-color-shade: var(--ion-color-#{$color-name}-shade, #{$shade}) !important;\n  --ion-color-tint: var(--ion-color-#{$color-name}-tint, #{$tint}) !important;\n}\n\n@each $color-name, $value in $colors {\n  .ion-color-#{$color-name} {\n    @include generate-color($color-name);\n  }\n}\n\n\n// Page Container Structure\n// --------------------------------------------------\n\n.ion-page {\n  @include position(0, 0, 0, 0);\n\n  display: flex;\n  position: absolute;\n\n  flex-direction: column;\n  justify-content: space-between;\n\n  contain: layout size style;\n  z-index: $z-index-page-container;\n}\n\n/**\n * Allows pointer events to pass through child route page wrappers\n * when they only contain a sheet modal that permits background interaction.\n * https://github.com/ionic-team/ionic-framework/issues/30700\n */\n.ion-page.ion-page-overlay-passthrough {\n  pointer-events: none;\n}\n\n/**\n * When making custom dialogs, using\n * ion-content is not required. As a result,\n * some developers may wish to have dialogs\n * that are automatically sized by the browser.\n * These changes allow certain dimension values\n * such as fit-content to work correctly.\n */\nion-modal > .ion-page {\n  position: relative;\n\n  contain: layout style;\n\n  height: 100%;\n}\n\n.split-pane-visible > .ion-page.split-pane-main {\n  position: relative;\n}\n\nion-route,\nion-route-redirect,\nion-router,\nion-select-option,\nion-nav-controller,\nion-menu-controller,\nion-action-sheet-controller,\nion-alert-controller,\nion-loading-controller,\nion-modal-controller,\nion-picker-controller,\nion-popover-controller,\nion-toast-controller,\n.ion-page-hidden {\n  /* stylelint-disable-next-line declaration-no-important */\n  display: none !important;\n}\n\n.ion-page-invisible {\n  opacity: 0;\n}\n\n.can-go-back > ion-header ion-back-button {\n  display: block;\n}\n\n\n// Ionic Safe Margins\n// --------------------------------------------------\n\nhtml.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {\n  --ion-statusbar-padding: 20px;\n}\n\n@supports (padding-top: 20px) {\n  html {\n    --ion-safe-area-top: var(--ion-statusbar-padding);\n  }\n}\n\n@supports (padding-top: env(safe-area-inset-top)) {\n  html {\n    // `--safe-area-inset-*` are set by Capacitor\n    // @see https://capacitorjs.com/docs/apis/system-bars#android-note\n    --ion-safe-area-top: var(--safe-area-inset-top, env(safe-area-inset-top));\n    --ion-safe-area-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));\n    --ion-safe-area-left: var(--safe-area-inset-left, env(safe-area-inset-left));\n    --ion-safe-area-right: var(--safe-area-inset-right, env(safe-area-inset-right));\n  }\n}\n\n\n// Global Card Styles\n// --------------------------------------------------\n\nion-card.ion-color .ion-inherit-color,\nion-card-header.ion-color .ion-inherit-color {\n  color: inherit;\n}\n\n\n// Menu Styles\n// --------------------------------------------------\n\n.menu-content {\n  @include transform(translate3d(0, 0, 0));\n}\n\n.menu-content-open {\n  cursor: pointer;\n  touch-action: manipulation;\n\n  /**\n   * The containing element itself should be clickable but\n   * everything inside of it should not clickable when menu is open\n   *\n   * Setting pointer-events after scrolling has already started\n   * will not cancel scrolling which is why we also set\n   * overflow-y below.\n   */\n  pointer-events: none;\n\n  /**\n   * This accounts for scenarios where the main content itself\n   * is scrollable.\n   */\n  overflow-y: hidden;\n}\n\n/**\n * Setting overflow cancels any in-progress scrolling\n * when the menu opens. This prevents users from accidentally\n * scrolling the main content while also dragging the menu open.\n * The code below accounts for both ion-content and then custom\n * scroll containers within ion-content (such as virtual scroll)\n */\n.menu-content-open ion-content {\n  --overflow: hidden;\n}\n\n.menu-content-open .ion-content-scroll-host {\n  overflow: hidden;\n}\n\n.ios .menu-content-reveal {\n  box-shadow: $menu-ios-box-shadow-reveal;\n}\n\n[dir=rtl].ios .menu-content-reveal {\n  box-shadow: $menu-ios-box-shadow-reveal-rtl;\n}\n\n.ios .menu-content-push {\n  box-shadow: $menu-ios-box-shadow-push;\n}\n\n.md .menu-content-reveal {\n  box-shadow: $menu-md-box-shadow;\n}\n\n.md .menu-content-push {\n  box-shadow: $menu-md-box-shadow;\n}\n\n// Accordion Styles\nion-accordion-group.accordion-group-expand-inset > ion-accordion:first-of-type {\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n}\nion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type {\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n}\nion-accordion-group > ion-accordion:last-of-type ion-item[slot=\"header\"] {\n  --border-width: 0px;\n}\n\nion-accordion.accordion-animated > [slot=\"header\"] .ion-accordion-toggle-icon {\n  transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  ion-accordion .ion-accordion-toggle-icon {\n    /* stylelint-disable declaration-no-important */\n    transition: none !important;\n  }\n}\n/**\n * The > [slot=\"header\"] selector ensures that we do\n * not modify toggle icons for any nested accordions. The state\n * of one accordion should not affect any accordions inside\n * of a nested accordion group.\n */\nion-accordion.accordion-expanding > [slot=\"header\"] .ion-accordion-toggle-icon,\nion-accordion.accordion-expanded > [slot=\"header\"] .ion-accordion-toggle-icon {\n  transform: rotate(180deg);\n}\n\nion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-previous ion-item[slot=\"header\"] {\n  --border-width: 0px;\n  --inner-border-width: 0px;\n}\n\nion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanding:first-of-type,\nion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanded:first-of-type {\n  margin-top: 0;\n}\n\n// Safari/iOS 15 changes the appearance of input[type=\"date\"].\n// For backwards compatibility from Ionic 5/Safari 14 designs,\n// we override the appearance only when using within an ion-input.\nion-input input::-webkit-date-and-time-value {\n  text-align: start;\n}\n\n/**\n * The .ion-datetime-button-overlay class contains\n * styles that allow any modal/popover to be\n * sized according to the dimensions of the datetime\n * when used with ion-datetime-button.\n */\n.ion-datetime-button-overlay {\n  --width: fit-content;\n  --height: fit-content;\n}\n\n/**\n * The grid variant can scale down when inline.\n * When used in a `fit-content` overlay, this causes\n * the overlay to shrink when the month/year picker is open.\n * Explicitly setting the dimensions lets us have a consistently\n * sized grid interface.\n */\n.ion-datetime-button-overlay ion-datetime.datetime-grid {\n  width: 320px;\n  min-height: 320px;\n}\n\n/**\n * When moving focus on page transitions we call .focus() on an element which can\n * add an undesired outline ring. This CSS removes the outline ring.\n * We also remove the outline ring from elements that are actively being focused\n * by the focus manager. We are intentionally selective about which elements this\n * applies to so we do not accidentally override outlines set by the developer.\n */\n[ion-last-focus],\nheader[tabindex=\"-1\"]:focus,\n[role=\"banner\"][tabindex=\"-1\"]:focus,\nmain[tabindex=\"-1\"]:focus,\n[role=\"main\"][tabindex=\"-1\"]:focus,\nh1[tabindex=\"-1\"]:focus,\n[role=\"heading\"][aria-level=\"1\"][tabindex=\"-1\"]:focus {\n  outline: none;\n}\n\n/*\n * If a popover has a child ion-content (or class equivalent) then the .popover-viewport element\n * should not be scrollable to ensure the inner content does scroll. However, if the popover\n * does not have a child ion-content (or class equivalent) then the .popover-viewport element\n * should remain scrollable. This code exists globally because popover targets\n * .popover-viewport using ::slotted which only supports simple selectors.\n *\n * Note that we do not need to account for .ion-content-scroll-host here because that\n * class should always be placed within ion-content even if ion-content is not scrollable.\n */\n.popover-viewport:has(> ion-content) {\n  overflow: hidden;\n}\n\n/**\n * :has has cross-browser support, but it is still relatively new. As a result,\n * we should fallback to the old behavior for environments that do not support :has.\n * Developers can explicitly enable this behavior by setting overflow: visible\n * on .popover-viewport if they know they are not going to use an ion-content.\n * TODO FW-6106 Remove this\n */\n@supports not selector(:has(> ion-content)) {\n  .popover-viewport {\n    overflow: hidden;\n  }\n}\n","@import \"../../themes/ionic.globals\";\n\n// Modals\n// --------------------------------------------------\n\n/// @prop - Min width of the modal inset\n$modal-inset-min-width:         768px;\n\n/// @prop - Minimum height of the small modal inset\n$modal-inset-min-height-small:  600px;\n\n/// @prop - Minimum height of the large modal inset\n$modal-inset-min-height-large:  768px;\n\n/// @prop - Width of the large modal inset\n$modal-inset-width:             600px;\n\n/// @prop - Height of the small modal inset\n$modal-inset-height-small:      500px;\n\n/// @prop - Height of the large modal inset\n$modal-inset-height-large:      600px;\n\n/// @prop - Text color of the modal content\n$modal-text-color:              $text-color;\n\n/// @prop - Padding top of the sheet modal\n$modal-sheet-padding-top:        6px;\n\n/// @prop - Padding bottom of the sheet modal\n$modal-sheet-padding-bottom:     6px;\n","\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n@mixin tablet-viewport() {\n  @media screen and (min-width: 768px) {\n    @content;\n  }\n}\n\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n@mixin mobile-viewport() {\n  @media screen and (max-width: 767px) {\n    @content;\n  }\n}\n\n@mixin input-cover() {\n  @include position(0, null, null, 0);\n  @include margin(0);\n\n  position: absolute;\n\n  width: 100%;\n  height: 100%;\n\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n\n  appearance: none;\n  outline: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n}\n\n@mixin visually-hidden() {\n  position: absolute;\n\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n\n  width: 100%;\n  height: 100%;\n\n  margin: 0;\n  padding: 0;\n\n  border: 0;\n  outline: 0;\n  clip: rect(0 0 0 0);\n\n  opacity: 0;\n  overflow: hidden;\n\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n@mixin text-inherit() {\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n}\n\n@mixin button-state() {\n  @include position(0, 0, 0, 0);\n\n  position: absolute;\n\n  content: \"\";\n\n  opacity: 0;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n  $keys: map-keys($map);\n\n  @return nth($keys, $index);\n}\n\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    576px\n@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {\n  $min: map-get($breakpoints, $name);\n\n  @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"\"  (Returns a blank string)\n//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {\n  @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n  $n: index($breakpoint-names, $name);\n  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n//\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\t// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\t// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    767.98px\n@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {\n  $max: map-get($breakpoints, $name);\n  @return if($max and $max > 0, $max - .02, null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n  @content;\n\n  // $root: #{&};\n  // @at-root [dir] {\n  //   #{$root} {\n  //     @content;\n  //   }\n  // }\n}\n\n@mixin rtl() {\n  $root: #{&};\n\n  $rootSplit: str-split($root, \",\");\n  $selectors: #{add-root-selector($root, \"[dir=rtl]\")};\n  $selectorsSplit: str-split($selectors, \",\");\n\n  $hostContextSelectors: ();\n  $restSelectors: ();\n  $dirSelectors: ();\n\n  // Selectors must be split into individual selectors in case the browser\n  // doesn't support a specific selector.\n  // For example, Firefox and Safari doesn't support `:host-context()`.\n  // If an invalid selector is used, then the entire group of selectors\n  // will be ignored.\n  // @link https://www.w3.org/TR/selectors-3/#grouping\n  @each $selector in $selectorsSplit {\n    // Group the selectors back into a single selector to optimize the output.\n    @if str-index($selector, \":host-context\") {\n      $hostContextSelectors: append($hostContextSelectors, $selector, comma);\n    } @else {\n      // Group the selectors back into a single selector to optimize the output.\n      $restSelectors: append($restSelectors, $selector, comma);\n    }\n  }\n\n  // Supported by Chrome.\n  @if length($hostContextSelectors) > 0 {\n    @at-root #{$hostContextSelectors} {\n      @content;\n    }\n  }\n\n  // Supported by all browsers.\n  @if length($restSelectors) > 0 {\n    @at-root #{$restSelectors} {\n      @content;\n    }\n  }\n\n  // If browser can support `:dir()`, then add the `:dir()` selectors.\n  @supports selector(:dir(rtl)) {\n    // Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.\n    // `:host-context()` is added:\n    // - through the `add-root-selector()` function.\n    // - first so that it takes precedence over `:dir()`.\n    // For example,\n    // - Firefox doesn't support `:host-context()`, but does support `:dir()`.\n    // - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`\n    // @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/\n    // -- However, there is a Webkit bug on v16 that prevents `:dir()` from working when\n    // -- the app direction is changed dynamically. v17+ works fine.\n    // -- @link https://bugs.webkit.org/show_bug.cgi?id=257133\n\n    // Supported by Firefox.\n    @at-root #{add-root-selector($root, \":dir(rtl)\", false)} {\n      @content;\n    }\n  }\n}\n\n@mixin ltr() {\n  @content;\n}\n\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n  $url: url-encode($svg);\n  $viewBox: str-split(str-extract($svg, \"viewBox='\", \"'\"), \" \");\n\n  @if $flip-rtl != true or $viewBox == null {\n    @include multi-dir() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n    }\n  } @else {\n    $transform: \"transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n    $flipped-url: $svg;\n    $flipped-url: str-replace($flipped-url, \"<path\", \"<path #{$transform}\");\n    $flipped-url: str-replace($flipped-url, \"<line\", \"<line #{$transform}\");\n    $flipped-url: str-replace($flipped-url, \"<polygon\", \"<polygon #{$transform}\");\n    $flipped-url: url-encode($flipped-url);\n\n    @include ltr () {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n    }\n    @include rtl() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$flipped-url}\");\n    }\n  }\n}\n\n// Add property horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin property-horizontal($prop, $start, $end: $start) {\n  @if $start == 0 and $end == 0 {\n    #{$prop}-left: $start;\n    #{$prop}-right: $end;\n\n  } @else {\n    -webkit-#{$prop}-start: $start;\n    #{$prop}-inline-start: $start;\n    -webkit-#{$prop}-end: $end;\n    #{$prop}-inline-end: $end;\n  }\n}\n\n// Add property for all directions\n// @param {string} $prop\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// @param {boolean} $content include content or use default\n// ----------------------------------------------------------\n@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {\n  @include property-horizontal($prop, $start, $end);\n  #{$prop}-top: $top;\n  #{$prop}-bottom: $bottom;\n}\n\n// Add padding horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin padding-horizontal($start, $end: $start) {\n  @include property-horizontal(padding, $start, $end);\n}\n\n// Add padding for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(padding, $top, $end, $bottom, $start);\n}\n\n// Add margin horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin margin-horizontal($start, $end: $start) {\n  @include property-horizontal(margin, $start, $end);\n}\n\n// Add margin for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(margin, $top, $end, $bottom, $start);\n}\n\n// Add position horizontal\n// @param {string} $start - amount to position start\n// @param {string} $end - amount to left: 0; end\n// ----------------------------------------------------------\n@mixin position-horizontal($start: null, $end: null) {\n  @if $start == $end {\n    @include multi-dir() {\n      left: $start;\n      right: $end;\n    }\n  } @else {\n    @at-root {\n      & {\n        inset-inline-start: $start;\n        inset-inline-end: $end;\n      }\n    }\n  }\n}\n\n// Add position for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin position($top: null, $end: null, $bottom: null, $start: null) {\n  @include position-horizontal($start, $end);\n  top: $top;\n  bottom: $bottom;\n}\n\n// Add border for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin border($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(border, $top, $end, $bottom, $start);\n}\n\n// Add border radius for all directions\n// @param {string} $top-start\n// @param {string} $top-end\n// @param {string} $bottom-end\n// @param {string} $bottom-start\n// ----------------------------------------------------------\n@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {\n  @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {\n    border-radius: $top-start;\n  } @else {\n    border-start-start-radius: $top-start;\n    border-start-end-radius: $top-end;\n    border-end-end-radius: $bottom-end;\n    border-end-start-radius: $bottom-start;\n  }\n}\n\n// Add direction for all directions\n// @param {string} $dir - Direction on LTR\n@mixin direction($dir) {\n  $other-dir: null;\n\n  @if $dir == ltr {\n    $other-dir: rtl;\n  } @else {\n    $other-dir: ltr;\n  }\n\n  @include ltr() {\n    direction: $dir;\n  }\n  @include rtl() {\n    direction: $other-dir;\n  }\n}\n\n// Add float for all directions\n// @param {string} $side\n// @param {string} $decorator - !important\n@mixin float($side, $decorator: null) {\n  @if $side == start {\n    @include ltr() {\n      float: left $decorator;\n    }\n    @include rtl() {\n      float: right $decorator;\n    }\n  } @else if $side == end {\n    @include ltr() {\n      float: right $decorator;\n    }\n    @include rtl() {\n      float: left $decorator;\n    }\n  } @else {\n    @include multi-dir() {\n      float: $side $decorator;\n    }\n  }\n}\n\n@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {\n  @if $horizontal == start or $horizontal == end {\n    $horizontal-ltr: null;\n    $horizontal-rtl: null;\n    @if $horizontal == start {\n      $horizontal-ltr: left;\n      $horizontal-rtl: right;\n    } @else {\n      $horizontal-ltr: right;\n      $horizontal-rtl: left;\n    }\n\n    @include ltr() {\n      background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;\n    }\n    @include rtl() {\n      background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;\n    }\n  } @else {\n    @include multi-dir() {\n      background-position: $horizontal $horizontal-amount $vertical $vertical-amount;\n    }\n  }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n  @if $x-axis == start {\n    @include ltr() {\n      transform-origin: left $y-axis;\n    }\n    @include rtl() {\n      transform-origin: right $y-axis;\n    }\n  } @else if $x-axis == end {\n    @include ltr() {\n      transform-origin: right $y-axis;\n    }\n    @include rtl() {\n      transform-origin: left $y-axis;\n    }\n  } @else if $x-axis == left or $x-axis == right {\n    @include multi-dir() {\n      transform-origin: $x-axis $y-axis;\n    }\n  } @else {\n    @include ltr() {\n      transform-origin: $x-axis $y-axis;\n    }\n    @include rtl() {\n      transform-origin: calc(100% - #{$x-axis}) $y-axis;\n    }\n  }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n  $extra: null;\n\n  $x: null;\n  $ltr-translate: null;\n  $rtl-translate: null;\n\n  @each $transform in $transforms {\n    @if (str-index($transform, translate3d)) {\n      $transform: str-replace($transform, 'translate3d(');\n      $transform: str-replace($transform, ')');\n\n      $coordinates: str-split($transform, ',');\n\n      $x: nth($coordinates, 1);\n      $y: nth($coordinates, 2);\n      $z: nth($coordinates, 3);\n\n      $ltr-translate: translate3d($x, $y, $z);\n      $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n    } @else {\n      @if $extra == null {\n        $extra: $transform;\n      } @else {\n        $extra: $extra $transform;\n      }\n    }\n  }\n\n  @if $x == '0' or $x == null {\n    @include multi-dir() {\n      transform: $ltr-translate $extra;\n    }\n  } @else {\n    @include ltr() {\n      transform: $ltr-translate $extra;\n    }\n\n    @include rtl() {\n      transform: $rtl-translate $extra;\n    }\n  }\n}\n","\n// Global Utility Functions\n@import \"./ionic.functions.string\";\n\n// Global Color Functions\n@import \"./ionic.functions.color\";\n\n// Global Font Functions\n@import \"./ionic.functions.font\";\n\n// Global Mixins\n@import \"./ionic.mixins\";\n\n// Default Theme\n@import \"./ionic.theme.default\";\n\n\n// Default General\n// --------------------------------------------------\n$font-family-base:                  var(--ion-font-family, inherit);\n\n// Hairlines width\n$hairlines-width: .55px;\n\n// The minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries\n$screen-breakpoints: (\n  xs: 0,\n  sm: 576px,\n  md: 768px,\n  lg: 992px,\n  xl: 1200px\n);\n\n// Input placeholder opacity\n// Ensures that the placeholder has the\n// correct color contrast against the background.\n$placeholder-opacity: var(--ion-placeholder-opacity, 0.6);\n\n$form-control-label-margin: 16px;\n\n// How much the stacked labels should be scaled by\n/// The value 0.75 is used to match the MD spec.\n/// iOS does not have a floating label design spec, so we standardize on 0.75.\n$form-control-label-stacked-scale: 0.75;\n\n\n// Z-Index\n// --------------------------------------------------\n// Grouped by elements which would be siblings\n\n$z-index-menu-overlay:           1000;\n$z-index-overlay:                1001;\n\n$z-index-fixed-content:          999;\n$z-index-refresher:              -1;\n\n$z-index-page-container:         0;\n$z-index-toolbar:                10;\n$z-index-toolbar-background:     -1;\n$z-index-toolbar-buttons:        99;\n\n$z-index-backdrop:               2;\n$z-index-overlay-wrapper:        10;\n\n$z-index-item-options:           1;\n$z-index-item-input:             2;\n$z-index-item-divider:           100;\n\n$z-index-reorder-selected:       100;\n","@import \"../../themes/ionic.globals.ios\";\n\n// iOS Menu\n// --------------------------------------------------\n\n/// @prop - Box shadow color of the menu\n$menu-ios-box-shadow-color:      rgba(0, 0, 0, .08);\n\n/// @prop - Box shadow of the menu\n$menu-ios-box-shadow:            -8px 0 42px $menu-ios-box-shadow-color;\n\n/// @prop - Box shadow of the menu in rtl mode\n$menu-ios-box-shadow-rtl:        8px 0 42px $menu-ios-box-shadow-color;\n\n/// @prop - Box shadow of the reveal menu\n$menu-ios-box-shadow-reveal:     $menu-ios-box-shadow;\n\n/// @prop - Box shadow of the reveal menu\n$menu-ios-box-shadow-reveal-rtl: $menu-ios-box-shadow-rtl;\n\n/// @prop - Box shadow of the push menu\n$menu-ios-box-shadow-push:       null;\n\n/// @prop - Box shadow of the overlay menu\n$menu-ios-box-shadow-overlay:    null;\n","@import \"../../themes/ionic.globals.md\";\n\n// Material Design Menu\n// --------------------------------------------------\n\n/// @prop - Box shadow of the menu\n$menu-md-box-shadow:            4px 0px 16px rgba(0, 0, 0, 0.18);\n"]}

package/css/display.css

@@ -1 +1 @@
-.ion-hide{display:none !important}.ion-hide-up{display:none !important}.ion-hide-down{display:none !important}@media(min-width: 576px){.ion-hide-sm-up{display:none !important}}@media(max-width: 575.98px){.ion-hide-sm-down{display:none !important}}@media(min-width: 768px){.ion-hide-md-up{display:none !important}}@media(max-width: 767.98px){.ion-hide-md-down{display:none !important}}@media(min-width: 992px){.ion-hide-lg-up{display:none !important}}@media(max-width: 991.98px){.ion-hide-lg-down{display:none !important}}@media(min-width: 1200px){.ion-hide-xl-up{display:none !important}}@media(max-width: 1199.98px){.ion-hide-xl-down{display:none !important}}.ion-display-none{display:none !important}@media(min-width: 576px){.ion-display-sm-none{display:none !important}}@media(min-width: 768px){.ion-display-md-none{display:none !important}}@media(min-width: 992px){.ion-display-lg-none{display:none !important}}@media(min-width: 1200px){.ion-display-xl-none{display:none !important}}.ion-display-contents{display:contents !important}@media(min-width: 576px){.ion-display-sm-contents{display:contents !important}}@media(min-width: 768px){.ion-display-md-contents{display:contents !important}}@media(min-width: 992px){.ion-display-lg-contents{display:contents !important}}@media(min-width: 1200px){.ion-display-xl-contents{display:contents !important}}.ion-display-inline{display:inline !important}@media(min-width: 576px){.ion-display-sm-inline{display:inline !important}}@media(min-width: 768px){.ion-display-md-inline{display:inline !important}}@media(min-width: 992px){.ion-display-lg-inline{display:inline !important}}@media(min-width: 1200px){.ion-display-xl-inline{display:inline !important}}.ion-display-inline-block{display:inline-block !important}@media(min-width: 576px){.ion-display-sm-inline-block{display:inline-block !important}}@media(min-width: 768px){.ion-display-md-inline-block{display:inline-block !important}}@media(min-width: 992px){.ion-display-lg-inline-block{display:inline-block !important}}@media(min-width: 1200px){.ion-display-xl-inline-block{display:inline-block !important}}.ion-display-block{display:block !important}@media(min-width: 576px){.ion-display-sm-block{display:block !important}}@media(min-width: 768px){.ion-display-md-block{display:block !important}}@media(min-width: 992px){.ion-display-lg-block{display:block !important}}@media(min-width: 1200px){.ion-display-xl-block{display:block !important}}.ion-display-flex{display:flex !important}@media(min-width: 576px){.ion-display-sm-flex{display:flex !important}}@media(min-width: 768px){.ion-display-md-flex{display:flex !important}}@media(min-width: 992px){.ion-display-lg-flex{display:flex !important}}@media(min-width: 1200px){.ion-display-xl-flex{display:flex !important}}.ion-display-inline-flex{display:inline-flex !important}@media(min-width: 576px){.ion-display-sm-inline-flex{display:inline-flex !important}}@media(min-width: 768px){.ion-display-md-inline-flex{display:inline-flex !important}}@media(min-width: 992px){.ion-display-lg-inline-flex{display:inline-flex !important}}@media(min-width: 1200px){.ion-display-xl-inline-flex{display:inline-flex !important}}.ion-display-grid{display:grid !important}@media(min-width: 576px){.ion-display-sm-grid{display:grid !important}}@media(min-width: 768px){.ion-display-md-grid{display:grid !important}}@media(min-width: 992px){.ion-display-lg-grid{display:grid !important}}@media(min-width: 1200px){.ion-display-xl-grid{display:grid !important}}.ion-display-inline-grid{display:inline-grid !important}@media(min-width: 576px){.ion-display-sm-inline-grid{display:inline-grid !important}}@media(min-width: 768px){.ion-display-md-inline-grid{display:inline-grid !important}}@media(min-width: 992px){.ion-display-lg-inline-grid{display:inline-grid !important}}@media(min-width: 1200px){.ion-display-xl-inline-grid{display:inline-grid !important}}.ion-display-table{display:table !important}@media(min-width: 576px){.ion-display-sm-table{display:table !important}}@media(min-width: 768px){.ion-display-md-table{display:table !important}}@media(min-width: 992px){.ion-display-lg-table{display:table !important}}@media(min-width: 1200px){.ion-display-xl-table{display:table !important}}.ion-display-table-cell{display:table-cell !important}@media(min-width: 576px){.ion-display-sm-table-cell{display:table-cell !important}}@media(min-width: 768px){.ion-display-md-table-cell{display:table-cell !important}}@media(min-width: 992px){.ion-display-lg-table-cell{display:table-cell !important}}@media(min-width: 1200px){.ion-display-xl-table-cell{display:table-cell !important}}.ion-display-table-row{display:table-row !important}@media(min-width: 576px){.ion-display-sm-table-row{display:table-row !important}}@media(min-width: 768px){.ion-display-md-table-row{display:table-row !important}}@media(min-width: 992px){.ion-display-lg-table-row{display:table-row !important}}@media(min-width: 1200px){.ion-display-xl-table-row{display:table-row !important}}.ion-full-height{height:100% !important}.ion-full-width{width:100% !important}.ion-position-absolute{position:absolute !important}.ion-position-relative{position:relative !important}/*# sourceMappingURL=display.css.map */
+.ion-hide{display:none !important}.ion-hide-up{display:none !important}.ion-hide-down{display:none !important}@media(min-width: 576px){.ion-hide-sm-up{display:none !important}}@media(max-width: 575.98px){.ion-hide-sm-down{display:none !important}}@media(min-width: 768px){.ion-hide-md-up{display:none !important}}@media(max-width: 767.98px){.ion-hide-md-down{display:none !important}}@media(min-width: 992px){.ion-hide-lg-up{display:none !important}}@media(max-width: 991.98px){.ion-hide-lg-down{display:none !important}}@media(min-width: 1200px){.ion-hide-xl-up{display:none !important}}@media(max-width: 1199.98px){.ion-hide-xl-down{display:none !important}}.ion-display-none{display:none !important}@media(min-width: 576px){.ion-display-sm-none{display:none !important}}@media(min-width: 768px){.ion-display-md-none{display:none !important}}@media(min-width: 992px){.ion-display-lg-none{display:none !important}}@media(min-width: 1200px){.ion-display-xl-none{display:none !important}}.ion-display-inline{display:inline !important}@media(min-width: 576px){.ion-display-sm-inline{display:inline !important}}@media(min-width: 768px){.ion-display-md-inline{display:inline !important}}@media(min-width: 992px){.ion-display-lg-inline{display:inline !important}}@media(min-width: 1200px){.ion-display-xl-inline{display:inline !important}}.ion-display-inline-block{display:inline-block !important}@media(min-width: 576px){.ion-display-sm-inline-block{display:inline-block !important}}@media(min-width: 768px){.ion-display-md-inline-block{display:inline-block !important}}@media(min-width: 992px){.ion-display-lg-inline-block{display:inline-block !important}}@media(min-width: 1200px){.ion-display-xl-inline-block{display:inline-block !important}}.ion-display-block{display:block !important}@media(min-width: 576px){.ion-display-sm-block{display:block !important}}@media(min-width: 768px){.ion-display-md-block{display:block !important}}@media(min-width: 992px){.ion-display-lg-block{display:block !important}}@media(min-width: 1200px){.ion-display-xl-block{display:block !important}}.ion-display-flex{display:flex !important}@media(min-width: 576px){.ion-display-sm-flex{display:flex !important}}@media(min-width: 768px){.ion-display-md-flex{display:flex !important}}@media(min-width: 992px){.ion-display-lg-flex{display:flex !important}}@media(min-width: 1200px){.ion-display-xl-flex{display:flex !important}}.ion-display-inline-flex{display:inline-flex !important}@media(min-width: 576px){.ion-display-sm-inline-flex{display:inline-flex !important}}@media(min-width: 768px){.ion-display-md-inline-flex{display:inline-flex !important}}@media(min-width: 992px){.ion-display-lg-inline-flex{display:inline-flex !important}}@media(min-width: 1200px){.ion-display-xl-inline-flex{display:inline-flex !important}}.ion-display-grid{display:grid !important}@media(min-width: 576px){.ion-display-sm-grid{display:grid !important}}@media(min-width: 768px){.ion-display-md-grid{display:grid !important}}@media(min-width: 992px){.ion-display-lg-grid{display:grid !important}}@media(min-width: 1200px){.ion-display-xl-grid{display:grid !important}}.ion-display-inline-grid{display:inline-grid !important}@media(min-width: 576px){.ion-display-sm-inline-grid{display:inline-grid !important}}@media(min-width: 768px){.ion-display-md-inline-grid{display:inline-grid !important}}@media(min-width: 992px){.ion-display-lg-inline-grid{display:inline-grid !important}}@media(min-width: 1200px){.ion-display-xl-inline-grid{display:inline-grid !important}}.ion-display-table{display:table !important}@media(min-width: 576px){.ion-display-sm-table{display:table !important}}@media(min-width: 768px){.ion-display-md-table{display:table !important}}@media(min-width: 992px){.ion-display-lg-table{display:table !important}}@media(min-width: 1200px){.ion-display-xl-table{display:table !important}}.ion-display-table-cell{display:table-cell !important}@media(min-width: 576px){.ion-display-sm-table-cell{display:table-cell !important}}@media(min-width: 768px){.ion-display-md-table-cell{display:table-cell !important}}@media(min-width: 992px){.ion-display-lg-table-cell{display:table-cell !important}}@media(min-width: 1200px){.ion-display-xl-table-cell{display:table-cell !important}}.ion-display-table-row{display:table-row !important}@media(min-width: 576px){.ion-display-sm-table-row{display:table-row !important}}@media(min-width: 768px){.ion-display-md-table-row{display:table-row !important}}@media(min-width: 992px){.ion-display-lg-table-row{display:table-row !important}}@media(min-width: 1200px){.ion-display-xl-table-row{display:table-row !important}}/*# sourceMappingURL=display.css.map */

package/css/display.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/css/display.scss","../src/themes/mixins.scss"],"names":[],"mappings":"AAYA,UACE,wBAUE,aACE,wBAOF,eACE,wBC2IF,yBDpJA,gBACE,yBC+LF,4BDxLA,kBACE,yBC2IF,yBDpJA,gBACE,yBC+LF,4BDxLA,kBACE,yBC2IF,yBDpJA,gBACE,yBC+LF,4BDxLA,kBACE,yBC2IF,0BDpJA,gBACE,yBC+LF,6BDxLA,kBACE,yBAyBA,kBACE,wBCiHJ,yBDlHE,qBACE,yBCiHJ,yBDlHE,qBACE,yBCiHJ,yBDlHE,qBACE,yBCiHJ,0BDlHE,qBACE,yBADF,sBACE,4BCiHJ,yBDlHE,yBACE,6BCiHJ,yBDlHE,yBACE,6BCiHJ,yBDlHE,yBACE,6BCiHJ,0BDlHE,yBACE,6BADF,oBACE,0BCiHJ,yBDlHE,uBACE,2BCiHJ,yBDlHE,uBACE,2BCiHJ,yBDlHE,uBACE,2BCiHJ,0BDlHE,uBACE,2BADF,0BACE,gCCiHJ,yBDlHE,6BACE,iCCiHJ,yBDlHE,6BACE,iCCiHJ,yBDlHE,6BACE,iCCiHJ,0BDlHE,6BACE,iCADF,mBACE,yBCiHJ,yBDlHE,sBACE,0BCiHJ,yBDlHE,sBACE,0BCiHJ,yBDlHE,sBACE,0BCiHJ,0BDlHE,sBACE,0BADF,kBACE,wBCiHJ,yBDlHE,qBACE,yBCiHJ,yBDlHE,qBACE,yBCiHJ,yBDlHE,qBACE,yBCiHJ,0BDlHE,qBACE,yBADF,yBACE,+BCiHJ,yBDlHE,4BACE,gCCiHJ,yBDlHE,4BACE,gCCiHJ,yBDlHE,4BACE,gCCiHJ,0BDlHE,4BACE,gCADF,kBACE,wBCiHJ,yBDlHE,qBACE,yBCiHJ,yBDlHE,qBACE,yBCiHJ,yBDlHE,qBACE,yBCiHJ,0BDlHE,qBACE,yBADF,yBACE,+BCiHJ,yBDlHE,4BACE,gCCiHJ,yBDlHE,4BACE,gCCiHJ,yBDlHE,4BACE,gCCiHJ,0BDlHE,4BACE,gCADF,mBACE,yBCiHJ,yBDlHE,sBACE,0BCiHJ,yBDlHE,sBACE,0BCiHJ,yBDlHE,sBACE,0BCiHJ,0BDlHE,sBACE,0BADF,wBACE,8BCiHJ,yBDlHE,2BACE,+BCiHJ,yBDlHE,2BACE,+BCiHJ,yBDlHE,2BACE,+BCiHJ,0BDlHE,2BACE,+BADF,uBACE,6BCiHJ,yBDlHE,0BACE,8BCiHJ,yBDlHE,0BACE,8BCiHJ,yBDlHE,0BACE,8BCiHJ,0BDlHE,0BACE,8BASR,iBACE,uBAGF,gBACE,sBAMF,uBACE,6BAGF,uBACE","file":"display.css","sourcesContent":["@import \"../themes/native/native.globals\";\n@import \"../themes/mixins\";\n\n// Display\n// ------------------------------------------------------------------\n// Provides utility classes to control the CSS display property\n// of elements. Includes responsive variants for toggling between\n// block, inline, flex, grid, and other display values at different\n// breakpoints.\n\n// TODO(FW-6697): remove ion-hide-* classes in favor of the new\n// ion-display-* classes\n.ion-hide {\n  display: none !important;\n}\n\n// Adds hidden classes\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    // Provide `ion-hide-{bp}-up` classes for hiding the element based\n    // on the breakpoint\n    .ion-hide#{$infix}-up {\n      display: none !important;\n    }\n  }\n\n  @include media-breakpoint-down($breakpoint, $screen-breakpoints) {\n    // Provide `ion-hide-{bp}-down` classes for hiding the element based\n    // on the breakpoint\n    .ion-hide#{$infix}-down {\n      display: none !important;\n    }\n  }\n}\n\n$display-values: (\n  none,\n  contents,\n  inline,\n  inline-block,\n  block,\n  flex,\n  inline-flex,\n  grid,\n  inline-grid,\n  table,\n  table-cell,\n  table-row\n);\n\n@each $display in $display-values {\n  @each $breakpoint in map-keys($screen-breakpoints) {\n    $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n\n    @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n      .ion-display#{$infix}-#{$display} {\n        display: #{$display} !important;\n      }\n    }\n  }\n}\n\n// Size\n// --------------------------------------------------\n\n.ion-full-height {\n  height: 100% !important;\n}\n\n.ion-full-width {\n  width: 100% !important;\n}\n\n// Position\n// --------------------------------------------------\n\n.ion-position-absolute {\n  position: absolute !important;\n}\n\n.ion-position-relative {\n  position: relative !important;\n}\n","@use \"./functions.string\" as string;\n\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n@mixin tablet-viewport() {\n  @media screen and (min-width: 768px) {\n    @content;\n  }\n}\n\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n@mixin mobile-viewport() {\n  @media screen and (max-width: 767px) {\n    @content;\n  }\n}\n\n@mixin input-cover() {\n  @include position(0, null, null, 0);\n  @include margin(0);\n\n  position: absolute;\n\n  width: 100%;\n  height: 100%;\n\n  border: 0;\n\n  outline: none;\n\n  background: transparent;\n\n  cursor: pointer;\n\n  appearance: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n}\n\n@mixin visually-hidden() {\n  position: absolute;\n\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  width: 100%;\n  height: 100%;\n\n  margin: 0;\n\n  padding: 0;\n\n  border: 0;\n\n  outline: 0;\n\n  opacity: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n@mixin text-inherit() {\n  color: inherit;\n\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n\n  letter-spacing: inherit;\n\n  text-align: inherit;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n\n  white-space: inherit;\n}\n\n@mixin button-state() {\n  @include position(0, 0, 0, 0);\n\n  position: absolute;\n\n  content: \"\";\n\n  opacity: 0;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n  $keys: map-keys($map);\n\n  @return nth($keys, $index);\n}\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    576px\n@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {\n  $min: map-get($breakpoints, $name);\n\n  @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"\"  (Returns a blank string)\n//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {\n  @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n  $n: index($breakpoint-names, $name);\n\n  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n//\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\t// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\t// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    767.98px\n@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {\n  $max: map-get($breakpoints, $name);\n\n  @return if($max and $max > 0, $max - 0.02, null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n  @content;\n\n  // $root: #{&};\n  // @at-root [dir] {\n  //   #{$root} {\n  //     @content;\n  //   }\n  // }\n}\n\n@mixin rtl() {\n  $root: #{&};\n\n  $rootSplit: string.str-split($root, \",\");\n  $selectors: #{string.add-root-selector($root, \"[dir=rtl]\")};\n  $selectorsSplit: string.str-split($selectors, \",\");\n\n  $hostContextSelectors: ();\n  $restSelectors: ();\n  $dirSelectors: ();\n\n  // Selectors must be split into individual selectors in case the browser\n  // doesn't support a specific selector.\n  // For example, Firefox and Safari doesn't support `:host-context()`.\n  // If an invalid selector is used, then the entire group of selectors\n  // will be ignored.\n  // @link https://www.w3.org/TR/selectors-3/#grouping\n  @each $selector in $selectorsSplit {\n    // Group the selectors back into a single selector to optimize the output.\n    @if str-index($selector, \":host-context\") {\n      $hostContextSelectors: append($hostContextSelectors, $selector, comma);\n    } @else {\n      // Group the selectors back into a single selector to optimize the output.\n      $restSelectors: append($restSelectors, $selector, comma);\n    }\n  }\n\n  // Supported by Chrome.\n  @if length($hostContextSelectors) > 0 {\n    @at-root #{$hostContextSelectors} {\n      @content;\n    }\n  }\n\n  // Supported by all browsers.\n  @if length($restSelectors) > 0 {\n    @at-root #{$restSelectors} {\n      @content;\n    }\n  }\n\n  // If browser can support `:dir()`, then add the `:dir()` selectors.\n  @supports selector(:dir(rtl)) {\n    // Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.\n    // `:host-context()` is added:\n    // - through the `add-root-selector()` function.\n    // - first so that it takes precedence over `:dir()`.\n    // For example,\n    // - Firefox doesn't support `:host-context()`, but does support `:dir()`.\n    // - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`\n    // @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/\n    // -- However, there is a Webkit bug on v16 that prevents `:dir()` from working when\n    // -- the app direction is changed dynamically. v17+ works fine.\n    // -- @link https://bugs.webkit.org/show_bug.cgi?id=257133\n\n    // Supported by Firefox.\n    @at-root #{string.add-root-selector($root, \":dir(rtl)\", false)} {\n      @content;\n    }\n  }\n}\n\n@mixin ltr() {\n  @content;\n}\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n  $url: url-encode($svg);\n  $viewBox: string.str-split(string.str-extract($svg, \"viewBox='\", \"'\"), \" \");\n\n  @if $flip-rtl != true or $viewBox == null {\n    @include multi-dir() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n    }\n  } @else {\n    $transform: \"transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n    $flipped-url: $svg;\n    $flipped-url: string.str-replace($flipped-url, \"<path\", \"<path #{$transform}\");\n    $flipped-url: string.str-replace($flipped-url, \"<line\", \"<line #{$transform}\");\n    $flipped-url: string.str-replace($flipped-url, \"<polygon\", \"<polygon #{$transform}\");\n    $flipped-url: url-encode($flipped-url);\n\n    @include ltr() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n    }\n\n    @include rtl() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$flipped-url}\");\n    }\n  }\n}\n\n// Add property horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin property-horizontal($prop, $start, $end: $start) {\n  @if $start == 0 and $end == 0 {\n    #{$prop}-left: $start;\n    #{$prop}-right: $end;\n  } @else {\n    -webkit-#{$prop}-start: $start;\n    #{$prop}-inline-start: $start;\n    -webkit-#{$prop}-end: $end;\n    #{$prop}-inline-end: $end;\n  }\n}\n\n// Add property for all directions\n// @param {string} $prop\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// @param {boolean} $content include content or use default\n// ----------------------------------------------------------\n@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {\n  @include property-horizontal($prop, $start, $end);\n  #{$prop}-top: $top;\n  #{$prop}-bottom: $bottom;\n}\n\n// Add padding horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin padding-horizontal($start, $end: $start) {\n  @include property-horizontal(padding, $start, $end);\n}\n\n// Add padding for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(padding, $top, $end, $bottom, $start);\n}\n\n// Add margin horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin margin-horizontal($start, $end: $start) {\n  @include property-horizontal(margin, $start, $end);\n}\n\n// Add margin for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(margin, $top, $end, $bottom, $start);\n}\n\n// Add position horizontal\n// @param {string} $start - amount to position start\n// @param {string} $end - amount to left: 0; end\n// ----------------------------------------------------------\n@mixin position-horizontal($start: null, $end: null) {\n  @if $start == $end {\n    @include multi-dir() {\n      right: $end;\n      left: $start;\n    }\n  } @else {\n    @at-root {\n      & {\n        inset-inline-start: $start;\n        inset-inline-end: $end;\n      }\n    }\n  }\n}\n\n// Add position for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin position($top: null, $end: null, $bottom: null, $start: null) {\n  @include position-horizontal($start, $end);\n  top: $top;\n  bottom: $bottom;\n}\n\n// Add border for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin border($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(border, $top, $end, $bottom, $start);\n}\n\n// Add border radius for all directions\n// @param {string} $top-start\n// @param {string} $top-end\n// @param {string} $bottom-end\n// @param {string} $bottom-start\n// ----------------------------------------------------------\n@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {\n  @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {\n    border-radius: $top-start;\n  } @else {\n    border-start-start-radius: $top-start;\n    border-start-end-radius: $top-end;\n    border-end-end-radius: $bottom-end;\n    border-end-start-radius: $bottom-start;\n  }\n}\n\n// Add direction for all directions\n// @param {string} $dir - Direction on LTR\n@mixin direction($dir) {\n  $other-dir: null;\n\n  @if $dir == ltr {\n    $other-dir: rtl;\n  } @else {\n    $other-dir: ltr;\n  }\n\n  @include ltr() {\n    direction: $dir;\n  }\n\n  @include rtl() {\n    direction: $other-dir;\n  }\n}\n\n// Add float for all directions\n// @param {string} $side\n// @param {string} $decorator - !important\n@mixin float($side, $decorator: null) {\n  @if $side == start {\n    @include ltr() {\n      float: left $decorator;\n    }\n\n    @include rtl() {\n      float: right $decorator;\n    }\n  } @else if $side == end {\n    @include ltr() {\n      float: right $decorator;\n    }\n\n    @include rtl() {\n      float: left $decorator;\n    }\n  } @else {\n    @include multi-dir() {\n      float: $side $decorator;\n    }\n  }\n}\n\n@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {\n  @if $horizontal == start or $horizontal == end {\n    $horizontal-ltr: null;\n    $horizontal-rtl: null;\n\n    @if $horizontal == start {\n      $horizontal-ltr: left;\n      $horizontal-rtl: right;\n    } @else {\n      $horizontal-ltr: right;\n      $horizontal-rtl: left;\n    }\n\n    @include ltr() {\n      background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;\n    }\n\n    @include rtl() {\n      background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;\n    }\n  } @else {\n    @include multi-dir() {\n      background-position: $horizontal $horizontal-amount $vertical $vertical-amount;\n    }\n  }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n  @if $x-axis == start {\n    @include ltr() {\n      transform-origin: left $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: right $y-axis;\n    }\n  } @else if $x-axis == end {\n    @include ltr() {\n      transform-origin: right $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: left $y-axis;\n    }\n  } @else if $x-axis == left or $x-axis == right {\n    @include multi-dir() {\n      transform-origin: $x-axis $y-axis;\n    }\n  } @else {\n    @include ltr() {\n      transform-origin: $x-axis $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: calc(100% - #{$x-axis}) $y-axis;\n    }\n  }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n  $extra: null;\n\n  $x: null;\n  $ltr-translate: null;\n  $rtl-translate: null;\n\n  @each $transform in $transforms {\n    @if (str-index($transform, translate3d)) {\n      $transform: string.str-replace($transform, \"translate3d(\");\n      $transform: string.str-replace($transform, \")\");\n\n      $coordinates: string.str-split($transform, \",\");\n\n      $x: nth($coordinates, 1);\n      $y: nth($coordinates, 2);\n      $z: nth($coordinates, 3);\n\n      $ltr-translate: translate3d($x, $y, $z);\n      $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n    } @else {\n      @if $extra == null {\n        $extra: $transform;\n      } @else {\n        $extra: $extra $transform;\n      }\n    }\n  }\n\n  @if $x == \"0\" or $x == null {\n    @include multi-dir() {\n      transform: $ltr-translate $extra;\n    }\n  } @else {\n    @include ltr() {\n      transform: $ltr-translate $extra;\n    }\n\n    @include rtl() {\n      transform: $rtl-translate $extra;\n    }\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../src/css/display.scss","../src/themes/ionic.mixins.scss"],"names":[],"mappings":"AAYA,UACE,wBAUE,aACE,wBAOF,eACE,wBCiIF,yBD1IA,gBACE,yBCkLF,4BD3KA,kBACE,yBCiIF,yBD1IA,gBACE,yBCkLF,4BD3KA,kBACE,yBCiIF,yBD1IA,gBACE,yBCkLF,4BD3KA,kBACE,yBCiIF,0BD1IA,gBACE,yBCkLF,6BD3KA,kBACE,yBAwBA,kBACE,wBCwGJ,yBDzGE,qBACE,yBCwGJ,yBDzGE,qBACE,yBCwGJ,yBDzGE,qBACE,yBCwGJ,0BDzGE,qBACE,yBADF,oBACE,0BCwGJ,yBDzGE,uBACE,2BCwGJ,yBDzGE,uBACE,2BCwGJ,yBDzGE,uBACE,2BCwGJ,0BDzGE,uBACE,2BADF,0BACE,gCCwGJ,yBDzGE,6BACE,iCCwGJ,yBDzGE,6BACE,iCCwGJ,yBDzGE,6BACE,iCCwGJ,0BDzGE,6BACE,iCADF,mBACE,yBCwGJ,yBDzGE,sBACE,0BCwGJ,yBDzGE,sBACE,0BCwGJ,yBDzGE,sBACE,0BCwGJ,0BDzGE,sBACE,0BADF,kBACE,wBCwGJ,yBDzGE,qBACE,yBCwGJ,yBDzGE,qBACE,yBCwGJ,yBDzGE,qBACE,yBCwGJ,0BDzGE,qBACE,yBADF,yBACE,+BCwGJ,yBDzGE,4BACE,gCCwGJ,yBDzGE,4BACE,gCCwGJ,yBDzGE,4BACE,gCCwGJ,0BDzGE,4BACE,gCADF,kBACE,wBCwGJ,yBDzGE,qBACE,yBCwGJ,yBDzGE,qBACE,yBCwGJ,yBDzGE,qBACE,yBCwGJ,0BDzGE,qBACE,yBADF,yBACE,+BCwGJ,yBDzGE,4BACE,gCCwGJ,yBDzGE,4BACE,gCCwGJ,yBDzGE,4BACE,gCCwGJ,0BDzGE,4BACE,gCADF,mBACE,yBCwGJ,yBDzGE,sBACE,0BCwGJ,yBDzGE,sBACE,0BCwGJ,yBDzGE,sBACE,0BCwGJ,0BDzGE,sBACE,0BADF,wBACE,8BCwGJ,yBDzGE,2BACE,+BCwGJ,yBDzGE,2BACE,+BCwGJ,yBDzGE,2BACE,+BCwGJ,0BDzGE,2BACE,+BADF,uBACE,6BCwGJ,yBDzGE,0BACE,8BCwGJ,yBDzGE,0BACE,8BCwGJ,yBDzGE,0BACE,8BCwGJ,0BDzGE,0BACE","file":"display.css","sourcesContent":["@import \"../themes/ionic.globals\";\n@import \"../themes/ionic.mixins\";\n\n// Display\n// ------------------------------------------------------------------\n// Provides utility classes to control the CSS display property\n// of elements. Includes responsive variants for toggling between\n// block, inline, flex, grid, and other display values at different\n// breakpoints.\n\n// TODO(FW-6697): remove ion-hide-* classes in favor of the new\n// ion-display-* classes\n.ion-hide {\n  display: none !important;\n}\n\n// Adds hidden classes\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    // Provide `ion-hide-{bp}-up` classes for hiding the element based\n    // on the breakpoint\n    .ion-hide#{$infix}-up {\n      display: none !important;\n    }\n  }\n\n  @include media-breakpoint-down($breakpoint, $screen-breakpoints) {\n    // Provide `ion-hide-{bp}-down` classes for hiding the element based\n    // on the breakpoint\n    .ion-hide#{$infix}-down {\n      display: none !important;\n    }\n  }\n}\n\n$display-values: (\n  none,\n  inline,\n  inline-block,\n  block,\n  flex,\n  inline-flex,\n  grid,\n  inline-grid,\n  table,\n  table-cell,\n  table-row\n);\n\n@each $display in $display-values {\n  @each $breakpoint in map-keys($screen-breakpoints) {\n    $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n\n    @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n      .ion-display#{$infix}-#{$display} {\n        display: #{$display} !important;\n      }\n    }\n  }\n}\n","\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n@mixin tablet-viewport() {\n  @media screen and (min-width: 768px) {\n    @content;\n  }\n}\n\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n@mixin mobile-viewport() {\n  @media screen and (max-width: 767px) {\n    @content;\n  }\n}\n\n@mixin input-cover() {\n  @include position(0, null, null, 0);\n  @include margin(0);\n\n  position: absolute;\n\n  width: 100%;\n  height: 100%;\n\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n\n  appearance: none;\n  outline: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n}\n\n@mixin visually-hidden() {\n  position: absolute;\n\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n\n  width: 100%;\n  height: 100%;\n\n  margin: 0;\n  padding: 0;\n\n  border: 0;\n  outline: 0;\n  clip: rect(0 0 0 0);\n\n  opacity: 0;\n  overflow: hidden;\n\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n@mixin text-inherit() {\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n}\n\n@mixin button-state() {\n  @include position(0, 0, 0, 0);\n\n  position: absolute;\n\n  content: \"\";\n\n  opacity: 0;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n  $keys: map-keys($map);\n\n  @return nth($keys, $index);\n}\n\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    576px\n@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {\n  $min: map-get($breakpoints, $name);\n\n  @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"\"  (Returns a blank string)\n//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {\n  @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n  $n: index($breakpoint-names, $name);\n  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n//\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\t// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\t// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    767.98px\n@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {\n  $max: map-get($breakpoints, $name);\n  @return if($max and $max > 0, $max - .02, null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n  @content;\n\n  // $root: #{&};\n  // @at-root [dir] {\n  //   #{$root} {\n  //     @content;\n  //   }\n  // }\n}\n\n@mixin rtl() {\n  $root: #{&};\n\n  $rootSplit: str-split($root, \",\");\n  $selectors: #{add-root-selector($root, \"[dir=rtl]\")};\n  $selectorsSplit: str-split($selectors, \",\");\n\n  $hostContextSelectors: ();\n  $restSelectors: ();\n  $dirSelectors: ();\n\n  // Selectors must be split into individual selectors in case the browser\n  // doesn't support a specific selector.\n  // For example, Firefox and Safari doesn't support `:host-context()`.\n  // If an invalid selector is used, then the entire group of selectors\n  // will be ignored.\n  // @link https://www.w3.org/TR/selectors-3/#grouping\n  @each $selector in $selectorsSplit {\n    // Group the selectors back into a single selector to optimize the output.\n    @if str-index($selector, \":host-context\") {\n      $hostContextSelectors: append($hostContextSelectors, $selector, comma);\n    } @else {\n      // Group the selectors back into a single selector to optimize the output.\n      $restSelectors: append($restSelectors, $selector, comma);\n    }\n  }\n\n  // Supported by Chrome.\n  @if length($hostContextSelectors) > 0 {\n    @at-root #{$hostContextSelectors} {\n      @content;\n    }\n  }\n\n  // Supported by all browsers.\n  @if length($restSelectors) > 0 {\n    @at-root #{$restSelectors} {\n      @content;\n    }\n  }\n\n  // If browser can support `:dir()`, then add the `:dir()` selectors.\n  @supports selector(:dir(rtl)) {\n    // Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.\n    // `:host-context()` is added:\n    // - through the `add-root-selector()` function.\n    // - first so that it takes precedence over `:dir()`.\n    // For example,\n    // - Firefox doesn't support `:host-context()`, but does support `:dir()`.\n    // - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`\n    // @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/\n    // -- However, there is a Webkit bug on v16 that prevents `:dir()` from working when\n    // -- the app direction is changed dynamically. v17+ works fine.\n    // -- @link https://bugs.webkit.org/show_bug.cgi?id=257133\n\n    // Supported by Firefox.\n    @at-root #{add-root-selector($root, \":dir(rtl)\", false)} {\n      @content;\n    }\n  }\n}\n\n@mixin ltr() {\n  @content;\n}\n\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n  $url: url-encode($svg);\n  $viewBox: str-split(str-extract($svg, \"viewBox='\", \"'\"), \" \");\n\n  @if $flip-rtl != true or $viewBox == null {\n    @include multi-dir() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n    }\n  } @else {\n    $transform: \"transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n    $flipped-url: $svg;\n    $flipped-url: str-replace($flipped-url, \"<path\", \"<path #{$transform}\");\n    $flipped-url: str-replace($flipped-url, \"<line\", \"<line #{$transform}\");\n    $flipped-url: str-replace($flipped-url, \"<polygon\", \"<polygon #{$transform}\");\n    $flipped-url: url-encode($flipped-url);\n\n    @include ltr () {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n    }\n    @include rtl() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$flipped-url}\");\n    }\n  }\n}\n\n// Add property horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin property-horizontal($prop, $start, $end: $start) {\n  @if $start == 0 and $end == 0 {\n    #{$prop}-left: $start;\n    #{$prop}-right: $end;\n\n  } @else {\n    -webkit-#{$prop}-start: $start;\n    #{$prop}-inline-start: $start;\n    -webkit-#{$prop}-end: $end;\n    #{$prop}-inline-end: $end;\n  }\n}\n\n// Add property for all directions\n// @param {string} $prop\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// @param {boolean} $content include content or use default\n// ----------------------------------------------------------\n@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {\n  @include property-horizontal($prop, $start, $end);\n  #{$prop}-top: $top;\n  #{$prop}-bottom: $bottom;\n}\n\n// Add padding horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin padding-horizontal($start, $end: $start) {\n  @include property-horizontal(padding, $start, $end);\n}\n\n// Add padding for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(padding, $top, $end, $bottom, $start);\n}\n\n// Add margin horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin margin-horizontal($start, $end: $start) {\n  @include property-horizontal(margin, $start, $end);\n}\n\n// Add margin for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(margin, $top, $end, $bottom, $start);\n}\n\n// Add position horizontal\n// @param {string} $start - amount to position start\n// @param {string} $end - amount to left: 0; end\n// ----------------------------------------------------------\n@mixin position-horizontal($start: null, $end: null) {\n  @if $start == $end {\n    @include multi-dir() {\n      left: $start;\n      right: $end;\n    }\n  } @else {\n    @at-root {\n      & {\n        inset-inline-start: $start;\n        inset-inline-end: $end;\n      }\n    }\n  }\n}\n\n// Add position for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin position($top: null, $end: null, $bottom: null, $start: null) {\n  @include position-horizontal($start, $end);\n  top: $top;\n  bottom: $bottom;\n}\n\n// Add border for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin border($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(border, $top, $end, $bottom, $start);\n}\n\n// Add border radius for all directions\n// @param {string} $top-start\n// @param {string} $top-end\n// @param {string} $bottom-end\n// @param {string} $bottom-start\n// ----------------------------------------------------------\n@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {\n  @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {\n    border-radius: $top-start;\n  } @else {\n    border-start-start-radius: $top-start;\n    border-start-end-radius: $top-end;\n    border-end-end-radius: $bottom-end;\n    border-end-start-radius: $bottom-start;\n  }\n}\n\n// Add direction for all directions\n// @param {string} $dir - Direction on LTR\n@mixin direction($dir) {\n  $other-dir: null;\n\n  @if $dir == ltr {\n    $other-dir: rtl;\n  } @else {\n    $other-dir: ltr;\n  }\n\n  @include ltr() {\n    direction: $dir;\n  }\n  @include rtl() {\n    direction: $other-dir;\n  }\n}\n\n// Add float for all directions\n// @param {string} $side\n// @param {string} $decorator - !important\n@mixin float($side, $decorator: null) {\n  @if $side == start {\n    @include ltr() {\n      float: left $decorator;\n    }\n    @include rtl() {\n      float: right $decorator;\n    }\n  } @else if $side == end {\n    @include ltr() {\n      float: right $decorator;\n    }\n    @include rtl() {\n      float: left $decorator;\n    }\n  } @else {\n    @include multi-dir() {\n      float: $side $decorator;\n    }\n  }\n}\n\n@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {\n  @if $horizontal == start or $horizontal == end {\n    $horizontal-ltr: null;\n    $horizontal-rtl: null;\n    @if $horizontal == start {\n      $horizontal-ltr: left;\n      $horizontal-rtl: right;\n    } @else {\n      $horizontal-ltr: right;\n      $horizontal-rtl: left;\n    }\n\n    @include ltr() {\n      background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;\n    }\n    @include rtl() {\n      background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;\n    }\n  } @else {\n    @include multi-dir() {\n      background-position: $horizontal $horizontal-amount $vertical $vertical-amount;\n    }\n  }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n  @if $x-axis == start {\n    @include ltr() {\n      transform-origin: left $y-axis;\n    }\n    @include rtl() {\n      transform-origin: right $y-axis;\n    }\n  } @else if $x-axis == end {\n    @include ltr() {\n      transform-origin: right $y-axis;\n    }\n    @include rtl() {\n      transform-origin: left $y-axis;\n    }\n  } @else if $x-axis == left or $x-axis == right {\n    @include multi-dir() {\n      transform-origin: $x-axis $y-axis;\n    }\n  } @else {\n    @include ltr() {\n      transform-origin: $x-axis $y-axis;\n    }\n    @include rtl() {\n      transform-origin: calc(100% - #{$x-axis}) $y-axis;\n    }\n  }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n  $extra: null;\n\n  $x: null;\n  $ltr-translate: null;\n  $rtl-translate: null;\n\n  @each $transform in $transforms {\n    @if (str-index($transform, translate3d)) {\n      $transform: str-replace($transform, 'translate3d(');\n      $transform: str-replace($transform, ')');\n\n      $coordinates: str-split($transform, ',');\n\n      $x: nth($coordinates, 1);\n      $y: nth($coordinates, 2);\n      $z: nth($coordinates, 3);\n\n      $ltr-translate: translate3d($x, $y, $z);\n      $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n    } @else {\n      @if $extra == null {\n        $extra: $transform;\n      } @else {\n        $extra: $extra $transform;\n      }\n    }\n  }\n\n  @if $x == '0' or $x == null {\n    @include multi-dir() {\n      transform: $ltr-translate $extra;\n    }\n  } @else {\n    @include ltr() {\n      transform: $ltr-translate $extra;\n    }\n\n    @include rtl() {\n      transform: $rtl-translate $extra;\n    }\n  }\n}\n"]}

package/css/flex-utils.css

@@ -1 +1 @@
-.ion-align-content-start{align-content:flex-start !important}.ion-align-content-end{align-content:flex-end !important}.ion-align-content-center{align-content:center !important}.ion-align-content-between{align-content:space-between !important}.ion-align-content-around{align-content:space-around !important}.ion-align-content-stretch{align-content:stretch !important}@media(min-width: 576px){.ion-align-content-sm-start{align-content:flex-start !important}.ion-align-content-sm-end{align-content:flex-end !important}.ion-align-content-sm-center{align-content:center !important}.ion-align-content-sm-between{align-content:space-between !important}.ion-align-content-sm-around{align-content:space-around !important}.ion-align-content-sm-stretch{align-content:stretch !important}}@media(min-width: 768px){.ion-align-content-md-start{align-content:flex-start !important}.ion-align-content-md-end{align-content:flex-end !important}.ion-align-content-md-center{align-content:center !important}.ion-align-content-md-between{align-content:space-between !important}.ion-align-content-md-around{align-content:space-around !important}.ion-align-content-md-stretch{align-content:stretch !important}}@media(min-width: 992px){.ion-align-content-lg-start{align-content:flex-start !important}.ion-align-content-lg-end{align-content:flex-end !important}.ion-align-content-lg-center{align-content:center !important}.ion-align-content-lg-between{align-content:space-between !important}.ion-align-content-lg-around{align-content:space-around !important}.ion-align-content-lg-stretch{align-content:stretch !important}}@media(min-width: 1200px){.ion-align-content-xl-start{align-content:flex-start !important}.ion-align-content-xl-end{align-content:flex-end !important}.ion-align-content-xl-center{align-content:center !important}.ion-align-content-xl-between{align-content:space-between !important}.ion-align-content-xl-around{align-content:space-around !important}.ion-align-content-xl-stretch{align-content:stretch !important}}.ion-align-items-start{align-items:start !important}.ion-align-items-end{align-items:end !important}.ion-align-items-center{align-items:center !important}.ion-align-items-stretch{align-items:stretch !important}.ion-align-items-baseline{align-items:baseline !important}@media(min-width: 576px){.ion-align-items-sm-start{align-items:start !important}.ion-align-items-sm-end{align-items:end !important}.ion-align-items-sm-center{align-items:center !important}.ion-align-items-sm-stretch{align-items:stretch !important}.ion-align-items-sm-baseline{align-items:baseline !important}}@media(min-width: 768px){.ion-align-items-md-start{align-items:start !important}.ion-align-items-md-end{align-items:end !important}.ion-align-items-md-center{align-items:center !important}.ion-align-items-md-stretch{align-items:stretch !important}.ion-align-items-md-baseline{align-items:baseline !important}}@media(min-width: 992px){.ion-align-items-lg-start{align-items:start !important}.ion-align-items-lg-end{align-items:end !important}.ion-align-items-lg-center{align-items:center !important}.ion-align-items-lg-stretch{align-items:stretch !important}.ion-align-items-lg-baseline{align-items:baseline !important}}@media(min-width: 1200px){.ion-align-items-xl-start{align-items:start !important}.ion-align-items-xl-end{align-items:end !important}.ion-align-items-xl-center{align-items:center !important}.ion-align-items-xl-stretch{align-items:stretch !important}.ion-align-items-xl-baseline{align-items:baseline !important}}.ion-align-self-start{align-self:start !important}.ion-align-self-end{align-self:end !important}.ion-align-self-center{align-self:center !important}.ion-align-self-stretch{align-self:stretch !important}.ion-align-self-baseline{align-self:baseline !important}.ion-align-self-auto{align-self:auto !important}@media(min-width: 576px){.ion-align-self-sm-start{align-self:start !important}.ion-align-self-sm-end{align-self:end !important}.ion-align-self-sm-center{align-self:center !important}.ion-align-self-sm-stretch{align-self:stretch !important}.ion-align-self-sm-baseline{align-self:baseline !important}.ion-align-self-sm-auto{align-self:auto !important}}@media(min-width: 768px){.ion-align-self-md-start{align-self:start !important}.ion-align-self-md-end{align-self:end !important}.ion-align-self-md-center{align-self:center !important}.ion-align-self-md-stretch{align-self:stretch !important}.ion-align-self-md-baseline{align-self:baseline !important}.ion-align-self-md-auto{align-self:auto !important}}@media(min-width: 992px){.ion-align-self-lg-start{align-self:start !important}.ion-align-self-lg-end{align-self:end !important}.ion-align-self-lg-center{align-self:center !important}.ion-align-self-lg-stretch{align-self:stretch !important}.ion-align-self-lg-baseline{align-self:baseline !important}.ion-align-self-lg-auto{align-self:auto !important}}@media(min-width: 1200px){.ion-align-self-xl-start{align-self:start !important}.ion-align-self-xl-end{align-self:end !important}.ion-align-self-xl-center{align-self:center !important}.ion-align-self-xl-stretch{align-self:stretch !important}.ion-align-self-xl-baseline{align-self:baseline !important}.ion-align-self-xl-auto{align-self:auto !important}}.ion-justify-content-start{justify-content:flex-start !important}.ion-justify-content-end{justify-content:flex-end !important}.ion-justify-content-center{justify-content:center !important}.ion-justify-content-between{justify-content:space-between !important}.ion-justify-content-around{justify-content:space-around !important}.ion-justify-content-evenly{justify-content:space-evenly !important}@media(min-width: 576px){.ion-justify-content-sm-start{justify-content:flex-start !important}.ion-justify-content-sm-end{justify-content:flex-end !important}.ion-justify-content-sm-center{justify-content:center !important}.ion-justify-content-sm-between{justify-content:space-between !important}.ion-justify-content-sm-around{justify-content:space-around !important}.ion-justify-content-sm-evenly{justify-content:space-evenly !important}}@media(min-width: 768px){.ion-justify-content-md-start{justify-content:flex-start !important}.ion-justify-content-md-end{justify-content:flex-end !important}.ion-justify-content-md-center{justify-content:center !important}.ion-justify-content-md-between{justify-content:space-between !important}.ion-justify-content-md-around{justify-content:space-around !important}.ion-justify-content-md-evenly{justify-content:space-evenly !important}}@media(min-width: 992px){.ion-justify-content-lg-start{justify-content:flex-start !important}.ion-justify-content-lg-end{justify-content:flex-end !important}.ion-justify-content-lg-center{justify-content:center !important}.ion-justify-content-lg-between{justify-content:space-between !important}.ion-justify-content-lg-around{justify-content:space-around !important}.ion-justify-content-lg-evenly{justify-content:space-evenly !important}}@media(min-width: 1200px){.ion-justify-content-xl-start{justify-content:flex-start !important}.ion-justify-content-xl-end{justify-content:flex-end !important}.ion-justify-content-xl-center{justify-content:center !important}.ion-justify-content-xl-between{justify-content:space-between !important}.ion-justify-content-xl-around{justify-content:space-around !important}.ion-justify-content-xl-evenly{justify-content:space-evenly !important}}.ion-flex-row{flex-direction:row !important}.ion-flex-row-reverse{flex-direction:row-reverse !important}.ion-flex-column{flex-direction:column !important}.ion-flex-column-reverse{flex-direction:column-reverse !important}@media(min-width: 576px){.ion-flex-sm-row{flex-direction:row !important}.ion-flex-sm-row-reverse{flex-direction:row-reverse !important}.ion-flex-sm-column{flex-direction:column !important}.ion-flex-sm-column-reverse{flex-direction:column-reverse !important}}@media(min-width: 768px){.ion-flex-md-row{flex-direction:row !important}.ion-flex-md-row-reverse{flex-direction:row-reverse !important}.ion-flex-md-column{flex-direction:column !important}.ion-flex-md-column-reverse{flex-direction:column-reverse !important}}@media(min-width: 992px){.ion-flex-lg-row{flex-direction:row !important}.ion-flex-lg-row-reverse{flex-direction:row-reverse !important}.ion-flex-lg-column{flex-direction:column !important}.ion-flex-lg-column-reverse{flex-direction:column-reverse !important}}@media(min-width: 1200px){.ion-flex-xl-row{flex-direction:row !important}.ion-flex-xl-row-reverse{flex-direction:row-reverse !important}.ion-flex-xl-column{flex-direction:column !important}.ion-flex-xl-column-reverse{flex-direction:column-reverse !important}}.ion-wrap{flex-wrap:wrap !important}.ion-nowrap{flex-wrap:nowrap !important}.ion-wrap-reverse{flex-wrap:wrap-reverse !important}.ion-flex-wrap{flex-wrap:wrap !important}.ion-flex-nowrap{flex-wrap:nowrap !important}.ion-flex-wrap-reverse{flex-wrap:wrap-reverse !important}@media(min-width: 576px){.ion-flex-sm-wrap{flex-wrap:wrap !important}.ion-flex-sm-nowrap{flex-wrap:nowrap !important}.ion-flex-sm-wrap-reverse{flex-wrap:wrap-reverse !important}}@media(min-width: 768px){.ion-flex-md-wrap{flex-wrap:wrap !important}.ion-flex-md-nowrap{flex-wrap:nowrap !important}.ion-flex-md-wrap-reverse{flex-wrap:wrap-reverse !important}}@media(min-width: 992px){.ion-flex-lg-wrap{flex-wrap:wrap !important}.ion-flex-lg-nowrap{flex-wrap:nowrap !important}.ion-flex-lg-wrap-reverse{flex-wrap:wrap-reverse !important}}@media(min-width: 1200px){.ion-flex-xl-wrap{flex-wrap:wrap !important}.ion-flex-xl-nowrap{flex-wrap:nowrap !important}.ion-flex-xl-wrap-reverse{flex-wrap:wrap-reverse !important}}.ion-flex-1{flex:1 !important}.ion-flex-auto{flex:auto !important}.ion-flex-initial{flex:initial !important}.ion-flex-none{flex:none !important}@media(min-width: 576px){.ion-flex-sm-1{flex:1 !important}.ion-flex-sm-auto{flex:auto !important}.ion-flex-sm-initial{flex:initial !important}.ion-flex-sm-none{flex:none !important}}@media(min-width: 768px){.ion-flex-md-1{flex:1 !important}.ion-flex-md-auto{flex:auto !important}.ion-flex-md-initial{flex:initial !important}.ion-flex-md-none{flex:none !important}}@media(min-width: 992px){.ion-flex-lg-1{flex:1 !important}.ion-flex-lg-auto{flex:auto !important}.ion-flex-lg-initial{flex:initial !important}.ion-flex-lg-none{flex:none !important}}@media(min-width: 1200px){.ion-flex-xl-1{flex:1 !important}.ion-flex-xl-auto{flex:auto !important}.ion-flex-xl-initial{flex:initial !important}.ion-flex-xl-none{flex:none !important}}.ion-flex-grow-0{flex-grow:0 !important}.ion-flex-grow-1{flex-grow:1 !important}.ion-flex-shrink-0{flex-shrink:0 !important}.ion-flex-shrink-1{flex-shrink:1 !important}@media(min-width: 576px){.ion-flex-sm-grow-0{flex-grow:0 !important}.ion-flex-sm-grow-1{flex-grow:1 !important}.ion-flex-sm-shrink-0{flex-shrink:0 !important}.ion-flex-sm-shrink-1{flex-shrink:1 !important}}@media(min-width: 768px){.ion-flex-md-grow-0{flex-grow:0 !important}.ion-flex-md-grow-1{flex-grow:1 !important}.ion-flex-md-shrink-0{flex-shrink:0 !important}.ion-flex-md-shrink-1{flex-shrink:1 !important}}@media(min-width: 992px){.ion-flex-lg-grow-0{flex-grow:0 !important}.ion-flex-lg-grow-1{flex-grow:1 !important}.ion-flex-lg-shrink-0{flex-shrink:0 !important}.ion-flex-lg-shrink-1{flex-shrink:1 !important}}@media(min-width: 1200px){.ion-flex-xl-grow-0{flex-grow:0 !important}.ion-flex-xl-grow-1{flex-grow:1 !important}.ion-flex-xl-shrink-0{flex-shrink:0 !important}.ion-flex-xl-shrink-1{flex-shrink:1 !important}}.ion-order-first{order:-1 !important}.ion-order-0{order:0 !important}.ion-order-1{order:1 !important}.ion-order-2{order:2 !important}.ion-order-3{order:3 !important}.ion-order-4{order:4 !important}.ion-order-5{order:5 !important}.ion-order-6{order:6 !important}.ion-order-7{order:7 !important}.ion-order-8{order:8 !important}.ion-order-9{order:9 !important}.ion-order-10{order:10 !important}.ion-order-11{order:11 !important}.ion-order-12{order:12 !important}.ion-order-last{order:13 !important}@media(min-width: 576px){.ion-order-sm-first{order:-1 !important}.ion-order-sm-0{order:0 !important}.ion-order-sm-1{order:1 !important}.ion-order-sm-2{order:2 !important}.ion-order-sm-3{order:3 !important}.ion-order-sm-4{order:4 !important}.ion-order-sm-5{order:5 !important}.ion-order-sm-6{order:6 !important}.ion-order-sm-7{order:7 !important}.ion-order-sm-8{order:8 !important}.ion-order-sm-9{order:9 !important}.ion-order-sm-10{order:10 !important}.ion-order-sm-11{order:11 !important}.ion-order-sm-12{order:12 !important}.ion-order-sm-last{order:13 !important}}@media(min-width: 768px){.ion-order-md-first{order:-1 !important}.ion-order-md-0{order:0 !important}.ion-order-md-1{order:1 !important}.ion-order-md-2{order:2 !important}.ion-order-md-3{order:3 !important}.ion-order-md-4{order:4 !important}.ion-order-md-5{order:5 !important}.ion-order-md-6{order:6 !important}.ion-order-md-7{order:7 !important}.ion-order-md-8{order:8 !important}.ion-order-md-9{order:9 !important}.ion-order-md-10{order:10 !important}.ion-order-md-11{order:11 !important}.ion-order-md-12{order:12 !important}.ion-order-md-last{order:13 !important}}@media(min-width: 992px){.ion-order-lg-first{order:-1 !important}.ion-order-lg-0{order:0 !important}.ion-order-lg-1{order:1 !important}.ion-order-lg-2{order:2 !important}.ion-order-lg-3{order:3 !important}.ion-order-lg-4{order:4 !important}.ion-order-lg-5{order:5 !important}.ion-order-lg-6{order:6 !important}.ion-order-lg-7{order:7 !important}.ion-order-lg-8{order:8 !important}.ion-order-lg-9{order:9 !important}.ion-order-lg-10{order:10 !important}.ion-order-lg-11{order:11 !important}.ion-order-lg-12{order:12 !important}.ion-order-lg-last{order:13 !important}}@media(min-width: 1200px){.ion-order-xl-first{order:-1 !important}.ion-order-xl-0{order:0 !important}.ion-order-xl-1{order:1 !important}.ion-order-xl-2{order:2 !important}.ion-order-xl-3{order:3 !important}.ion-order-xl-4{order:4 !important}.ion-order-xl-5{order:5 !important}.ion-order-xl-6{order:6 !important}.ion-order-xl-7{order:7 !important}.ion-order-xl-8{order:8 !important}.ion-order-xl-9{order:9 !important}.ion-order-xl-10{order:10 !important}.ion-order-xl-11{order:11 !important}.ion-order-xl-12{order:12 !important}.ion-order-xl-last{order:13 !important}}.ion-flex-direction-column{flex-direction:column !important}.ion-flex-direction-column-reverse{flex-direction:column-reverse !important}.ion-flex-direction-row{flex-direction:row !important}.ion-flex-direction-row-reverse{flex-direction:row-reverse !important}.ion-flex-1{flex:1 !important}/*# sourceMappingURL=flex-utils.css.map */
+.ion-align-content-start{align-content:flex-start !important}.ion-align-content-end{align-content:flex-end !important}.ion-align-content-center{align-content:center !important}.ion-align-content-between{align-content:space-between !important}.ion-align-content-around{align-content:space-around !important}.ion-align-content-stretch{align-content:stretch !important}@media(min-width: 576px){.ion-align-content-sm-start{align-content:flex-start !important}.ion-align-content-sm-end{align-content:flex-end !important}.ion-align-content-sm-center{align-content:center !important}.ion-align-content-sm-between{align-content:space-between !important}.ion-align-content-sm-around{align-content:space-around !important}.ion-align-content-sm-stretch{align-content:stretch !important}}@media(min-width: 768px){.ion-align-content-md-start{align-content:flex-start !important}.ion-align-content-md-end{align-content:flex-end !important}.ion-align-content-md-center{align-content:center !important}.ion-align-content-md-between{align-content:space-between !important}.ion-align-content-md-around{align-content:space-around !important}.ion-align-content-md-stretch{align-content:stretch !important}}@media(min-width: 992px){.ion-align-content-lg-start{align-content:flex-start !important}.ion-align-content-lg-end{align-content:flex-end !important}.ion-align-content-lg-center{align-content:center !important}.ion-align-content-lg-between{align-content:space-between !important}.ion-align-content-lg-around{align-content:space-around !important}.ion-align-content-lg-stretch{align-content:stretch !important}}@media(min-width: 1200px){.ion-align-content-xl-start{align-content:flex-start !important}.ion-align-content-xl-end{align-content:flex-end !important}.ion-align-content-xl-center{align-content:center !important}.ion-align-content-xl-between{align-content:space-between !important}.ion-align-content-xl-around{align-content:space-around !important}.ion-align-content-xl-stretch{align-content:stretch !important}}.ion-align-items-start{align-items:start !important}.ion-align-items-end{align-items:end !important}.ion-align-items-center{align-items:center !important}.ion-align-items-stretch{align-items:stretch !important}.ion-align-items-baseline{align-items:baseline !important}@media(min-width: 576px){.ion-align-items-sm-start{align-items:start !important}.ion-align-items-sm-end{align-items:end !important}.ion-align-items-sm-center{align-items:center !important}.ion-align-items-sm-stretch{align-items:stretch !important}.ion-align-items-sm-baseline{align-items:baseline !important}}@media(min-width: 768px){.ion-align-items-md-start{align-items:start !important}.ion-align-items-md-end{align-items:end !important}.ion-align-items-md-center{align-items:center !important}.ion-align-items-md-stretch{align-items:stretch !important}.ion-align-items-md-baseline{align-items:baseline !important}}@media(min-width: 992px){.ion-align-items-lg-start{align-items:start !important}.ion-align-items-lg-end{align-items:end !important}.ion-align-items-lg-center{align-items:center !important}.ion-align-items-lg-stretch{align-items:stretch !important}.ion-align-items-lg-baseline{align-items:baseline !important}}@media(min-width: 1200px){.ion-align-items-xl-start{align-items:start !important}.ion-align-items-xl-end{align-items:end !important}.ion-align-items-xl-center{align-items:center !important}.ion-align-items-xl-stretch{align-items:stretch !important}.ion-align-items-xl-baseline{align-items:baseline !important}}.ion-align-self-start{align-self:start !important}.ion-align-self-end{align-self:end !important}.ion-align-self-center{align-self:center !important}.ion-align-self-stretch{align-self:stretch !important}.ion-align-self-baseline{align-self:baseline !important}.ion-align-self-auto{align-self:auto !important}@media(min-width: 576px){.ion-align-self-sm-start{align-self:start !important}.ion-align-self-sm-end{align-self:end !important}.ion-align-self-sm-center{align-self:center !important}.ion-align-self-sm-stretch{align-self:stretch !important}.ion-align-self-sm-baseline{align-self:baseline !important}.ion-align-self-sm-auto{align-self:auto !important}}@media(min-width: 768px){.ion-align-self-md-start{align-self:start !important}.ion-align-self-md-end{align-self:end !important}.ion-align-self-md-center{align-self:center !important}.ion-align-self-md-stretch{align-self:stretch !important}.ion-align-self-md-baseline{align-self:baseline !important}.ion-align-self-md-auto{align-self:auto !important}}@media(min-width: 992px){.ion-align-self-lg-start{align-self:start !important}.ion-align-self-lg-end{align-self:end !important}.ion-align-self-lg-center{align-self:center !important}.ion-align-self-lg-stretch{align-self:stretch !important}.ion-align-self-lg-baseline{align-self:baseline !important}.ion-align-self-lg-auto{align-self:auto !important}}@media(min-width: 1200px){.ion-align-self-xl-start{align-self:start !important}.ion-align-self-xl-end{align-self:end !important}.ion-align-self-xl-center{align-self:center !important}.ion-align-self-xl-stretch{align-self:stretch !important}.ion-align-self-xl-baseline{align-self:baseline !important}.ion-align-self-xl-auto{align-self:auto !important}}.ion-justify-content-start{justify-content:flex-start !important}.ion-justify-content-end{justify-content:flex-end !important}.ion-justify-content-center{justify-content:center !important}.ion-justify-content-between{justify-content:space-between !important}.ion-justify-content-around{justify-content:space-around !important}.ion-justify-content-evenly{justify-content:space-evenly !important}@media(min-width: 576px){.ion-justify-content-sm-start{justify-content:flex-start !important}.ion-justify-content-sm-end{justify-content:flex-end !important}.ion-justify-content-sm-center{justify-content:center !important}.ion-justify-content-sm-between{justify-content:space-between !important}.ion-justify-content-sm-around{justify-content:space-around !important}.ion-justify-content-sm-evenly{justify-content:space-evenly !important}}@media(min-width: 768px){.ion-justify-content-md-start{justify-content:flex-start !important}.ion-justify-content-md-end{justify-content:flex-end !important}.ion-justify-content-md-center{justify-content:center !important}.ion-justify-content-md-between{justify-content:space-between !important}.ion-justify-content-md-around{justify-content:space-around !important}.ion-justify-content-md-evenly{justify-content:space-evenly !important}}@media(min-width: 992px){.ion-justify-content-lg-start{justify-content:flex-start !important}.ion-justify-content-lg-end{justify-content:flex-end !important}.ion-justify-content-lg-center{justify-content:center !important}.ion-justify-content-lg-between{justify-content:space-between !important}.ion-justify-content-lg-around{justify-content:space-around !important}.ion-justify-content-lg-evenly{justify-content:space-evenly !important}}@media(min-width: 1200px){.ion-justify-content-xl-start{justify-content:flex-start !important}.ion-justify-content-xl-end{justify-content:flex-end !important}.ion-justify-content-xl-center{justify-content:center !important}.ion-justify-content-xl-between{justify-content:space-between !important}.ion-justify-content-xl-around{justify-content:space-around !important}.ion-justify-content-xl-evenly{justify-content:space-evenly !important}}.ion-flex-row{flex-direction:row !important}.ion-flex-row-reverse{flex-direction:row-reverse !important}.ion-flex-column{flex-direction:column !important}.ion-flex-column-reverse{flex-direction:column-reverse !important}@media(min-width: 576px){.ion-flex-sm-row{flex-direction:row !important}.ion-flex-sm-row-reverse{flex-direction:row-reverse !important}.ion-flex-sm-column{flex-direction:column !important}.ion-flex-sm-column-reverse{flex-direction:column-reverse !important}}@media(min-width: 768px){.ion-flex-md-row{flex-direction:row !important}.ion-flex-md-row-reverse{flex-direction:row-reverse !important}.ion-flex-md-column{flex-direction:column !important}.ion-flex-md-column-reverse{flex-direction:column-reverse !important}}@media(min-width: 992px){.ion-flex-lg-row{flex-direction:row !important}.ion-flex-lg-row-reverse{flex-direction:row-reverse !important}.ion-flex-lg-column{flex-direction:column !important}.ion-flex-lg-column-reverse{flex-direction:column-reverse !important}}@media(min-width: 1200px){.ion-flex-xl-row{flex-direction:row !important}.ion-flex-xl-row-reverse{flex-direction:row-reverse !important}.ion-flex-xl-column{flex-direction:column !important}.ion-flex-xl-column-reverse{flex-direction:column-reverse !important}}.ion-wrap{flex-wrap:wrap !important}.ion-nowrap{flex-wrap:nowrap !important}.ion-wrap-reverse{flex-wrap:wrap-reverse !important}.ion-flex-wrap{flex-wrap:wrap !important}.ion-flex-nowrap{flex-wrap:nowrap !important}.ion-flex-wrap-reverse{flex-wrap:wrap-reverse !important}@media(min-width: 576px){.ion-flex-sm-wrap{flex-wrap:wrap !important}.ion-flex-sm-nowrap{flex-wrap:nowrap !important}.ion-flex-sm-wrap-reverse{flex-wrap:wrap-reverse !important}}@media(min-width: 768px){.ion-flex-md-wrap{flex-wrap:wrap !important}.ion-flex-md-nowrap{flex-wrap:nowrap !important}.ion-flex-md-wrap-reverse{flex-wrap:wrap-reverse !important}}@media(min-width: 992px){.ion-flex-lg-wrap{flex-wrap:wrap !important}.ion-flex-lg-nowrap{flex-wrap:nowrap !important}.ion-flex-lg-wrap-reverse{flex-wrap:wrap-reverse !important}}@media(min-width: 1200px){.ion-flex-xl-wrap{flex-wrap:wrap !important}.ion-flex-xl-nowrap{flex-wrap:nowrap !important}.ion-flex-xl-wrap-reverse{flex-wrap:wrap-reverse !important}}.ion-flex-1{flex:1 !important}.ion-flex-auto{flex:auto !important}.ion-flex-initial{flex:initial !important}.ion-flex-none{flex:none !important}@media(min-width: 576px){.ion-flex-sm-1{flex:1 !important}.ion-flex-sm-auto{flex:auto !important}.ion-flex-sm-initial{flex:initial !important}.ion-flex-sm-none{flex:none !important}}@media(min-width: 768px){.ion-flex-md-1{flex:1 !important}.ion-flex-md-auto{flex:auto !important}.ion-flex-md-initial{flex:initial !important}.ion-flex-md-none{flex:none !important}}@media(min-width: 992px){.ion-flex-lg-1{flex:1 !important}.ion-flex-lg-auto{flex:auto !important}.ion-flex-lg-initial{flex:initial !important}.ion-flex-lg-none{flex:none !important}}@media(min-width: 1200px){.ion-flex-xl-1{flex:1 !important}.ion-flex-xl-auto{flex:auto !important}.ion-flex-xl-initial{flex:initial !important}.ion-flex-xl-none{flex:none !important}}.ion-flex-grow-0{flex-grow:0 !important}.ion-flex-grow-1{flex-grow:1 !important}.ion-flex-shrink-0{flex-shrink:0 !important}.ion-flex-shrink-1{flex-shrink:1 !important}@media(min-width: 576px){.ion-flex-sm-grow-0{flex-grow:0 !important}.ion-flex-sm-grow-1{flex-grow:1 !important}.ion-flex-sm-shrink-0{flex-shrink:0 !important}.ion-flex-sm-shrink-1{flex-shrink:1 !important}}@media(min-width: 768px){.ion-flex-md-grow-0{flex-grow:0 !important}.ion-flex-md-grow-1{flex-grow:1 !important}.ion-flex-md-shrink-0{flex-shrink:0 !important}.ion-flex-md-shrink-1{flex-shrink:1 !important}}@media(min-width: 992px){.ion-flex-lg-grow-0{flex-grow:0 !important}.ion-flex-lg-grow-1{flex-grow:1 !important}.ion-flex-lg-shrink-0{flex-shrink:0 !important}.ion-flex-lg-shrink-1{flex-shrink:1 !important}}@media(min-width: 1200px){.ion-flex-xl-grow-0{flex-grow:0 !important}.ion-flex-xl-grow-1{flex-grow:1 !important}.ion-flex-xl-shrink-0{flex-shrink:0 !important}.ion-flex-xl-shrink-1{flex-shrink:1 !important}}.ion-order-first{order:-1 !important}.ion-order-0{order:0 !important}.ion-order-1{order:1 !important}.ion-order-2{order:2 !important}.ion-order-3{order:3 !important}.ion-order-4{order:4 !important}.ion-order-5{order:5 !important}.ion-order-6{order:6 !important}.ion-order-7{order:7 !important}.ion-order-8{order:8 !important}.ion-order-9{order:9 !important}.ion-order-10{order:10 !important}.ion-order-11{order:11 !important}.ion-order-12{order:12 !important}.ion-order-last{order:13 !important}@media(min-width: 576px){.ion-order-sm-first{order:-1 !important}.ion-order-sm-0{order:0 !important}.ion-order-sm-1{order:1 !important}.ion-order-sm-2{order:2 !important}.ion-order-sm-3{order:3 !important}.ion-order-sm-4{order:4 !important}.ion-order-sm-5{order:5 !important}.ion-order-sm-6{order:6 !important}.ion-order-sm-7{order:7 !important}.ion-order-sm-8{order:8 !important}.ion-order-sm-9{order:9 !important}.ion-order-sm-10{order:10 !important}.ion-order-sm-11{order:11 !important}.ion-order-sm-12{order:12 !important}.ion-order-sm-last{order:13 !important}}@media(min-width: 768px){.ion-order-md-first{order:-1 !important}.ion-order-md-0{order:0 !important}.ion-order-md-1{order:1 !important}.ion-order-md-2{order:2 !important}.ion-order-md-3{order:3 !important}.ion-order-md-4{order:4 !important}.ion-order-md-5{order:5 !important}.ion-order-md-6{order:6 !important}.ion-order-md-7{order:7 !important}.ion-order-md-8{order:8 !important}.ion-order-md-9{order:9 !important}.ion-order-md-10{order:10 !important}.ion-order-md-11{order:11 !important}.ion-order-md-12{order:12 !important}.ion-order-md-last{order:13 !important}}@media(min-width: 992px){.ion-order-lg-first{order:-1 !important}.ion-order-lg-0{order:0 !important}.ion-order-lg-1{order:1 !important}.ion-order-lg-2{order:2 !important}.ion-order-lg-3{order:3 !important}.ion-order-lg-4{order:4 !important}.ion-order-lg-5{order:5 !important}.ion-order-lg-6{order:6 !important}.ion-order-lg-7{order:7 !important}.ion-order-lg-8{order:8 !important}.ion-order-lg-9{order:9 !important}.ion-order-lg-10{order:10 !important}.ion-order-lg-11{order:11 !important}.ion-order-lg-12{order:12 !important}.ion-order-lg-last{order:13 !important}}@media(min-width: 1200px){.ion-order-xl-first{order:-1 !important}.ion-order-xl-0{order:0 !important}.ion-order-xl-1{order:1 !important}.ion-order-xl-2{order:2 !important}.ion-order-xl-3{order:3 !important}.ion-order-xl-4{order:4 !important}.ion-order-xl-5{order:5 !important}.ion-order-xl-6{order:6 !important}.ion-order-xl-7{order:7 !important}.ion-order-xl-8{order:8 !important}.ion-order-xl-9{order:9 !important}.ion-order-xl-10{order:10 !important}.ion-order-xl-11{order:11 !important}.ion-order-xl-12{order:12 !important}.ion-order-xl-last{order:13 !important}}/*# sourceMappingURL=flex-utils.css.map */

package/css/flex-utils.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/css/flex-utils.scss","../src/themes/mixins.scss"],"names":[],"mappings":"AA0BM,yBACE,oCADF,uBACE,kCADF,0BACE,gCADF,2BACE,uCADF,0BACE,sCADF,2BACE,iCCgJJ,yBDjJE,4BACE,oCADF,0BACE,kCADF,6BACE,gCADF,8BACE,uCADF,6BACE,sCADF,8BACE,kCCgJJ,yBDjJE,4BACE,oCADF,0BACE,kCADF,6BACE,gCADF,8BACE,uCADF,6BACE,sCADF,8BACE,kCCgJJ,yBDjJE,4BACE,oCADF,0BACE,kCADF,6BACE,gCADF,8BACE,uCADF,6BACE,sCADF,8BACE,kCCgJJ,0BDjJE,4BACE,oCADF,0BACE,kCADF,6BACE,gCADF,8BACE,uCADF,6BACE,sCADF,8BACE,kCAeF,uBACE,6BADF,qBACE,2BADF,wBACE,8BADF,yBACE,+BADF,0BACE,gCCgIJ,yBDjIE,0BACE,6BADF,wBACE,2BADF,2BACE,8BADF,4BACE,+BADF,6BACE,iCCgIJ,yBDjIE,0BACE,6BADF,wBACE,2BADF,2BACE,8BADF,4BACE,+BADF,6BACE,iCCgIJ,yBDjIE,0BACE,6BADF,wBACE,2BADF,2BACE,8BADF,4BACE,+BADF,6BACE,iCCgIJ,0BDjIE,0BACE,6BADF,wBACE,2BADF,2BACE,8BADF,4BACE,+BADF,6BACE,iCAeF,sBACE,4BADF,oBACE,0BADF,uBACE,6BADF,wBACE,8BADF,yBACE,+BADF,qBACE,2BCgHJ,yBDjHE,yBACE,4BADF,uBACE,0BADF,0BACE,6BADF,2BACE,8BADF,4BACE,+BADF,wBACE,4BCgHJ,yBDjHE,yBACE,4BADF,uBACE,0BADF,0BACE,6BADF,2BACE,8BADF,4BACE,+BADF,wBACE,4BCgHJ,yBDjHE,yBACE,4BADF,uBACE,0BADF,0BACE,6BADF,2BACE,8BADF,4BACE,+BADF,wBACE,4BCgHJ,0BDjHE,yBACE,4BADF,uBACE,0BADF,0BACE,6BADF,2BACE,8BADF,4BACE,+BADF,wBACE,4BAsBF,2BACE,sCADF,yBACE,oCADF,4BACE,kCADF,6BACE,yCADF,4BACE,wCADF,4BACE,wCCyFJ,yBD1FE,8BACE,sCADF,4BACE,oCADF,+BACE,kCADF,gCACE,yCADF,+BACE,wCADF,+BACE,yCCyFJ,yBD1FE,8BACE,sCADF,4BACE,oCADF,+BACE,kCADF,gCACE,yCADF,+BACE,wCADF,+BACE,yCCyFJ,yBD1FE,8BACE,sCADF,4BACE,oCADF,+BACE,kCADF,gCACE,yCADF,+BACE,wCADF,+BACE,yCCyFJ,0BD1FE,8BACE,sCADF,4BACE,oCADF,+BACE,kCADF,gCACE,yCADF,+BACE,wCADF,+BACE,yCAeF,cACE,8BADF,sBACE,sCADF,iBACE,iCADF,yBACE,yCCyEJ,yBD1EE,iBACE,8BADF,yBACE,sCADF,oBACE,iCADF,4BACE,0CCyEJ,yBD1EE,iBACE,8BADF,yBACE,sCADF,oBACE,iCADF,4BACE,0CCyEJ,yBD1EE,iBACE,8BADF,yBACE,sCADF,oBACE,iCADF,4BACE,0CCyEJ,0BD1EE,iBACE,8BADF,yBACE,sCADF,oBACE,iCADF,4BACE,0CAeN,UACE,0BADF,YACE,4BADF,kBACE,kCAQE,eACE,0BADF,iBACE,4BADF,uBACE,kCCgDJ,yBDjDE,kBACE,0BADF,oBACE,4BADF,0BACE,mCCgDJ,yBDjDE,kBACE,0BADF,oBACE,4BADF,0BACE,mCCgDJ,yBDjDE,kBACE,0BADF,oBACE,4BADF,0BACE,mCCgDJ,0BDjDE,kBACE,0BADF,oBACE,4BADF,0BACE,mCAeF,YACE,kBADF,eACE,qBADF,kBACE,wBADF,eACE,qBCgCJ,yBDjCE,eACE,kBADF,kBACE,qBADF,qBACE,wBADF,kBACE,sBCgCJ,yBDjCE,eACE,kBADF,kBACE,qBADF,qBACE,wBADF,kBACE,sBCgCJ,yBDjCE,eACE,kBADF,kBACE,qBADF,qBACE,wBADF,kBACE,sBCgCJ,0BDjCE,eACE,kBADF,kBACE,qBADF,qBACE,wBADF,kBACE,sBAYJ,iBACE,uBAGF,iBACE,uBAGF,mBACE,yBAGF,mBACE,yBCOF,yBDpBA,oBACE,uBAGF,oBACE,uBAGF,sBACE,yBAGF,sBACE,0BCOF,yBDpBA,oBACE,uBAGF,oBACE,uBAGF,sBACE,yBAGF,sBACE,0BCOF,yBDpBA,oBACE,uBAGF,oBACE,uBAGF,sBACE,yBAGF,sBACE,0BCOF,0BDpBA,oBACE,uBAGF,oBACE,uBAGF,sBACE,yBAGF,sBACE,0BAWF,iBACE,oBAIA,aACE,mBADF,aACE,mBADF,aACE,mBADF,aACE,mBADF,aACE,mBADF,aACE,mBADF,aACE,mBADF,aACE,mBADF,aACE,mBADF,aACE,mBADF,cACE,oBADF,cACE,oBADF,cACE,oBAIJ,gBACE,oBCfF,yBDIA,oBACE,oBAIA,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,iBACE,oBADF,iBACE,oBADF,iBACE,oBAIJ,mBACE,qBCfF,yBDIA,oBACE,oBAIA,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,iBACE,oBADF,iBACE,oBADF,iBACE,oBAIJ,mBACE,qBCfF,yBDIA,oBACE,oBAIA,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,iBACE,oBADF,iBACE,oBADF,iBACE,oBAIJ,mBACE,qBCfF,0BDIA,oBACE,oBAIA,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,gBACE,mBADF,iBACE,oBADF,iBACE,oBADF,iBACE,oBAIJ,mBACE,qBAON,2BACE,iCAGF,mCACE,yCAGF,wBACE,8BAGF,gCACE,sCAKF,YACE","file":"flex-utils.css","sourcesContent":["@import \"../themes/native/native.globals\";\n@import \"../themes/mixins\";\n\n// Flex Utilities\n// ------------------------------------------------------------------\n// Provides utility classes to control flexbox layout, alignment,\n// and sizing of elements. Includes responsive variants for managing\n// flex direction, alignment, justification, wrapping, growth,\n// shrinking, and ordering at different breakpoints.\n\n// Align Content\n// ------------------------------------------------------------------\n\n$align-content-values: (\n  start: flex-start,\n  end: flex-end,\n  center: center,\n  between: space-between,\n  around: space-around,\n  stretch: stretch,\n);\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    @each $key, $value in $align-content-values {\n      .ion-align-content#{$infix}-#{$key} {\n        align-content: #{$value} !important;\n      }\n    }\n  }\n}\n\n// Align Items\n// ------------------------------------------------------------------\n\n$align-items-values: (start, end, center, stretch, baseline);\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    @each $value in $align-items-values {\n      .ion-align-items#{$infix}-#{$value} {\n        align-items: #{$value} !important;\n      }\n    }\n  }\n}\n\n// Align Self\n// ------------------------------------------------------------------\n\n$align-self-values: (start, end, center, stretch, baseline, auto);\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    @each $value in $align-self-values {\n      .ion-align-self#{$infix}-#{$value} {\n        align-self: #{$value} !important;\n      }\n    }\n  }\n}\n\n// Justify Content\n// ------------------------------------------------------------------\n\n$justify-content-values: (\n  start: flex-start,\n  end: flex-end,\n  center: center,\n  between: space-between,\n  around: space-around,\n  evenly: space-evenly,\n);\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    @each $key, $value in $justify-content-values {\n      .ion-justify-content#{$infix}-#{$key} {\n        justify-content: #{$value} !important;\n      }\n    }\n  }\n}\n\n// Flex Direction\n// ------------------------------------------------------------------\n\n$flex-direction-values: (row, row-reverse, column, column-reverse);\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    @each $value in $flex-direction-values {\n      .ion-flex#{$infix}-#{$value} {\n        flex-direction: #{$value} !important;\n      }\n    }\n  }\n}\n\n// Flex Wrap\n// ------------------------------------------------------------------\n\n$flex-wrap-values: (wrap, nowrap, wrap-reverse);\n\n@each $value in $flex-wrap-values {\n  // TODO(FW-6697): remove ion-wrap, ion-nowrap, ion-wrap-reverse\n  // in favor of the new ion-flex-wrap, ion-flex-nowrap, and\n  // ion-flex-wrap-reverse classes\n  .ion-#{$value} {\n    flex-wrap: #{$value} !important;\n  }\n}\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    @each $value in $flex-wrap-values {\n      .ion-flex#{$infix}-#{$value} {\n        flex-wrap: #{$value} !important;\n      }\n    }\n  }\n}\n\n// Flex Fill\n// ------------------------------------------------------------------\n\n$flex-fill-values: (1, auto, initial, none);\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    @each $value in $flex-fill-values {\n      .ion-flex#{$infix}-#{$value} {\n        flex: #{$value} !important;\n      }\n    }\n  }\n}\n\n// Flex Grow and Shrink\n// ------------------------------------------------------------------\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    .ion-flex#{$infix}-grow-0 {\n      flex-grow: 0 !important;\n    }\n\n    .ion-flex#{$infix}-grow-1 {\n      flex-grow: 1 !important;\n    }\n\n    .ion-flex#{$infix}-shrink-0 {\n      flex-shrink: 0 !important;\n    }\n\n    .ion-flex#{$infix}-shrink-1 {\n      flex-shrink: 1 !important;\n    }\n  }\n}\n\n// Flex Order\n// ------------------------------------------------------------------\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    .ion-order#{$infix}-first {\n      order: -1 !important;\n    }\n\n    @for $i from 0 through 12 {\n      .ion-order#{$infix}-#{$i} {\n        order: #{$i} !important;\n      }\n    }\n\n    .ion-order#{$infix}-last {\n      order: 13 !important;\n    }\n  }\n}\n\n// Flex Direction\n// --------------------------------------------------\n.ion-flex-direction-column {\n  flex-direction: column !important;\n}\n\n.ion-flex-direction-column-reverse {\n  flex-direction: column-reverse !important;\n}\n\n.ion-flex-direction-row {\n  flex-direction: row !important;\n}\n\n.ion-flex-direction-row-reverse {\n  flex-direction: row-reverse !important;\n}\n\n// Flex Container\n// --------------------------------------------------\n.ion-flex-1 {\n  flex: 1 !important;\n}\n","@use \"./functions.string\" as string;\n\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n@mixin tablet-viewport() {\n  @media screen and (min-width: 768px) {\n    @content;\n  }\n}\n\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n@mixin mobile-viewport() {\n  @media screen and (max-width: 767px) {\n    @content;\n  }\n}\n\n@mixin input-cover() {\n  @include position(0, null, null, 0);\n  @include margin(0);\n\n  position: absolute;\n\n  width: 100%;\n  height: 100%;\n\n  border: 0;\n\n  outline: none;\n\n  background: transparent;\n\n  cursor: pointer;\n\n  appearance: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n}\n\n@mixin visually-hidden() {\n  position: absolute;\n\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  width: 100%;\n  height: 100%;\n\n  margin: 0;\n\n  padding: 0;\n\n  border: 0;\n\n  outline: 0;\n\n  opacity: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n@mixin text-inherit() {\n  color: inherit;\n\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n\n  letter-spacing: inherit;\n\n  text-align: inherit;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n\n  white-space: inherit;\n}\n\n@mixin button-state() {\n  @include position(0, 0, 0, 0);\n\n  position: absolute;\n\n  content: \"\";\n\n  opacity: 0;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n  $keys: map-keys($map);\n\n  @return nth($keys, $index);\n}\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    576px\n@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {\n  $min: map-get($breakpoints, $name);\n\n  @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"\"  (Returns a blank string)\n//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {\n  @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n  $n: index($breakpoint-names, $name);\n\n  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n//\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\t// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\t// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    767.98px\n@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {\n  $max: map-get($breakpoints, $name);\n\n  @return if($max and $max > 0, $max - 0.02, null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n  @content;\n\n  // $root: #{&};\n  // @at-root [dir] {\n  //   #{$root} {\n  //     @content;\n  //   }\n  // }\n}\n\n@mixin rtl() {\n  $root: #{&};\n\n  $rootSplit: string.str-split($root, \",\");\n  $selectors: #{string.add-root-selector($root, \"[dir=rtl]\")};\n  $selectorsSplit: string.str-split($selectors, \",\");\n\n  $hostContextSelectors: ();\n  $restSelectors: ();\n  $dirSelectors: ();\n\n  // Selectors must be split into individual selectors in case the browser\n  // doesn't support a specific selector.\n  // For example, Firefox and Safari doesn't support `:host-context()`.\n  // If an invalid selector is used, then the entire group of selectors\n  // will be ignored.\n  // @link https://www.w3.org/TR/selectors-3/#grouping\n  @each $selector in $selectorsSplit {\n    // Group the selectors back into a single selector to optimize the output.\n    @if str-index($selector, \":host-context\") {\n      $hostContextSelectors: append($hostContextSelectors, $selector, comma);\n    } @else {\n      // Group the selectors back into a single selector to optimize the output.\n      $restSelectors: append($restSelectors, $selector, comma);\n    }\n  }\n\n  // Supported by Chrome.\n  @if length($hostContextSelectors) > 0 {\n    @at-root #{$hostContextSelectors} {\n      @content;\n    }\n  }\n\n  // Supported by all browsers.\n  @if length($restSelectors) > 0 {\n    @at-root #{$restSelectors} {\n      @content;\n    }\n  }\n\n  // If browser can support `:dir()`, then add the `:dir()` selectors.\n  @supports selector(:dir(rtl)) {\n    // Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.\n    // `:host-context()` is added:\n    // - through the `add-root-selector()` function.\n    // - first so that it takes precedence over `:dir()`.\n    // For example,\n    // - Firefox doesn't support `:host-context()`, but does support `:dir()`.\n    // - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`\n    // @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/\n    // -- However, there is a Webkit bug on v16 that prevents `:dir()` from working when\n    // -- the app direction is changed dynamically. v17+ works fine.\n    // -- @link https://bugs.webkit.org/show_bug.cgi?id=257133\n\n    // Supported by Firefox.\n    @at-root #{string.add-root-selector($root, \":dir(rtl)\", false)} {\n      @content;\n    }\n  }\n}\n\n@mixin ltr() {\n  @content;\n}\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n  $url: url-encode($svg);\n  $viewBox: string.str-split(string.str-extract($svg, \"viewBox='\", \"'\"), \" \");\n\n  @if $flip-rtl != true or $viewBox == null {\n    @include multi-dir() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n    }\n  } @else {\n    $transform: \"transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n    $flipped-url: $svg;\n    $flipped-url: string.str-replace($flipped-url, \"<path\", \"<path #{$transform}\");\n    $flipped-url: string.str-replace($flipped-url, \"<line\", \"<line #{$transform}\");\n    $flipped-url: string.str-replace($flipped-url, \"<polygon\", \"<polygon #{$transform}\");\n    $flipped-url: url-encode($flipped-url);\n\n    @include ltr() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n    }\n\n    @include rtl() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$flipped-url}\");\n    }\n  }\n}\n\n// Add property horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin property-horizontal($prop, $start, $end: $start) {\n  @if $start == 0 and $end == 0 {\n    #{$prop}-left: $start;\n    #{$prop}-right: $end;\n  } @else {\n    -webkit-#{$prop}-start: $start;\n    #{$prop}-inline-start: $start;\n    -webkit-#{$prop}-end: $end;\n    #{$prop}-inline-end: $end;\n  }\n}\n\n// Add property for all directions\n// @param {string} $prop\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// @param {boolean} $content include content or use default\n// ----------------------------------------------------------\n@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {\n  @include property-horizontal($prop, $start, $end);\n  #{$prop}-top: $top;\n  #{$prop}-bottom: $bottom;\n}\n\n// Add padding horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin padding-horizontal($start, $end: $start) {\n  @include property-horizontal(padding, $start, $end);\n}\n\n// Add padding for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(padding, $top, $end, $bottom, $start);\n}\n\n// Add margin horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin margin-horizontal($start, $end: $start) {\n  @include property-horizontal(margin, $start, $end);\n}\n\n// Add margin for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(margin, $top, $end, $bottom, $start);\n}\n\n// Add position horizontal\n// @param {string} $start - amount to position start\n// @param {string} $end - amount to left: 0; end\n// ----------------------------------------------------------\n@mixin position-horizontal($start: null, $end: null) {\n  @if $start == $end {\n    @include multi-dir() {\n      right: $end;\n      left: $start;\n    }\n  } @else {\n    @at-root {\n      & {\n        inset-inline-start: $start;\n        inset-inline-end: $end;\n      }\n    }\n  }\n}\n\n// Add position for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin position($top: null, $end: null, $bottom: null, $start: null) {\n  @include position-horizontal($start, $end);\n  top: $top;\n  bottom: $bottom;\n}\n\n// Add border for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin border($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(border, $top, $end, $bottom, $start);\n}\n\n// Add border radius for all directions\n// @param {string} $top-start\n// @param {string} $top-end\n// @param {string} $bottom-end\n// @param {string} $bottom-start\n// ----------------------------------------------------------\n@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {\n  @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {\n    border-radius: $top-start;\n  } @else {\n    border-start-start-radius: $top-start;\n    border-start-end-radius: $top-end;\n    border-end-end-radius: $bottom-end;\n    border-end-start-radius: $bottom-start;\n  }\n}\n\n// Add direction for all directions\n// @param {string} $dir - Direction on LTR\n@mixin direction($dir) {\n  $other-dir: null;\n\n  @if $dir == ltr {\n    $other-dir: rtl;\n  } @else {\n    $other-dir: ltr;\n  }\n\n  @include ltr() {\n    direction: $dir;\n  }\n\n  @include rtl() {\n    direction: $other-dir;\n  }\n}\n\n// Add float for all directions\n// @param {string} $side\n// @param {string} $decorator - !important\n@mixin float($side, $decorator: null) {\n  @if $side == start {\n    @include ltr() {\n      float: left $decorator;\n    }\n\n    @include rtl() {\n      float: right $decorator;\n    }\n  } @else if $side == end {\n    @include ltr() {\n      float: right $decorator;\n    }\n\n    @include rtl() {\n      float: left $decorator;\n    }\n  } @else {\n    @include multi-dir() {\n      float: $side $decorator;\n    }\n  }\n}\n\n@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {\n  @if $horizontal == start or $horizontal == end {\n    $horizontal-ltr: null;\n    $horizontal-rtl: null;\n\n    @if $horizontal == start {\n      $horizontal-ltr: left;\n      $horizontal-rtl: right;\n    } @else {\n      $horizontal-ltr: right;\n      $horizontal-rtl: left;\n    }\n\n    @include ltr() {\n      background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;\n    }\n\n    @include rtl() {\n      background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;\n    }\n  } @else {\n    @include multi-dir() {\n      background-position: $horizontal $horizontal-amount $vertical $vertical-amount;\n    }\n  }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n  @if $x-axis == start {\n    @include ltr() {\n      transform-origin: left $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: right $y-axis;\n    }\n  } @else if $x-axis == end {\n    @include ltr() {\n      transform-origin: right $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: left $y-axis;\n    }\n  } @else if $x-axis == left or $x-axis == right {\n    @include multi-dir() {\n      transform-origin: $x-axis $y-axis;\n    }\n  } @else {\n    @include ltr() {\n      transform-origin: $x-axis $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: calc(100% - #{$x-axis}) $y-axis;\n    }\n  }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n  $extra: null;\n\n  $x: null;\n  $ltr-translate: null;\n  $rtl-translate: null;\n\n  @each $transform in $transforms {\n    @if (str-index($transform, translate3d)) {\n      $transform: string.str-replace($transform, \"translate3d(\");\n      $transform: string.str-replace($transform, \")\");\n\n      $coordinates: string.str-split($transform, \",\");\n\n      $x: nth($coordinates, 1);\n      $y: nth($coordinates, 2);\n      $z: nth($coordinates, 3);\n\n      $ltr-translate: translate3d($x, $y, $z);\n      $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n    } @else {\n      @if $extra == null {\n        $extra: $transform;\n      } @else {\n        $extra: $extra $transform;\n      }\n    }\n  }\n\n  @if $x == \"0\" or $x == null {\n    @include multi-dir() {\n      transform: $ltr-translate $extra;\n    }\n  } @else {\n    @include ltr() {\n      transform: $ltr-translate $extra;\n    }\n\n    @include rtl() {\n      transform: $rtl-translate $extra;\n    }\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../src/css/flex-utils.scss","../src/themes/ionic.mixins.scss"],"names":[],"mappings":"AA0BM,yBACE,oCADF,uBACE,kCADF,0BACE,gCADF,2BACE,uCADF,0BACE,sCADF,2BACE,iCCsIJ,yBDvIE,4BACE,oCADF,0BACE,kCADF,6BACE,gCADF,8BACE,uCADF,6BACE,sCADF,8BACE,kCCsIJ,yBDvIE,4BACE,oCADF,0BACE,kCADF,6BACE,gCADF,8BACE,uCADF,6BACE,sCADF,8BACE,kCCsIJ,yBDvIE,4BACE,oCADF,0BACE,kCADF,6BACE,gCADF,8BACE,uCADF,6BACE,sCADF,8BACE,kCCsIJ,0BDvIE,4BACE,oCADF,0BACE,kCADF,6BACE,gCADF,8BACE,uCADF,6BACE,sCADF,8BACE,kCAqBF,uBACE,6BADF,qBACE,2BADF,wBACE,8BADF,yBACE,+BADF,0BACE,gCCgHJ,yBDjHE,0BACE,6BADF,wBACE,2BADF,2BACE,8BADF,4BACE,+BADF,6BACE,iCCgHJ,yBDjHE,0BACE,6BADF,wBACE,2BADF,2BACE,8BADF,4BACE,+BADF,6BACE,iCCgHJ,yBDjHE,0BACE,6BADF,wBACE,2BADF,2BACE,8BADF,4BACE,+BADF,6BACE,iCCgHJ,0BDjHE,0BACE,6BADF,wBACE,2BADF,2BACE,8BADF,4BACE,+BADF,6BACE,iCAsBF,sBACE,4BADF,oBACE,0BADF,uBACE,6BADF,wBACE,8BADF,yBACE,+BADF,qBACE,2BCyFJ,yBD1FE,yBACE,4BADF,uBACE,0BADF,0BACE,6BADF,2BACE,8BADF,4BACE,+BADF,wBACE,4BCyFJ,yBD1FE,yBACE,4BADF,uBACE,0BADF,0BACE,6BADF,2BACE,8BADF,4BACE,+BADF,wBACE,4BCyFJ,yBD1FE,yBACE,4BADF,uBACE,0BADF,0BACE,6BADF,2BACE,8BADF,4BACE,+BADF,wBACE,4BCyFJ,0BD1FE,yBACE,4BADF,uBACE,0BADF,0BACE,6BADF,2BACE,8BADF,4BACE,+BADF,wBACE,4BAsBF,2BACE,sCADF,yBACE,oCADF,4BACE,kCADF,6BACE,yCADF,4BACE,wCADF,4BACE,wCCkEJ,yBDnEE,8BACE,sCADF,4BACE,oCADF,+BACE,kCADF,gCACE,yCADF,+BACE,wCADF,+BACE,yCCkEJ,yBDnEE,8BACE,sCADF,4BACE,oCADF,+BACE,kCADF,gCACE,yCADF,+BACE,wCADF,+BACE,yCCkEJ,yBDnEE,8BACE,sCADF,4BACE,oCADF,+BACE,kCADF,gCACE,yCADF,+BACE,wCADF,+BACE,yCCkEJ,0BDnEE,8BACE,sCADF,4BACE,oCADF,+BACE,kCADF,gCACE,yCADF,+BACE,wCADF,+BACE,yCAoBF,cACE,8BADF,sBACE,sCADF,iBACE,iCADF,yBACE,yCC6CJ,yBD9CE,iBACE,8BADF,yBACE,sCADF,oBACE,iCADF,4BACE,0CC6CJ,yBD9CE,iBACE,8BADF,yBACE,sCADF,oBACE,iCADF,4BACE,0CC6CJ,yBD9CE,iBACE,8BADF,yBACE,sCADF,oBACE,iCADF,4BACE,0CC6CJ,0BD9CE,iBACE,8BADF,yBACE,sCADF,oBACE,iCADF,4BACE,0CAmBN,UACE,0BADF,YACE,4BADF,kBACE,kCAQE,eACE,0BADF,iBACE,4BADF,uBACE,kCCgBJ,yBDjBE,kBACE,0BADF,oBACE,4BADF,0BACE,mCCgBJ,yBDjBE,kBACE,0BADF,oBACE,4BADF,0BACE,mCCgBJ,yBDjBE,kBACE,0BADF,oBACE,4BADF,0BACE,mCCgBJ,0BDjBE,kBACE,0BADF,oBACE,4BADF,0BACE,mCAoBF,YACE,kBADF,eACE,qBADF,kBACE,wBADF,eACE,qBCLJ,yBDIE,eACE,kBADF,kBACE,qBADF,qBACE,wBADF,kBACE,sBCLJ,yBDIE,eACE,kBADF,kBACE,qBADF,qBACE,wBADF,kBACE,sBCLJ,yBDIE,eACE,kBADF,kBACE,qBADF,qBACE,wBADF,kBACE,sBCLJ,0BDIE,eACE,kBADF,kBACE,qBADF,qBACE,wBADF,kBACE,sBAYJ,iBACE,uBAGF,iBACE,uBAGF,mBACE,yBAGF,mBACE,yBC9BF,yBDiBA,oBACE,uBAGF,oBACE,uBAGF,sBACE,yBAGF,sBACE,0BC9BF,yBDiBA,oBACE,uBAGF,oBACE,uBAGF,sBACE,yBAGF,sBACE,0BC9BF,yBDiBA,oBACE,uBAGF,oBACE,uBAGF,sBACE,yBAGF,sBACE,0BC9BF,0BDiBA,oBACE,uBAGF,oBACE,uBAGF,sBACE,yBAGF,sBACE,0BAWF,qCAGE,saAGF,oCC/CA,yBDyCA,wCAGE,6cAGF,wCC/CA,yBDyCA,wCAGE,6cAGF,wCC/CA,yBDyCA,wCAGE,6cAGF,wCC/CA,0BDyCA,wCAGE,6cAGF","file":"flex-utils.css","sourcesContent":["@import \"../themes/ionic.globals\";\n@import \"../themes/ionic.mixins\";\n\n// Flex Utilities\n// ------------------------------------------------------------------\n// Provides utility classes to control flexbox layout, alignment,\n// and sizing of elements. Includes responsive variants for managing\n// flex direction, alignment, justification, wrapping, growth,\n// shrinking, and ordering at different breakpoints.\n\n// Align Content\n// ------------------------------------------------------------------\n\n$align-content-values: (\n  start: flex-start,\n  end: flex-end,\n  center: center,\n  between: space-between,\n  around: space-around,\n  stretch: stretch\n);\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    @each $key, $value in $align-content-values {\n      .ion-align-content#{$infix}-#{$key} {\n        align-content: #{$value} !important;\n      }\n    }\n  }\n}\n\n// Align Items\n// ------------------------------------------------------------------\n\n$align-items-values: (\n  start,\n  end,\n  center,\n  stretch,\n  baseline\n);\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    @each $value in $align-items-values {\n      .ion-align-items#{$infix}-#{$value} {\n        align-items: #{$value} !important;\n      }\n    }\n  }\n}\n\n// Align Self\n// ------------------------------------------------------------------\n\n$align-self-values: (\n  start,\n  end,\n  center,\n  stretch,\n  baseline,\n  auto\n);\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    @each $value in $align-self-values {\n      .ion-align-self#{$infix}-#{$value} {\n        align-self: #{$value} !important;\n      }\n    }\n  }\n}\n\n// Justify Content\n// ------------------------------------------------------------------\n\n$justify-content-values: (\n  start: flex-start,\n  end: flex-end,\n  center: center,\n  between: space-between,\n  around: space-around,\n  evenly: space-evenly\n);\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    @each $key, $value in $justify-content-values {\n      .ion-justify-content#{$infix}-#{$key} {\n        justify-content: #{$value} !important;\n      }\n    }\n  }\n}\n\n// Flex Direction\n// ------------------------------------------------------------------\n\n$flex-direction-values: (\n  row,\n  row-reverse,\n  column,\n  column-reverse\n);\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    @each $value in $flex-direction-values {\n      .ion-flex#{$infix}-#{$value} {\n        flex-direction: #{$value} !important;\n      }\n    }\n  }\n}\n\n// Flex Wrap\n// ------------------------------------------------------------------\n\n$flex-wrap-values: (\n  wrap,\n  nowrap,\n  wrap-reverse\n);\n\n@each $value in $flex-wrap-values {\n  // TODO(FW-6697): remove ion-wrap, ion-nowrap, ion-wrap-reverse\n  // in favor of the new ion-flex-wrap, ion-flex-nowrap, and\n  // ion-flex-wrap-reverse classes\n  .ion-#{$value} {\n    flex-wrap: #{$value} !important;\n  }\n}\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    @each $value in $flex-wrap-values {\n      .ion-flex#{$infix}-#{$value} {\n        flex-wrap: #{$value} !important;\n      }\n    }\n  }\n}\n\n// Flex Fill\n// ------------------------------------------------------------------\n\n$flex-fill-values: (\n  1,\n  auto,\n  initial,\n  none\n);\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    @each $value in $flex-fill-values {\n      .ion-flex#{$infix}-#{$value} {\n        flex: #{$value} !important;\n      }\n    }\n  }\n}\n\n// Flex Grow and Shrink\n// ------------------------------------------------------------------\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    .ion-flex#{$infix}-grow-0 {\n      flex-grow: 0 !important;\n    }\n\n    .ion-flex#{$infix}-grow-1 {\n      flex-grow: 1 !important;\n    }\n\n    .ion-flex#{$infix}-shrink-0 {\n      flex-shrink: 0 !important;\n    }\n\n    .ion-flex#{$infix}-shrink-1 {\n      flex-shrink: 1 !important;\n    }\n  }\n}\n\n// Flex Order\n// ------------------------------------------------------------------\n\n@each $breakpoint in map-keys($screen-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);\n  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {\n    .ion-order#{$infix}-first { order: -1 !important; }\n\n    @for $i from 0 through 12 {\n      .ion-order#{$infix}-#{$i} { order: #{$i} !important; }\n    }\n\n    .ion-order#{$infix}-last { order: 13 !important; }\n  }\n}\n","\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n@mixin tablet-viewport() {\n  @media screen and (min-width: 768px) {\n    @content;\n  }\n}\n\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n@mixin mobile-viewport() {\n  @media screen and (max-width: 767px) {\n    @content;\n  }\n}\n\n@mixin input-cover() {\n  @include position(0, null, null, 0);\n  @include margin(0);\n\n  position: absolute;\n\n  width: 100%;\n  height: 100%;\n\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n\n  appearance: none;\n  outline: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n}\n\n@mixin visually-hidden() {\n  position: absolute;\n\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n\n  width: 100%;\n  height: 100%;\n\n  margin: 0;\n  padding: 0;\n\n  border: 0;\n  outline: 0;\n  clip: rect(0 0 0 0);\n\n  opacity: 0;\n  overflow: hidden;\n\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n@mixin text-inherit() {\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n}\n\n@mixin button-state() {\n  @include position(0, 0, 0, 0);\n\n  position: absolute;\n\n  content: \"\";\n\n  opacity: 0;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n  $keys: map-keys($map);\n\n  @return nth($keys, $index);\n}\n\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    576px\n@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {\n  $min: map-get($breakpoints, $name);\n\n  @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"\"  (Returns a blank string)\n//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {\n  @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n  $n: index($breakpoint-names, $name);\n  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n//\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\t// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\t// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    767.98px\n@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {\n  $max: map-get($breakpoints, $name);\n  @return if($max and $max > 0, $max - .02, null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n  @content;\n\n  // $root: #{&};\n  // @at-root [dir] {\n  //   #{$root} {\n  //     @content;\n  //   }\n  // }\n}\n\n@mixin rtl() {\n  $root: #{&};\n\n  $rootSplit: str-split($root, \",\");\n  $selectors: #{add-root-selector($root, \"[dir=rtl]\")};\n  $selectorsSplit: str-split($selectors, \",\");\n\n  $hostContextSelectors: ();\n  $restSelectors: ();\n  $dirSelectors: ();\n\n  // Selectors must be split into individual selectors in case the browser\n  // doesn't support a specific selector.\n  // For example, Firefox and Safari doesn't support `:host-context()`.\n  // If an invalid selector is used, then the entire group of selectors\n  // will be ignored.\n  // @link https://www.w3.org/TR/selectors-3/#grouping\n  @each $selector in $selectorsSplit {\n    // Group the selectors back into a single selector to optimize the output.\n    @if str-index($selector, \":host-context\") {\n      $hostContextSelectors: append($hostContextSelectors, $selector, comma);\n    } @else {\n      // Group the selectors back into a single selector to optimize the output.\n      $restSelectors: append($restSelectors, $selector, comma);\n    }\n  }\n\n  // Supported by Chrome.\n  @if length($hostContextSelectors) > 0 {\n    @at-root #{$hostContextSelectors} {\n      @content;\n    }\n  }\n\n  // Supported by all browsers.\n  @if length($restSelectors) > 0 {\n    @at-root #{$restSelectors} {\n      @content;\n    }\n  }\n\n  // If browser can support `:dir()`, then add the `:dir()` selectors.\n  @supports selector(:dir(rtl)) {\n    // Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.\n    // `:host-context()` is added:\n    // - through the `add-root-selector()` function.\n    // - first so that it takes precedence over `:dir()`.\n    // For example,\n    // - Firefox doesn't support `:host-context()`, but does support `:dir()`.\n    // - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`\n    // @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/\n    // -- However, there is a Webkit bug on v16 that prevents `:dir()` from working when\n    // -- the app direction is changed dynamically. v17+ works fine.\n    // -- @link https://bugs.webkit.org/show_bug.cgi?id=257133\n\n    // Supported by Firefox.\n    @at-root #{add-root-selector($root, \":dir(rtl)\", false)} {\n      @content;\n    }\n  }\n}\n\n@mixin ltr() {\n  @content;\n}\n\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n  $url: url-encode($svg);\n  $viewBox: str-split(str-extract($svg, \"viewBox='\", \"'\"), \" \");\n\n  @if $flip-rtl != true or $viewBox == null {\n    @include multi-dir() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n    }\n  } @else {\n    $transform: \"transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n    $flipped-url: $svg;\n    $flipped-url: str-replace($flipped-url, \"<path\", \"<path #{$transform}\");\n    $flipped-url: str-replace($flipped-url, \"<line\", \"<line #{$transform}\");\n    $flipped-url: str-replace($flipped-url, \"<polygon\", \"<polygon #{$transform}\");\n    $flipped-url: url-encode($flipped-url);\n\n    @include ltr () {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n    }\n    @include rtl() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$flipped-url}\");\n    }\n  }\n}\n\n// Add property horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin property-horizontal($prop, $start, $end: $start) {\n  @if $start == 0 and $end == 0 {\n    #{$prop}-left: $start;\n    #{$prop}-right: $end;\n\n  } @else {\n    -webkit-#{$prop}-start: $start;\n    #{$prop}-inline-start: $start;\n    -webkit-#{$prop}-end: $end;\n    #{$prop}-inline-end: $end;\n  }\n}\n\n// Add property for all directions\n// @param {string} $prop\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// @param {boolean} $content include content or use default\n// ----------------------------------------------------------\n@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {\n  @include property-horizontal($prop, $start, $end);\n  #{$prop}-top: $top;\n  #{$prop}-bottom: $bottom;\n}\n\n// Add padding horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin padding-horizontal($start, $end: $start) {\n  @include property-horizontal(padding, $start, $end);\n}\n\n// Add padding for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(padding, $top, $end, $bottom, $start);\n}\n\n// Add margin horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin margin-horizontal($start, $end: $start) {\n  @include property-horizontal(margin, $start, $end);\n}\n\n// Add margin for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(margin, $top, $end, $bottom, $start);\n}\n\n// Add position horizontal\n// @param {string} $start - amount to position start\n// @param {string} $end - amount to left: 0; end\n// ----------------------------------------------------------\n@mixin position-horizontal($start: null, $end: null) {\n  @if $start == $end {\n    @include multi-dir() {\n      left: $start;\n      right: $end;\n    }\n  } @else {\n    @at-root {\n      & {\n        inset-inline-start: $start;\n        inset-inline-end: $end;\n      }\n    }\n  }\n}\n\n// Add position for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin position($top: null, $end: null, $bottom: null, $start: null) {\n  @include position-horizontal($start, $end);\n  top: $top;\n  bottom: $bottom;\n}\n\n// Add border for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin border($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(border, $top, $end, $bottom, $start);\n}\n\n// Add border radius for all directions\n// @param {string} $top-start\n// @param {string} $top-end\n// @param {string} $bottom-end\n// @param {string} $bottom-start\n// ----------------------------------------------------------\n@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {\n  @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {\n    border-radius: $top-start;\n  } @else {\n    border-start-start-radius: $top-start;\n    border-start-end-radius: $top-end;\n    border-end-end-radius: $bottom-end;\n    border-end-start-radius: $bottom-start;\n  }\n}\n\n// Add direction for all directions\n// @param {string} $dir - Direction on LTR\n@mixin direction($dir) {\n  $other-dir: null;\n\n  @if $dir == ltr {\n    $other-dir: rtl;\n  } @else {\n    $other-dir: ltr;\n  }\n\n  @include ltr() {\n    direction: $dir;\n  }\n  @include rtl() {\n    direction: $other-dir;\n  }\n}\n\n// Add float for all directions\n// @param {string} $side\n// @param {string} $decorator - !important\n@mixin float($side, $decorator: null) {\n  @if $side == start {\n    @include ltr() {\n      float: left $decorator;\n    }\n    @include rtl() {\n      float: right $decorator;\n    }\n  } @else if $side == end {\n    @include ltr() {\n      float: right $decorator;\n    }\n    @include rtl() {\n      float: left $decorator;\n    }\n  } @else {\n    @include multi-dir() {\n      float: $side $decorator;\n    }\n  }\n}\n\n@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {\n  @if $horizontal == start or $horizontal == end {\n    $horizontal-ltr: null;\n    $horizontal-rtl: null;\n    @if $horizontal == start {\n      $horizontal-ltr: left;\n      $horizontal-rtl: right;\n    } @else {\n      $horizontal-ltr: right;\n      $horizontal-rtl: left;\n    }\n\n    @include ltr() {\n      background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;\n    }\n    @include rtl() {\n      background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;\n    }\n  } @else {\n    @include multi-dir() {\n      background-position: $horizontal $horizontal-amount $vertical $vertical-amount;\n    }\n  }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n  @if $x-axis == start {\n    @include ltr() {\n      transform-origin: left $y-axis;\n    }\n    @include rtl() {\n      transform-origin: right $y-axis;\n    }\n  } @else if $x-axis == end {\n    @include ltr() {\n      transform-origin: right $y-axis;\n    }\n    @include rtl() {\n      transform-origin: left $y-axis;\n    }\n  } @else if $x-axis == left or $x-axis == right {\n    @include multi-dir() {\n      transform-origin: $x-axis $y-axis;\n    }\n  } @else {\n    @include ltr() {\n      transform-origin: $x-axis $y-axis;\n    }\n    @include rtl() {\n      transform-origin: calc(100% - #{$x-axis}) $y-axis;\n    }\n  }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n  $extra: null;\n\n  $x: null;\n  $ltr-translate: null;\n  $rtl-translate: null;\n\n  @each $transform in $transforms {\n    @if (str-index($transform, translate3d)) {\n      $transform: str-replace($transform, 'translate3d(');\n      $transform: str-replace($transform, ')');\n\n      $coordinates: str-split($transform, ',');\n\n      $x: nth($coordinates, 1);\n      $y: nth($coordinates, 2);\n      $z: nth($coordinates, 3);\n\n      $ltr-translate: translate3d($x, $y, $z);\n      $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n    } @else {\n      @if $extra == null {\n        $extra: $transform;\n      } @else {\n        $extra: $extra $transform;\n      }\n    }\n  }\n\n  @if $x == '0' or $x == null {\n    @include multi-dir() {\n      transform: $ltr-translate $extra;\n    }\n  } @else {\n    @include ltr() {\n      transform: $ltr-translate $extra;\n    }\n\n    @include rtl() {\n      transform: $rtl-translate $extra;\n    }\n  }\n}\n"]}