* {
  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-item-padding?: (<length-percentage>+) Controls the optional inner padding of the item grid.
 * @prop --tct-item-border?: (*) Controls the optional border shorthand applied to the item grid.
 * @prop --tct-item-border-radius?: (<length-percentage>) Controls the optional corner radius of the item grid.
 * @prop --tct-item-hover-background: (<color>) Controls the background color of clickable items on hover.
 * @prop --tct-item-font-style?: (<custom-ident>) Controls the optional font style of the item grid.
 * @prop --tct-item-horizontal-spacing: (<length-percentage>) Controls the horizontal column gap inside the item grid.
 * @prop --tct-item-vertical-spacing: (<length-percentage>) Controls the vertical row gap inside the item grid.
 * @prop --tct-item-bullet-padding-top: (<length-percentage>) Controls the top padding of the item bullet (leading slot) area.
 * @prop --tct-item-avatar-height: (<length>) Controls the height applied to an avatar rendered in the item bullet area.
 * @prop --tct-item-avatar-width: (<length>) Controls the width applied to an avatar rendered in the item bullet area.
 * @prop --tct-item-action-align-items: (<custom-ident>) Controls the align-items value of the item action (trailing) area.
 * @prop --tct-item-action-btn-icon-padding: (<length>) Controls the padding of icon buttons in the item action area.
 * @prop --tct-item-action-icon-height: (<length>) Controls the height applied to icon buttons in the item action area.
 * @prop --tct-item-action-icon-width: (<length>) Controls the width applied to icon buttons in the item action area.
 * @prop --tct-item-action-icon-size: (<length>) Controls the icon size applied to icons in the item action area.
 * @prop --tct-item-header-color: (<color>) Controls the text color of the item header.
 * @prop --tct-item-header-font-size: (<length-percentage>) Controls the font size of the item header.
 * @prop --tct-item-header-font-weight: (<number>) Controls the font weight of the item header.
 * @prop --tct-item-header-font-style?: (<custom-ident>) Controls the optional font style of the item header.
 * @prop --tct-item-header-line-height: (<number> | <length-percentage>) Controls the line height of the item header.
 * @prop --tct-item-body-color: (<color>) Controls the text color of the item body.
 * @prop --tct-item-body-font-size: (<length-percentage>) Controls the font size of the item body.
 * @prop --tct-item-body-font-weight: (<number>) Controls the font weight of the item body.
 * @prop --tct-item-body-font-style?: (<custom-ident>) Controls the optional font style of the item body.
 * @prop --tct-item-footer-color?: (<color>) Controls the optional text color of the item footer.
 * @prop --tct-item-footer-font-size?: (<length-percentage>) Controls the optional font size of the item footer.
 * @prop --tct-item-footer-font-weight?: (<number>) Controls the optional font weight of the item footer.
 * @prop --tct-item-footer-font-style?: (<custom-ident>) Controls the optional font style of the item footer.
 */
:host {
  display: block;
}
:host .item {
  --comp-border-radius: var(--tct-item-border-radius, var(--app-border-radius-0, 0));
}

:host([clickable]) {
  cursor: pointer;
  --comp-background: var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)));
}
:host([clickable]) .item {
  --comp-border-radius: var(--tct-item-border-radius, var(--app-border-radius-1, 4px));
  --comp-btn-tween: var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));
  --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --comp-active-box-shadow: var(--tct-btn-primary-active-background, #0063a0);
  --comp-font-color: var(--tct-btn-primary-font-color, var(--app-white, #ffffff));
  --comp-hover-outer-ring-color: var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));
  --comp-hover-inner-ring-color: var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));
  --comp-hover-box-shadow: var(
      --tct-btn-primary-hover-box-shadow,
      0 0 0 2px var(--comp-hover-inner-ring-color),
      0 0 0 4px var(--comp-hover-outer-ring-color)
  );
}
:host([clickable]) .item:active {
  box-shadow: var(--comp-active-box-shadow);
}
:host([clickable]) .item:focus-visible {
  box-shadow: var(--const-double-focus-ring);
}

:host([clickable]:is(:not([disabled]), [disabled=false]):is(:not([aria-disabled]), [aria-disabled=false])) .item:hover {
  background-color: var(--tct-item-hover-background, var(--t-base-hover));
}

