* {
  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-avatar-background: (<color>) Controls the background color of the avatar shape in its default and fallback states.
 * @prop --tct-avatar-text-color: (<color>) Controls the text color of the avatar initials.
 * @prop --tct-avatar-font-size: (<length-percentage>) Controls the font size of the avatar initials.
 * @prop --tct-avatar-font-weight: (<number>) Controls the font weight of the avatar initials.
 * @prop --tct-avatar-display: (<custom-ident>) Controls the CSS display value of the avatar image and initials elements.
 * @prop --tct-avatar-border?: (*) Controls the optional border shorthand applied to the avatar shape.
 * @prop --tct-avatar-border-radius: (<length-percentage>) Controls the corner radius applied to the avatar via the legacy border-radius fallback chain.
 * @prop --tct-avatar-img-border-radius: (<length-percentage>) Controls the corner radius of the avatar image and fallback shape.
 * @prop --tct-avatar-backdrop-filter?: (*) Controls the optional backdrop-filter applied to the avatar initials shape.
 * @prop --tct-avatar-size: (<length>) Controls both height and width of the medium-size avatar.
 * @prop --tct-avatar-height: (<length>) Controls the height of the medium-size avatar when --tct-avatar-size is not set.
 * @prop --tct-avatar-width: (<length>) Controls the width of the medium-size avatar when --tct-avatar-size is not set.
 * @prop --tct-avatar-small-size: (<length>) Controls both height and width of the small-size avatar.
 * @prop --tct-avatar-large-size: (<length>) Controls both height and width of the large-size avatar.
 * @prop --tct-avatar-icon-color: (<color>) Controls the color of the fallback icon when no image or initials are provided.
 * @prop --tct-avatar-icon-fill?: (<color>) Controls the optional fill color of the fallback icon when no image or initials are provided.
 * @prop --tct-avatar-icon-size: (<length-percentage>) Controls the size of the fallback icon relative to the avatar.
 * @prop --tct-avatar-icon-stroke-primary: (<color>) Controls the primary stroke color of the fallback icon.
 * @prop --tct-avatar-icon-stroke-secondary: (<color>) Controls the secondary stroke color of the fallback icon.
 * @prop --tct-avatar-decorator-background-color: (<color>) Controls the background color of the decorator badge attached to the avatar.
 * @prop --tct-avatar-decorator-color: (<color>) Controls the color of the slotted icon inside the decorator badge.
 * @prop --tct-avatar-decorator-small-icon-size: (<length>) Controls the size of the decorator icon when the avatar is small.
 */
.avatar-wrapper {
  position: relative;
  border-radius: 100%;
}
.avatar-wrapper .decorator {
  height: var(--app-scale-3x, 15px);
  width: var(--app-scale-3x, 15px);
  background-color: var(--tct-avatar-decorator-background-color, var(--t-base, #ffffff));
  border-radius: 100%;
  box-shadow: var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar-wrapper .decorator ::slotted(q2-icon) {
  color: var(--tct-avatar-decorator-color, #000000);
}
.avatar-wrapper.size-small {
  height: var(--tct-avatar-small-size, 24px);
  width: var(--tct-avatar-small-size, 24px);
}
.avatar-wrapper.size-small .decorator {
  height: var(--app-scale-2x, 10px);
  width: var(--app-scale-2x, 10px);
  aspect-ratio: 1/1;
}
.avatar-wrapper.size-small .decorator ::slotted(q2-icon) {
  height: var(--tct-avatar-decorator-small-icon-size, 8px);
  width: var(--tct-avatar-decorator-small-icon-size, 8px);
  aspect-ratio: 1/1;
}
.avatar-wrapper.size-medium {
  height: var(--tct-avatar-size, var(--tct-avatar-height, 44px));
  width: var(--tct-avatar-size, var(--tct-avatar-width, 44px));
}
.avatar-wrapper.size-medium .decorator {
  height: var(--app-scale-3x, 15px);
  width: var(--app-scale-3x, 15px);
  aspect-ratio: 1/1;
}
.avatar-wrapper.size-medium .decorator ::slotted(q2-icon) {
  height: var(--app-scale-2x, 10px);
  width: var(--app-scale-2x, 10px);
  aspect-ratio: 1/1;
}
.avatar-wrapper.size-large {
  height: var(--tct-avatar-large-size, 64px);
  width: var(--tct-avatar-large-size, 64px);
}
.avatar-wrapper.size-large .decorator {
  height: var(--app-scale-4x, 20px);
  width: var(--app-scale-4x, 20px);
  aspect-ratio: 1/1;
}
.avatar-wrapper.size-large .decorator ::slotted(q2-icon) {
  height: 14px;
  width: 14px;
  aspect-ratio: 1/1;
}

.avatar-img,
.avatar-img-default {
  display: var(--tct-avatar-display, block);
  object-fit: cover;
  border-radius: var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, var(--tct-avatar-border-radius, 50%)));
  border: var(--tct-avatar-border, none);
  height: 100%;
  width: 100%;
}

.avatar-img-default {
  background: var(--tct-avatar-background, var(--tct-avatar-bg, #9e9e9e));
}

.avatar-initials {
  display: var(--tct-avatar-display, block);
  backdrop-filter: var(--tct-avatar-backdrop-filter);
  background: var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));
  border-radius: var(--tct-avatar-br, 50%);
  border: var(--tct-avatar-border, none);
  height: 100%;
  width: 100%;
}

text {
  fill: var(--tct-avatar-text-color, var(--tct-avatar-color, #ffffff));
  font-weight: var(--tct-avatar-font-weight, 200);
  font-size: var(--tct-avatar-font-size, var(--const-px-40, 40px));
}

.fallback {
  height: 100%;
  width: 100%;
  border-radius: var(--tct-avatar-img-border-radius, var(--tct-avatar-img-br, 50%));
  border: var(--tct-avatar-border, none);
  background: var(--tct-avatar-background, var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e)));
  display: flex;
  align-items: center;
  justify-content: center;
}
.fallback q2-icon {
  --tct-icon-size: var(--tct-avatar-icon-size, 65%);
  --tct-icon-stroke-primary: var(--tct-avatar-icon-stroke-primary, currentcolor);
  --tct-icon-stroke-secondary: var(--tct-avatar-icon-stroke-secondary, currentcolor);
  --tct-icon-fill: var(--tct-avatar-icon-fill);
  color: var(--tct-avatar-icon-color, var(--tct-avatar-color, var(--t-base, #ffffff)));
  width: var(--tct-avatar-icon-size, var(--tct-icon-size));
  height: var(--tct-avatar-icon-size, var(--tct-icon-size));
}