/**
 * Convert a pixels given value into rem
 * 
 * @param pixels - Value in pixels to be converted (i.e. px)
 * @param context (optional) - Baseline value
 */
/**
 * Convert a font size to a dynamic font size.
 * Fonts that participate in Dynamic Type should use
 * dynamic font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param unit (optional) - The unit to convert to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a maximum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a minimum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * maximum and minimum font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * A heuristic that applies CSS to tablet
 * viewports.
 *
 * Usage:
 * @include tablet-viewport() {
 *   :host {
 *     background-color: green;
 *   }
 * }
 */
/**
 * A heuristic that applies CSS to mobile
 * viewports (i.e. phones, not tablets).
 *
 * Usage:
 * @include mobile-viewport() {
 *   :host {
 *     background-color: blue;
 *   }
 * }
 */
/**
 * Convert a pixels given value into rem
 * 
 * @param pixels - Value in pixels to be converted (i.e. px)
 * @param context (optional) - Baseline value
 */
/**
 * Convert a font size to a dynamic font size.
 * Fonts that participate in Dynamic Type should use
 * dynamic font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param unit (optional) - The unit to convert to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a maximum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a minimum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * maximum and minimum font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * A heuristic that applies CSS to tablet
 * viewports.
 *
 * Usage:
 * @include tablet-viewport() {
 *   :host {
 *     background-color: green;
 *   }
 * }
 */
/**
 * A heuristic that applies CSS to mobile
 * viewports (i.e. phones, not tablets).
 *
 * Usage:
 * @include mobile-viewport() {
 *   :host {
 *     background-color: blue;
 *   }
 * }
 */
/**
 * Convert a pixels given value into rem
 * 
 * @param pixels - Value in pixels to be converted (i.e. px)
 * @param context (optional) - Baseline value
 */
/**
 * Convert a font size to a dynamic font size.
 * Fonts that participate in Dynamic Type should use
 * dynamic font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param unit (optional) - The unit to convert to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a maximum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a minimum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * maximum and minimum font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * A heuristic that applies CSS to tablet
 * viewports.
 *
 * Usage:
 * @include tablet-viewport() {
 *   :host {
 *     background-color: green;
 *   }
 * }
 */
/**
 * A heuristic that applies CSS to mobile
 * viewports (i.e. phones, not tablets).
 *
 * Usage:
 * @include mobile-viewport() {
 *   :host {
 *     background-color: blue;
 *   }
 * }
 */
/**
 * Convert a pixels given value into rem
 * 
 * @param pixels - Value in pixels to be converted (i.e. px)
 * @param context (optional) - Baseline value
 */
/**
 * Convert a font size to a dynamic font size.
 * Fonts that participate in Dynamic Type should use
 * dynamic font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param unit (optional) - The unit to convert to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a maximum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a minimum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * maximum and minimum font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * A heuristic that applies CSS to tablet
 * viewports.
 *
 * Usage:
 * @include tablet-viewport() {
 *   :host {
 *     background-color: green;
 *   }
 * }
 */
/**
 * A heuristic that applies CSS to mobile
 * viewports (i.e. phones, not tablets).
 *
 * Usage:
 * @include mobile-viewport() {
 *   :host {
 *     background-color: blue;
 *   }
 * }
 */
:host {
  position: absolute;
  width: fit-content;
  height: fit-content;
  z-index: 999;
}

:host(.fab-horizontal-center) {
  right: 0px;
  left: 0px;
  -webkit-margin-start: auto;
  margin-inline-start: auto;
  -webkit-margin-end: auto;
  margin-inline-end: auto;
}

:host(.fab-horizontal-start) {
  /* stylelint-disable */
  left: calc(10px + var(--ion-safe-area-left, 0px));
  /* stylelint-enable */
}
:host-context([dir=rtl]):host(.fab-horizontal-start), :host-context([dir=rtl]).fab-horizontal-start {
  right: calc(10px + var(--ion-safe-area-right, 0px));
  left: unset;
}

@supports selector(:dir(rtl)) {
  :host(.fab-horizontal-start:dir(rtl)) {
    right: calc(10px + var(--ion-safe-area-right, 0px));
    left: unset;
  }
}

:host(.fab-horizontal-end) {
  /* stylelint-disable */
  right: calc(10px + var(--ion-safe-area-right, 0px));
  /* stylelint-enable */
}
:host-context([dir=rtl]):host(.fab-horizontal-end), :host-context([dir=rtl]).fab-horizontal-end {
  left: calc(10px + var(--ion-safe-area-left, 0px));
  right: unset;
}

@supports selector(:dir(rtl)) {
  :host(.fab-horizontal-end:dir(rtl)) {
    left: calc(10px + var(--ion-safe-area-left, 0px));
    right: unset;
  }
}

:host(.fab-vertical-top) {
  top: 10px;
}

/**
 * Reset the top value since edge
 * styles use margin-top.
 */
:host(.fab-vertical-top.fab-edge) {
  top: 0;
}

/**
 * We need to adjust the parent FAB button up by half
 * its height so that half of it sits on the header. As a result,
 * we target the slotted ion-fab-button instead of targeting the host.
 */
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button) {
  margin-top: -50%;
}

/**
 * The small FAB button adds top and bottom margin. We need to account for
 * that margin when we adjust the FAB button for edge styles since we
 * are overriding the margin-top value below.
 */
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button.fab-button-small) {
  margin-top: calc((-100% + 16px) / 2);
}

/**
 * Since we are adjusting the FAB button we also need
 * to adjust the sibling ion-fab-list otherwise there will be
 * a gap between the parent FAB button and the associated list.
 */
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-end) {
  margin-top: -50%;
}

:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),
:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom) {
  margin-top: calc(50% + 10px);
}

:host(.fab-vertical-bottom) {
  bottom: 10px;
}

/**
 * Reset the bottom value since edge
 * styles use margin-bottom.
 */
:host(.fab-vertical-bottom.fab-edge) {
  bottom: 0;
}

/**
 * We need to adjust the parent FAB button down by half
 * its height so that half of it sits on the footer. As a result,
 * we target the slotted ion-fab-button instead of targeting the host.
 */
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button) {
  margin-bottom: -50%;
}

/**
 * The small FAB button adds top and bottom margin. We need to account for
 * that margin when we adjust the FAB button for edge styles since we
 * are overriding the margin-bottom value below.
 */
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button.fab-button-small) {
  margin-bottom: calc((-100% + 16px) / 2);
}

/**
 * Since we are adjusting the FAB button we also need
 * to adjust the sibling ion-fab-list otherwise there will be
 * a gap between the parent FAB button and the associated list.
 */
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-end) {
  margin-bottom: -50%;
}

:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),
:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom) {
  margin-bottom: calc(50% + 10px);
}

:host(.fab-vertical-center) {
  top: 0px;
  bottom: 0px;
  margin-top: auto;
  margin-bottom: auto;
}