.action {
  --tct-radio-label-hidden-columns: 18px;
  --tct-radio-label-margin-right: 0;
  align-items: var(--tct-item-action-align-items, center);
  display: flex;
  grid-row: 1;
  justify-content: center;
}
.action-no-bullet {
  grid-column: 2;
}
.action ::slotted(q2-dropdown[type=icon]),
.action ::slotted(q2-btn:not([intent])) {
  --tct-btn-icon-height: var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));
  --tct-btn-icon-width: var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));
  --tct-icon-size: var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));
  --tct-btn-icon-padding: var(--tct-item-action-btn-icon-padding, 0);
}
.action ::slotted(q2-icon) {
  --tct-icon-size: var(--const-px-18, 18px);
}

.body {
  color: var(--tct-item-body-color, inherit);
  font-size: var(--tct-item-body-font-size, var(--app-font-size, var(--const-px-14, 14px)));
  font-weight: var(--tct-item-body-font-weight, 400);
  font-style: var(--tct-item-body-font-style, inherit);
}

.bullet {
  --tct-avatar-fallback-height: var(--tct-item-avatar-height, var(--app-scale-7x, 35px));
  --tct-avatar-fallback-width: var(--tct-item-avatar-width, var(--app-scale-7x, 35px));
  --tct-avatar-height: var(--tct-item-avatar-height, var(--app-scale-7x, 35px));
  --tct-avatar-width: var(--tct-item-avatar-width, var(--app-scale-7x, 35px));
  grid-column: 1;
  grid-row-start: 1;
  grid-row-end: 3;
  padding-top: var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));
  text-align: center;
}
.bullet-no-footer {
  grid-row-end: 2;
}

.vertical-align-center {
  align-self: center;
  padding-top: 0;
}

.vertical-align-bottom {
  align-self: end;
  padding-top: 0;
}

.vertical-align-single-content {
  grid-row-end: 2;
}

.footer {
  color: var(--tct-item-footer-color, inherit);
  font-size: var(--tct-item-footer-font-size, inherit);
  font-weight: var(--tct-item-footer-font-weight, inherit);
  font-style: var(--tct-item-footer-font-style, inherit);
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row: 2;
}
.footer-no-action-nor-bullet {
  grid-column-start: 1;
  grid-column-end: 2;
}
.footer-no-action {
  grid-column-start: 2;
  grid-column-end: 3;
}
.footer-no-bullet {
  grid-column-start: 1;
  grid-column-end: 3;
}

.vertical-align-footer-center {
  align-self: center;
  grid-row: 1;
}

.vertical-align-footer-bottom {
  align-self: end;
  grid-row: 1;
}

.header {
  color: var(--tct-item-header-color, inherit);
  font-size: var(--tct-item-header-font-size, var(--const-px-16, 16px));
  font-style: var(--tct-item-header-font-style, inherit);
  font-weight: var(--tct-item-header-font-weight, 600);
  line-height: var(--tct-item-header-line-height, 1.5);
}

.item {
  font-style: var(--tct-item-font-style, inherit);
  border: var(--tct-item-border);
  border-radius: var(--comp-border-radius);
  transition: box-shadow var(--comp-btn-tween), background-color var(--t-tween-time-out-1, 100ms) var(--t-tween-ease-out);
  column-gap: var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));
  display: grid;
  grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);
  grid-template-rows: auto auto;
  padding: var(--tct-item-padding, 0);
  row-gap: var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px));
}
.item-no-action-nor-bullet {
  grid-template-columns: auto;
}
.item-no-action {
  grid-template-columns: minmax(var(--app-scale-7x, 35px), auto) minmax(0, 1fr);
}
.item-no-footer {
  grid-template-rows: auto;
}
.item-no-bullet {
  grid-template-columns: minmax(0, 1fr) minmax(var(--app-scale-5x, 25px), auto);
}
.item-single-content {
  grid-template-rows: auto;
}

.main {
  grid-column: 2;
  grid-row: 1;
}
.main-no-action-nor-bullet {
  grid-column: 1;
}
.main-no-bullet {
  grid-column: 1;
}

.vertical-align-main-center {
  align-self: center;
}

.vertical-align-main-bottom {
  align-self: end;
}