* {
  box-sizing: border-box;
}

*:active {
  outline: none;
}

*:focus-visible {
  outline: none;
  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
}

:host {
  box-shadow: none !important;
}

::-moz-focus-inner {
  border: none;
}

input,
textarea,
button {
  font-family: inherit;
  font-size: inherit;
  font-stretch: inherit;
}

:host(.sr),
:host(.sr) button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.sr,
.sr button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.hidden {
  display: none;
}

:host([hidden]) {
  display: none;
}

.invisible {
  visibility: hidden;
}

@container style(--t-prefers-motion: "reduced") {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }
}
@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      animation-delay: 0ms !important;
      transition-delay: 0ms !important;
    }
  }
}
/**
 * @prop --tct-meter-bar-background-color: (<color>) Controls the background color of the meter track.
 * @prop --tct-meter-bar-border?: (*) Controls the optional border shorthand of the meter track.
 * @prop --tct-meter-bar-border-radius: (<length-percentage>) Controls the corner radius of the meter track.
 * @prop --tct-meter-bar-height: (<length>) Controls the height of the meter track.
 * @prop --tct-meter-bar-margin: (<length-percentage>+) Controls the outer margin of the meter track.
 * @prop --tct-meter-bar-shadow?: (*) Controls the optional box shadow of the meter track.
 * @prop --tct-meter-bar-transition: (*) Controls the transition timing applied to the meter bar fills (completed, suggested, and tick).
 * @prop --tct-meter-completed-bar-background-color: (<color>) Controls the background color of the completed-progress fill.
 * @prop --tct-meter-suggested-bar-background-color: (<color>) Controls the background color of the suggested-progress fill.
 * @prop --tct-meter-dot-background-color: (<color>) Controls the background color of the meter dot indicator.
 * @prop --tct-meter-dot-border-color: (<color>) Controls the border color of the meter dot indicator.
 * @prop --tct-meter-dot-border-style: (<custom-ident>) Controls the border style of the meter dot indicator.
 * @prop --tct-meter-dot-border-width: (<length>+) Controls the border width of the meter dot indicator.
 * @prop --tct-meter-dot-border-radius: (<length-percentage>) Controls the corner radius of the meter dot indicator.
 * @prop --tct-meter-dot-size: (<length>) Controls the size of the meter dot indicator.
 * @prop --tct-meter-dot-box-shadow: (*) Controls the box shadow of the meter dot indicator.
 * @prop --tct-meter-dot-transition: (*) Controls the transition timing for the meter dot indicator's movement.
 * @prop --tct-meter-dot-gap: (<length-percentage>) Controls the gap between the meter dot and the adjacent legend label.
 * @prop --tct-meter-tick-color: (<color>) Controls the color of meter tick marks.
 * @prop --tct-meter-tick-right-color: (<color>) Controls the color of the rightmost meter tick mark.
 * @prop --tct-meter-tick-width: (<length>) Controls the width of meter tick marks.
 * @prop --tct-meter-ticket-height: (<length>) Controls the height of meter tick marks.
 * @prop --tct-meter-label-color: (<color>) Controls the text color of the meter label.
 * @prop --tct-meter-label-font-size: (<length-percentage>) Controls the font size of the meter label.
 * @prop --tct-meter-label-font-weight: (<number>) Controls the font weight of the meter label.
 * @prop --tct-meter-label-margin: (<length-percentage>+) Controls the outer margin of the meter label.
 * @prop --tct-meter-description-color: (<color>) Controls the text color of the meter description.
 * @prop --tct-meter-description-font-size: (<length-percentage>) Controls the font size of the meter description.
 * @prop --tct-meter-description-font-weight: (<number>) Controls the font weight of the meter description.
 * @prop --tct-meter-description-line-height: (<number> | <length-percentage>) Controls the line height of the meter description.
 * @prop --tct-meter-description-margin: (<length-percentage>+) Controls the outer margin of the meter description.
 * @prop --tct-meter-legend-label-color: (<color>) Controls the text color of meter legend labels.
 * @prop --tct-meter-legend-font-weight: (<number>) Controls the font weight of meter legend labels.
 * @prop --tct-meter-legend-margin: (<length-percentage>+) Controls the outer margin of the meter legend row.
 * @prop --tct-meter-legend-gap: (<length-percentage>) Controls the gap between completed and suggested legend entries.
 * @prop --tct-meter-legend-bar-height: (<length>) Controls the height of the legend's color swatch.
 * @prop --tct-meter-legend-bar-width: (<length>) Controls the width of the legend's color swatch.
 * @prop --tct-meter-legend-dot-radius: (<length-percentage>) Controls the corner radius of the legend's color swatch.
 */
