* {
  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;
    }
  }
}
* {
  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-list-header-min-height: (<length>) Controls the minimum height of the list header.
 * @prop --tct-list-header-padding: (<length-percentage>+) Controls the inner padding of the list header.
 * @prop --tct-list-item-border-color: (<color>) Controls the border color of list items when the list is bordered.
 * @prop --tct-list-item-border-style: (<custom-ident>) Controls the border style of list items when the list is bordered.
 * @prop --tct-list-item-border-width: (<length>+) Controls the border width of list items when the list is bordered.
 * @prop --tct-list-item-gap?: (<length-percentage>) Controls the optional gap between list items.
 * @prop --tct-list-item-padding: (<length-percentage>+) Controls the inner padding of each list item.
 * @prop --tct-list-label-font-color: (<color>) Controls the text color of the list header label.
 * @prop --tct-list-label-font-size: (<length-percentage>) Controls the font size of the list header label.
 * @prop --tct-list-label-font-weight: (<number>) Controls the font weight of the list header label.
 * @prop --tct-list-label-height: (<length>) Controls the height of the list header label.
 * @prop --tct-list-label-line-height: (<number> | <length-percentage>) Controls the line height of the list header label.
 */
:host([bordered]:not([bordered=false])) ::slotted(q2-item:not(:last-child)),
:host([bordered]:not([bordered=false])) .header {
  border-style: var(--tct-list-item-border-style, solid);
  border-width: var(--tct-list-item-border-width, 0 0 1px 0);
  border-color: var(--tct-list-item-border-color, var(--t-gray-12, #d9d9d9));
}

::slotted(q2-item) {
  --comp-item-padding: var(--tct-list-item-padding, var(--app-scale-2x, 10px) var(--app-scale-4x, 20px));
  --tct-item-padding: var(--comp-item-padding);
}

.header {
  --comp-default-header-padding: 0 var(--app-scale-4x, 20px);
  display: flex;
  gap: var(--app-scale-3x, 12px);
  padding: var(--tct-list-header-padding, var(--comp-default-header-padding));
  min-height: var(--tct-list-header-min-height, var(--t-list-header-min-height, 44px));
}
.header-spacebetween {
  justify-content: space-between;
}
.header-start {
  justify-content: flex-start;
}
.header-end {
  justify-content: flex-end;
}
.header .label {
  width: 100%;
  height: var(--tct-list-label-height, 44px);
  line-height: var(--tct-list-label-line-height, var(--const-px-44, 44px));
  font-size: var(--tct-list-label-font-size, var(--app-font-size, var(--const-px-14, 14px)));
  font-weight: var(--tct-list-label-font-weight, 600);
  color: var(--tct-list-label-font-color, inherit);
}

slot:not([name]) {
  display: flex;
  flex-direction: column;
  gap: var(--tct-list-item-gap, 0);
}