* {
  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-badge-background: (<color>) Controls the background color of the badge container in its default state.
 * @prop --tct-badge-color: (<color>) Controls the text color of the badge container in its default state.
 * @prop --tct-badge-border?: (*) Controls the optional border shorthand of the badge container.
 * @prop --tct-badge-backdrop-filter?: (*) Controls the optional backdrop-filter of the badge container.
 * @prop --tct-badge-height: (<length>) Controls the height of the badge container in the default size.
 * @prop --tct-badge-min-width: (<length>) Controls the minimum width of the badge container in the default size.
 * @prop --tct-badge-padding: (<length-percentage>+) Controls the inner padding of the badge container in the default size.
 * @prop --tct-badge-border-radius: (<length-percentage>) Controls the corner radius of the badge container in the default size.
 * @prop --tct-badge-line-height: (<number> | <length-percentage>) Controls the line height of the badge text in the default size.
 * @prop --tct-badge-large-height: (<length>) Controls the height of the badge container in the large size.
 * @prop --tct-badge-large-min-width: (<length>) Controls the minimum width of the badge container in the large size.
 * @prop --tct-badge-large-padding: (<length-percentage>+) Controls the inner padding of the badge container in the large size.
 * @prop --tct-badge-large-border-radius: (<length-percentage>) Controls the corner radius of the badge container in the large size.
 * @prop --tct-badge-large-line-height: (<number> | <length-percentage>) Controls the line height of the badge text in the large size.
 * @prop --tct-badge-info-background: (<color>) Controls the background color of the badge container when status is info.
 * @prop --tct-badge-info-color: (<color>) Controls the text color of the badge container when status is info.
 * @prop --tct-badge-alert-background: (<color>) Controls the background color of the badge container when status is alert.
 * @prop --tct-badge-alert-color: (<color>) Controls the text color of the badge container when status is alert.
 * @prop --tct-badge-warning-background: (<color>) Controls the background color of the badge container when status is warning.
 * @prop --tct-badge-warning-color: (<color>) Controls the text color of the badge container when status is warning.
 * @prop --tct-badge-success-background: (<color>) Controls the background color of the badge container when status is success.
 * @prop --tct-badge-success-color: (<color>) Controls the text color of the badge container when status is success.
 * @prop --tct-badge-primary-background: (<color>) Controls the background color of the badge container when theme is primary.
 * @prop --tct-badge-primary-color: (<color>) Controls the text color of the badge container when theme is primary.
 * @prop --tct-badge-secondary-background: (<color>) Controls the background color of the badge container when theme is secondary.
 * @prop --tct-badge-secondary-color: (<color>) Controls the text color of the badge container when theme is secondary.
 * @prop --tct-badge-tertiary-background: (<color>) Controls the background color of the badge container when theme is tertiary.
 * @prop --tct-badge-tertiary-color: (<color>) Controls the text color of the badge container when theme is tertiary.
 */
:host {
  display: inline-block;
  line-height: 0;
  --comp-badge-font-size: var(--app-font-size-small, var(--const-px-12, 12px));
  --comp-badge-large-font-size: var(--app-font-size, var(--const-px-14, 14px));
  --comp-badge-background: var(--tct-badge-background, var(--t-a11y-gray-color-AAA, #6c6c6c));
  --comp-badge-color: var(--tct-badge-color, var(--t-base, #ffffff));
}
:host:host([status=info]) {
  --comp-badge-background: var(--tct-badge-info-background, var(--const-stoplight-info, #0079c1));
  --comp-badge-color: var(--tct-badge-info-color, var(--const-stoplight-info-text, #ffffff));
}
:host:host([status=alert]) {
  --comp-badge-background: var(--tct-badge-alert-background, var(--const-stoplight-alert, #d20a0a));
  --comp-badge-color: var(--tct-badge-alert-color, var(--const-stoplight-alert-text, #ffffff));
}
:host:host([status=warning]) {
  --comp-badge-background: var(--tct-badge-warning-background, var(--const-stoplight-warning, #c35500));
  --comp-badge-color: var(--tct-badge-warning-color, var(--const-stoplight-warning-text, #ffffff));
}
:host:host([status=success]) {
  --comp-badge-background: var(--tct-badge-success-background, var(--const-stoplight-success, #0e8a00));
  --comp-badge-color: var(--tct-badge-success-color, var(--const-stoplight-success-text, #ffffff));
}
:host:host([theme=primary]) {
  --comp-badge-background: var(--tct-badge-primary-background, var(--t-primary, #6a4a9e));
  --comp-badge-color: var(--tct-badge-primary-color, var(--t-primary-text, #ffffff));
}
:host:host([theme=secondary]) {
  --comp-badge-background: var(--tct-badge-secondary-background, var(--t-secondary, #b3c2cc));
  --comp-badge-color: var(--tct-badge-secondary-color, var(--t-secondary-text, #141414));
}
:host:host([theme=tertiary]) {
  --comp-badge-background: var(--tct-badge-tertiary-background, var(--t-tertiary, #e8f5fc));
  --comp-badge-color: var(--tct-badge-tertiary-color, var(--t-tertiary-text, #141414));
}

.badge-container {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--tct-badge-height, 16px);
  min-width: var(--tct-badge-min-width, 16px);
  text-align: center;
  padding: var(--tct-badge-padding, 0 5px);
  color: var(--comp-badge-color);
  background: var(--comp-badge-background);
  border-radius: var(--tct-badge-border-radius, var(--t-badge-border-radius, 8px));
  border: var(--tct-badge-border);
  backdrop-filter: var(--tct-badge-backdrop-filter);
}
.badge-container .badge-text {
  font-size: var(--comp-badge-font-size);
  line-height: var(--tct-badge-line-height, var(--const-px-14, 14px));
}
.badge-container .badge-text ::slotted(p) {
  margin: 0 !important;
  font-size: var(--comp-badge-font-size) !important;
}

.badge-container.size-large {
  height: var(--tct-badge-large-height, 22px);
  min-width: var(--tct-badge-large-min-width, 22px);
  border-radius: var(--tct-badge-large-border-radius, 11px);
  padding: var(--tct-badge-large-padding, 0 6px);
}
.badge-container.size-large .badge-text {
  font-size: var(--comp-badge-large-font-size);
  line-height: var(--tct-badge-large-line-height, var(--const-px-20, 20px));
}
.badge-container.size-large .badge-text ::slotted(p) {
  margin: 0 !important;
  font-size: var(--comp-badge-large-font-size) !important;
}

.empty-variant {
  min-width: unset;
  width: 16px;
  height: 16px;
  padding: 0;
}
.empty-variant.size-large {
  min-width: unset;
  width: 22px;
  height: 22px;
  padding: 0;
}