/**
 * 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 {
  --width: 54px;
  --height: 54px;
  --bar-width: 12px;
  --inner-width: calc(var(--width) / 2 - var(--bar-width));
  --bar-color: var(--cpsl-color-foreground-0);
  --background-color: var(--cpsl-color-background-0);
  width: var(--width);
  height: var(--height);
  display: flex;
  justify-content: center;
  align-items: center;
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
:host .loader {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  opacity: 1;
  background: conic-gradient(transparent, transparent 12%, var(--bar-color));
  border-radius: 50%;
  margin: auto;
  animation: spin 0.8s cubic-bezier(0.3, 0.5, 0.5, 0.5) infinite, opacity 0.2s;
  mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) var(--inner-width), black var(--inner-width));
}
:host .loader::before {
  content: "";
  position: absolute;
  border-radius: inherit;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(to left, var(--bar-color) 50%, transparent 50%);
  width: var(--bar-width);
  aspect-ratio: 1;
  animation: opacity 0.2s;
}
:host .loader.error {
  background: var(--cpsl-color-utility-red);
  animation: opacity 0.2s;
}
:host .loader.error::before {
  opacity: 0;
}
:host .loader.inactive {
  opacity: 0;
  animation: none;
}
:host .loader.inactive::before {
  opacity: 0;
}