* {
  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-legend-item-gap: (<length-percentage>) Controls the column gap between elements within a legend item.
 * @prop --tct-legend-item-padding: (<length-percentage>+) Controls the inner padding of each legend item button.
 * @prop --tct-legend-item-min-height: (<length>) Controls the minimum height of each legend item button.
 * @prop --tct-legend-item-opacity-faded: (<number>) Controls the opacity of legend item contents when the item is faded.
 * @prop --tct-legend-item-focus-visible-box-shadow: (*) Controls the box shadow applied to a legend item when focused via keyboard.
 * @prop --tct-legend-item-color-indicator-size: (<length-percentage>) Controls the diameter of the color indicator dot in each legend item.
 * @prop --tct-legend-item-name-font-color: (<color>) Controls the text color of the legend item name.
 * @prop --tct-legend-item-name-font-size: (<length-percentage>) Controls the font size of the legend item name.
 * @prop --tct-legend-item-name-font-weight: (<number>) Controls the font weight of the legend item name.
 * @prop --tct-legend-item-name-line-height: (<number> | <length-percentage>) Controls the line height of the legend item name.
 * @prop --tct-legend-item-value-font-color: (<color>) Controls the text color of the legend item value.
 * @prop --tct-legend-item-value-font-size: (<length-percentage>) Controls the font size of the legend item value.
 * @prop --tct-legend-item-value-font-weight: (<number>) Controls the font weight of the legend item value.
 * @prop --tct-legend-item-value-line-height: (<number> | <length-percentage>) Controls the line height of the legend item value.
 */
:host {
  position: relative;
  width: 100%;
  display: block;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.item-button {
  align-items: flex-start;
  background-color: transparent;
  border: none;
  column-gap: var(--tct-legend-item-gap, var(--app-scale-2x, 10px));
  display: flex;
  min-height: var(--tct-legend-item-min-height, 15px);
  opacity: 1;
  padding: var(--tct-legend-item-padding, 0 0 9px 0);
  transition: opacity var(--app-tween-1, 0.2s ease);
  width: 100%;
}
.item-button:focus-visible {
  box-shadow: var(--tct-legend-item-focus-visible-box-shadow, var(--aesthetic-focus-ring-shadow));
}
.item-button:hover {
  cursor: pointer;
}
.item-button-faded > * {
  opacity: var(--tct-legend-item-opacity-faded, var(--app-disabled-opacity, 0.4));
}

.item-color-indicator {
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  height: var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px));
  width: var(--tct-legend-item-color-indicator-size, var(--app-scale-3x, 15px));
}

.item-name {
  color: var(--tct-legend-item-name-font-color, inherit);
  display: inline-block;
  flex-grow: 1;
  font-size: var(--tct-legend-item-name-font-size, var(--app-font-size, var(--const-px-14, 14px)));
  font-weight: var(--tct-legend-item-name-font-weight, 600);
  line-height: var(--tct-legend-item-name-line-height, 1);
  text-align: left;
}

.item-value {
  color: var(--tct-legend-item-value-font-color, inherit);
  display: inline-block;
  margin-left: auto;
  flex-grow: 0;
  font-size: var(--tct-legend-item-value-font-size, var(--app-font-size, var(--const-px-14, 14px)));
  font-weight: var(--tct-legend-item-value-font-weight, 400);
  line-height: var(--tct-legend-item-value-line-height, 1);
  text-align: right;
}