:host {
  width: 100%;
}

.meter-container {
  --comp-meter-bar-height: var(--tct-meter-bar-height, 10px);
  --comp-meter-bar-border-radius: var(--tct-meter-bar-border-radius, calc(var(--comp-meter-bar-height) / 2));
  --comp-meter-dot-height: var(--tct-meter-dot-size, var(--tct-meter-bar-height, 10px));
  --comp-meter-dot-border-style: var(--tct-meter-dot-border-style, solid);
  --comp-meter-dot-border-width: var(--tct-meter-dot-border-width, calc(0.2 * var(--comp-meter-bar-height)));
  --comp-meter-dot-border-color: var(--tct-meter-dot-border-color, #FFFFFF);
  --comp-meter-dot-border-radius: var(--tct-meter-dot-border-radius, 50%);
  --comp-meter-dot-background-color: var(--tct-meter-dot-background-color, var(--t-primary, #6A4A9E));
  --comp-meter-tick-height: var(--tct-meter-ticket-height, calc(0.4 * var(--comp-meter-bar-height)));
  --comp-meter-bar-shadow: var(--tct-meter-bar-shadow);
  --comp-meter-bar-border: var(--tct-meter-bar-border);
}
:host([animated]:not([animated=false])) .meter-container {
  --comp-meter-bar-transition: var(--tct-meter-bar-transition, width 0.2s ease-in-out);
  --comp-meter-dot-transition: var(--tct-meter-dot-transition, left 0.2s ease-in-out);
}
:host([dotted]:not([dotted=false])) .meter-container {
  --comp-meter-dot-visibility: visible;
}
:host([segments]:not([segments=""]):not([segments="0"]):not([segments="1"])) .meter-container {
  --comp-meter-tick-visibility: visible;
}
.meter-container .label {
  font-size: var(--tct-meter-label-font-size, var(--const-px-14, 14px));
  font-weight: var(--tct-meter-label-font-weight, 600);
  color: var(--tct-meter-label-color, inherit);
  margin: var(--tct-meter-label-margin, 5px 0);
}
.meter-container .description {
  font-size: var(--tct-meter-description-font-size, var(--const-px-14, 14px));
  font-weight: var(--tct-meter-description-font-weight, 400);
  color: var(--tct-meter-description-color, inherit);
  line-height: var(--tct-meter-description-line-height, var(--const-px-21, 21px));
  margin: var(--tct-meter-description-margin, 5px 0);
}
.meter-container .bar-container {
  position: relative;
}
.meter-container .bar-container .bars {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--comp-meter-bar-height);
  background-color: var(--tct-meter-bar-background-color, var(--t-primary-completed2, #E0DEEF));
  margin: var(--tct-meter-bar-margin, 5px 0);
  border: var(--comp-meter-bar-border);
  border-radius: var(--comp-meter-bar-border-radius);
  box-shadow: var(--comp-meter-bar-shadow);
}
.meter-container .bar-container .bars .completed-bar,
.meter-container .bar-container .bars .suggested-bar,
.meter-container .bar-container .bars .tick-bar {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--comp-meter-bar-border-radius);
  transition: var(--comp-meter-bar-transition, none);
}
.meter-container .bar-container .bars .completed-bar {
  background-color: var(--tct-meter-completed-bar-background-color, var(--t-primary, #6A4A9E));
  min-width: calc(var(--comp-meter-bar-height));
  width: 0%;
  z-index: 2;
}
.meter-container .bar-container .bars .suggested-bar {
  background-color: var(--tct-meter-suggested-bar-background-color, var(--t-primary-l5, #B4A0D3));
  min-width: calc(var(--comp-meter-bar-height));
  width: 0%;
  z-index: 1;
}
.meter-container .bar-container .bars .tick-bar {
  visibility: var(--comp-meter-tick-visibility, hidden);
  width: 100%;
  z-index: 3;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.meter-container .bar-container .bars .tick-bar .tick {
  width: 100%;
  border-right-width: var(--tct-meter-tick-width, 1px);
  border-right-color: var(--tct-meter-tick-color, var(--t-primary-l5, #B4A0D3));
  border-right-style: solid;
  height: var(--comp-meter-tick-height);
}
.meter-container .bar-container .bars .tick-bar .tick.tick-right {
  border-right-color: var(--tct-meter-tick-right-color, var(--t-a11y-gray-color-AA, #949494));
}
.meter-container .bar-container .bars .tick-bar .tick:last-child {
  border-color: transparent;
}
.meter-container .bar-container .dot-container {
  position: absolute;
  line-height: 0;
  left: 0;
  top: calc(50% - var(--comp-meter-dot-height) / 2 - var(--comp-meter-dot-border-width));
  transform: translateX(-50%);
  transition: var(--comp-meter-dot-transition, none);
  z-index: 4;
}
.meter-container .bar-container .dot-container .dot {
  visibility: var(--comp-meter-dot-visibility, hidden);
  width: calc(var(--comp-meter-dot-height) + 2 * var(--comp-meter-dot-border-width));
  height: calc(var(--comp-meter-dot-height) + 2 * var(--comp-meter-dot-border-width));
  background-color: var(--comp-meter-dot-background-color);
  border-style: var(--comp-meter-dot-border-style);
  border-width: var(--comp-meter-dot-border-width);
  border-color: var(--comp-meter-dot-border-color);
  border-radius: var(--comp-meter-dot-border-radius);
  box-shadow: var(--tct-meter-dot-box-shadow, var(--app-shadow-1));
}
.meter-container .bar-container .dot-container.suggested .dot {
  visibility: hidden;
}
.meter-container .legends {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: var(--tct-meter-legend-label-color, inherit);
  font-weight: var(--tct-meter-legend-font-weight, 400);
  margin: var(--tct-meter-legend-margin, 5px 0);
}
.meter-container .legends .left {
  display: flex;
  flex-direction: row;
}
.meter-container .legends .left .completed,
.meter-container .legends .left .suggested {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.meter-container .legends .left .completed .dot,
.meter-container .legends .left .suggested .dot {
  margin-right: var(--tct-meter-dot-gap, 5px);
  border-radius: var(--tct-meter-legend-dot-radius, var(--app-border-radius-3, 5px));
  width: var(--tct-meter-legend-bar-width, 7px);
  height: var(--tct-meter-legend-bar-height, 7px);
}
.meter-container .legends .left .completed .legend-label,
.meter-container .legends .left .suggested .legend-label {
  font-size: inherit;
}
.meter-container .legends .left .completed {
  margin-right: var(--tct-meter-legend-gap, 20px);
}
.meter-container .legends .left .completed .dot {
  background-color: var(--tct-meter-completed-bar-background-color, var(--t-primary, #6A4A9E));
}
.meter-container .legends .left .suggested .dot {
  background-color: var(--tct-meter-suggested-bar-background-color, var(--t-primary-l5, #B4A0D3));
}
.meter-container .legends .right .max {
  font-size: inherit;
  text-align: right;
}