/**
 * 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 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.
 */
.action-sheet-button-label-has-rich-content,
.alert-radio-label-has-rich-content,
.alert-checkbox-label-has-rich-content,
.select-option-label-has-rich-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

/**
 * Outer label container has rich content
 * (start, content, description, end) that needs the
 * label to span the available row width.
 */
.action-sheet-button-label-has-rich-content,
.alert-radio-label-has-rich-content,
.alert-checkbox-label-has-rich-content,
.select-option-content {
  flex: 1;
}

.action-sheet-button-label-text,
.alert-checkbox-label-text,
.alert-radio-label-text,
.select-option-label-text {
  display: flex;
  align-items: center;
  gap: 12px;
}

.select-option-start,
.select-option-end {
  display: flex;
  align-items: center;
  gap: 8px;
}

.select-option-description {
  padding-left: 0;
  padding-right: 0;
  padding-top: 5px;
  padding-bottom: 0;
  display: block;
  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
  font-size: 0.75rem;
}

/**
 * Non-rich labels are plain text and should ellipsize when they
 * overflow the row. Rich-content labels switch to flex so the
 * start / content / end pieces can lay out side-by-side and wrap.
 */
.select-option-label:not(.select-option-label-has-rich-content) {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.select-option-label-has-rich-content {
  display: flex;
  align-items: center;
}

ion-radio.select-option-has-rich-content::part(label),
ion-checkbox.select-option-has-rich-content::part(label),
.select-option-content {
  flex: 1;
  /**
   * Let rich content wrap instead of inheriting the label part's
   * single-line truncation, so arbitrary slotted elements render
   * without clipping.
   */
  white-space: normal;
}

/**
 * Cap slotted children so they can't stretch the option
 * row out of proportion, keeping rows visually uniform
 * regardless of the content.
 */
.select-option-start > ion-avatar,
.select-option-end > ion-avatar {
  width: 40px;
  height: 40px;
}

.select-option-start > ion-icon,
.select-option-end > ion-icon {
  font-size: 24px;
}

.select-option-start > ion-img,
.select-option-start > img,
.select-option-start > svg,
.select-option-start > ion-thumbnail,
.select-option-end > ion-img,
.select-option-end > img,
.select-option-end > svg,
.select-option-end > ion-thumbnail {
  width: 56px;
  height: 56px;
}

.select-option-start > video,
.select-option-end > video {
  width: 114px;
  height: 56px;
}

/**
 * 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 ion-list {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}

ion-list-header,
ion-label {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/**
 * The main content inside of a popover has overflow: hidden
 * so that a descendant ion-content can be scrolled.
 * However, select-popover does not use ion-content so we need
 * to explicitly make this container scrollable.
 */
:host {
  overflow-y: auto;
}

/**
 * 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 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;
 *   }
 * }
 */
ion-list ion-radio::part(container) {
  display: none;
}

ion-list ion-radio::part(label) {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}

ion-item {
  --inner-border-width: 0;
}

.item-radio-checked {
  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);
  --background-focused: var(--ion-color-primary, #0054e9);
  --background-focused-opacity: 0.2;
  --background-hover: var(--ion-color-primary, #0054e9);
  --background-hover-opacity: 0.12;
}

.item-checkbox-checked {
  --background-activated: var(--ion-item-color, var(--ion-text-color, #000));
  --background-focused: var(--ion-item-color, var(--ion-text-color, #000));
  --background-hover: var(--ion-item-color, var(--ion-text-color, #000));
  --color: var(--ion-color-primary, #0054e9);
}