* {
  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-chart-donut-text-color: (<color>) Controls the text color of the chart donut center card content.
 * @prop --tct-chart-donut-focus-visible-box-shadow: (*) Controls the box shadow of the chart container when focused via keyboard.
 * @prop --tct-chart-donut-button-background?: (<color>) Controls the optional background color of the chart center button in its default state.
 * @prop --tct-chart-donut-button-hover-background?: (<color>) Controls the optional background color of the chart center button on hover.
 * @prop --tct-chart-donut-button-active-background?: (<color>) Controls the optional background color of the chart center button when active.
 * @prop --tct-chart-donut-button-focus-background?: (<color>) Controls the optional background color of the chart center button when focused via keyboard.
 * @prop --tct-chart-donut-button-hover-box-shadow: (*) Controls the box shadow applied to the chart center button on hover, active, and focus.
 * @prop --tct-chart-donut-button-tween: (*) Controls the transition timing of the chart center button's interactive state changes.
 * @prop --tct-chart-donut-button-padding: (<length-percentage>+) Controls the inner padding of the chart center button.
 * @prop --tct-chart-donut-button-container-padding: (<length-percentage>+) Controls the inner padding of the chart center card container.
 * @prop --tct-chart-donut-icon-size: (<length>) Controls the size of the icon displayed inside the chart center card.
 * @prop --tct-chart-donut-icon-margin: (<length-percentage>+) Controls the margin around the icon displayed inside the chart center card.
 * @prop --tct-chart-donut-name-font-size: (<length-percentage>) Controls the font size of the name label inside the chart center card.
 * @prop --tct-chart-donut-value-font-size: (<length-percentage>) Controls the font size of the value label inside the chart center card.
 * @prop --tct-chart-donut-legend-margin-top?: (<length-percentage>) Controls the optional top margin of the legend below the chart.
 * @prop --tct-chart-donut-color-1: (<color>) Controls the first slice color of the donut chart.
 * @prop --tct-chart-donut-color-2: (<color>) Controls the second slice color of the donut chart.
 * @prop --tct-chart-donut-color-3: (<color>) Controls the third slice color of the donut chart.
 * @prop --tct-chart-donut-color-4: (<color>) Controls the fourth slice color of the donut chart.
 * @prop --tct-chart-donut-color-5: (<color>) Controls the fifth slice color of the donut chart.
 * @prop --tct-chart-donut-color-6: (<color>) Controls the sixth slice color of the donut chart.
 * @prop --tct-chart-donut-color-7: (<color>) Controls the seventh slice color of the donut chart.
 * @prop --tct-chart-donut-color-8: (<color>) Controls the eighth slice color of the donut chart.
 * @prop --tct-chart-donut-color-9: (<color>) Controls the ninth slice color of the donut chart.
 * @prop --tct-chart-donut-color-10: (<color>) Controls the tenth slice color of the donut chart.
 * @prop --tct-chart-donut-color-11: (<color>) Controls the eleventh slice color of the donut chart.
 * @prop --tct-chart-donut-color-12: (<color>) Controls the twelfth slice color of the donut chart.
 */
:host {
  position: relative;
  width: 100%;
  display: block;
}

.container {
  aspect-ratio: 1/1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.chart-container {
  width: 100%;
  height: 100%;
  --comp-color-1: var(--tct-chart-donut-color-1, var(--t-chart-donut-color-1, var(--t-accent-1, #e05252)));
  --comp-color-2: var(--tct-chart-donut-color-2, var(--t-chart-donut-color-2, var(--t-accent-2, #e09952)));
  --comp-color-3: var(--tct-chart-donut-color-3, var(--t-chart-donut-color-3, var(--t-accent-3, #e0e052)));
  --comp-color-4: var(--tct-chart-donut-color-4, var(--t-chart-donut-color-4, var(--t-accent-4, #99e052)));
  --comp-color-5: var(--tct-chart-donut-color-5, var(--t-chart-donut-color-5, var(--t-accent-5, #52e052)));
  --comp-color-6: var(--tct-chart-donut-color-6, var(--t-chart-donut-color-6, var(--t-accent-6, #52e099)));
  --comp-color-7: var(--tct-chart-donut-color-7, var(--t-chart-donut-color-7, var(--t-accent-7, #52e0e0)));
  --comp-color-8: var(--tct-chart-donut-color-8, var(--t-chart-donut-color-8, var(--t-accent-8, #5299e0)));
  --comp-color-9: var(--tct-chart-donut-color-9, var(--t-chart-donut-color-9, var(--t-accent-9, #5252e0)));
  --comp-color-10: var(--tct-chart-donut-color-10, var(--t-chart-donut-color-10, var(--t-accent-10, #9952e0)));
  --comp-color-11: var(--tct-chart-donut-color-11, var(--t-chart-donut-color-11, var(--t-accent-11, #e052e0)));
  --comp-color-12: var(--tct-chart-donut-color-12, var(--t-chart-donut-color-12, var(--t-accent-12, #e05299)));
}
.chart-container:focus-visible {
  box-shadow: var(--tct-chart-donut-focus-visible-box-shadow, var(--const-double-focus-ring));
}

button {
  --comp-button-padding: var(--tct-chart-donut-button-padding, var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1x, 5px))) 0);
  transition: box-shadow var(--tct-chart-donut-button-tween, var(--t-chart-donut-button-tween, var(--app-tween-1, 0.2s ease)));
  padding: var(--comp-button-padding);
}
button:active {
  box-shadow: var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))));
}
button:hover {
  box-shadow: var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))));
}
button:focus-visible {
  box-shadow: var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))));
}

.center-card-container {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: var(--tct-chart-donut-button-container-padding, var(--t-chart-donut-button-container-padding, var(--app-scale-1x, 5px)));
  border-radius: 50%;
}

.center-card {
  height: 100%;
  width: 100%;
  text-align: center;
  color: var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, inherit));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.center-card:is(button) {
  cursor: pointer;
  background: var(--tct-chart-donut-button-background, transparent);
  border: 0;
}
.center-card:is(button):hover {
  background: var(--tct-chart-donut-button-hover-background, transparent);
}
.center-card:is(button):active {
  background: var(--tct-chart-donut-button-active-background, transparent);
}
.center-card:is(button):focus-visible {
  background: var(--tct-chart-donut-button-focus-background, transparent);
}

q2-icon {
  --tct-icon-size: var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));
  --comp-icon-margin: var(--tct-chart-donut-icon-margin, 0 0 var(--tct-chart-donut-icon-margin-bottom, var(--t-chart-donut-icon-margin-bottom, var(--app-scale-1x, 5px))));
  margin: var(--comp-icon-margin);
}

.name {
  font-size: var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, var(--const-px-14, 14px)));
}

.value {
  font-size: var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, var(--const-px-21, 21px)));
}

figure {
  margin: 0;
}

.legend {
  margin-top: var(--tct-chart-donut-legend-margin-top, var(--app-scale-0x, 0));
}