* {
  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-checkbox-margin: (<length-percentage>+) Controls the outer margin of the checkbox host.
 * @prop --tct-checkbox-margin-top?: (<length-percentage>) Controls the optional top margin of the checkbox host when --tct-checkbox-margin is not set.
 * @prop --tct-checkbox-margin-bottom?: (<length-percentage>) Controls the optional bottom margin of the checkbox host when --tct-checkbox-margin is not set.
 * @prop --tct-checkbox-padding: (<length-percentage>+) Controls the inner padding of the checkbox host.
 * @prop --tct-checkbox-size: (<length>) Controls the size of the checkbox control (icon).
 * @prop --tct-checkbox-gap: (<length-percentage>+) Controls the gap between the checkbox control and its label/description.
 * @prop --tct-checkbox-tween: (*) Controls the transition timing of checkbox state changes.
 * @prop --tct-checkbox-disabled-opacity: (<number>) Controls the opacity of the checkbox when disabled.
 * @prop --tct-checkbox-box-shadow?: (*) Controls the optional box shadow of the checkbox control in its default state.
 * @prop --tct-checkbox-outer-border-radius: (<length-percentage>) Controls the corner radius of the checkbox control.
 * @prop --tct-checkbox-outer-fill-color: (<color>) Controls the fill color of the checkbox control in its default state.
 * @prop --tct-checkbox-outer-stroke-color: (<color>) Controls the stroke color of the checkbox control in its default state.
 * @prop --tct-checkbox-outer-stroke-width: (<number>) Controls the stroke width of the checkbox control.
 * @prop --tct-checkbox-stroke-width?: (<number>) Controls the optional text stroke width of the label in the default state.
 * @prop --tct-checkbox-check-stroke-width: (<number>) Controls the stroke width of the checkmark.
 * @prop --tct-checkbox-indeterminate-stroke-width: (<number>) Controls the stroke width of the indeterminate-state mark.
 * @prop --tct-checkbox-bold-fallback-stroke-width: (<length>) Controls the fallback text stroke width applied when bold-emphasized states are active.
 * @prop --tct-checkbox-active-stroke-width?: (<number>) Controls the optional text stroke width of the label when active.
 * @prop --tct-checkbox-hover-stroke-width?: (<number>) Controls the optional text stroke width of the label when hovered.
 * @prop --tct-checkbox-focused-stroke-width?: (<number>) Controls the optional text stroke width of the label when focused.
 * @prop --tct-checkbox-checked-stroke-width: (<length>) Controls the text stroke width of the label when checked.
 * @prop --tct-checkbox-checked-active-stroke-width?: (<number>) Controls the optional text stroke width of the label when checked and active.
 * @prop --tct-checkbox-checked-hover-stroke-width: (<length>) Controls the text stroke width of the label when checked and hovered.
 * @prop --tct-checkbox-checked-focused-stroke-width: (<length>) Controls the text stroke width of the label when checked and focused.
 * @prop --tct-checkbox-checked-fill-color: (<color>) Controls the fill color of the checkbox control when checked.
 * @prop --tct-checkbox-checked-stroke-color: (<color>) Controls the checkmark stroke color when checked.
 * @prop --tct-checkbox-checked-outer-stroke-color: (<color>) Controls the outer stroke color of the checkbox control when checked.
 * @prop --tct-checkbox-hover-outer-stroke-color: (<color>) Controls the outer stroke color of the checkbox control when hovered.
 * @prop --tct-checkbox-hover-outer-fill-color: (<color>) Controls the outer fill color of the checkbox control when hovered.
 * @prop --tct-checkbox-hover-box-shadow?: (*) Controls the optional box shadow of the checkbox control when hovered.
 * @prop --tct-checkbox-focused-outer-stroke-color: (<color>) Controls the outer stroke color of the checkbox control when focused.
 * @prop --tct-checkbox-focused-outer-fill-color: (<color>) Controls the outer fill color of the checkbox control when focused.
 * @prop --tct-checkbox-focused-box-shadow: (*) Controls the box shadow of the checkbox control when focused.
 * @prop --tct-checkbox-error-outer-stroke-color: (<color>) Controls the outer stroke color of the checkbox control in the error state.
 * @prop --tct-checkbox-error-outer-fill-color: (<color>) Controls the outer fill color of the checkbox control in the error state.
 * @prop --tct-checkbox-error-box-shadow?: (*) Controls the optional box shadow of the checkbox control in the error state.
 * @prop --tct-checkbox-error-checked-outer-fill-color?: (<color>) Controls the optional outer fill color of the checkbox control when checked and in the error state.
 * @prop --tct-checkbox-error-checkmark-stroke-color: (<color>) Controls the checkmark stroke color in the error state.
 * @prop --tct-checkbox-error-checkmark-stroke-width: (<number>) Controls the checkmark stroke width in the error state.
 * @prop --tct-checkbox-error-hover-outer-stroke-color: (<color>) Controls the outer stroke color when hovered in the error state.
 * @prop --tct-checkbox-error-hover-outer-fill-color: (<color>) Controls the outer fill color when hovered in the error state.
 * @prop --tct-checkbox-error-hover-box-shadow: (*) Controls the box shadow when hovered in the error state.
 * @prop --tct-checkbox-error-hover-stroke-width?: (<number>) Controls the optional label text stroke width when hovered in the error state.
 * @prop --tct-checkbox-error-focused-outer-stroke-color: (<color>) Controls the outer stroke color when focused in the error state.
 * @prop --tct-checkbox-error-focused-outer-fill-color: (<color>) Controls the outer fill color when focused in the error state.
 * @prop --tct-checkbox-error-focused-box-shadow: (*) Controls the box shadow when focused in the error state.
 * @prop --tct-checkbox-error-focused-stroke-width?: (<number>) Controls the optional label text stroke width when focused in the error state.
 * @prop --tct-checkbox-error-active-stroke-width?: (<number>) Controls the optional label text stroke width when active in the error state.
 * @prop --tct-checkbox-error-label-active-color?: (<color>) Controls the optional label text color when active in the error state.
 * @prop --tct-checkbox-checked-error-hover-stroke-width?: (<number>) Controls the optional label text stroke width when checked, hovered, and in the error state.
 * @prop --tct-checkbox-checked-error-focused-stroke-width?: (<number>) Controls the optional label text stroke width when checked, focused, and in the error state.
 * @prop --tct-checkbox-checked-error-active-stroke-width?: (<number>) Controls the optional label text stroke width when checked, active, and in the error state.
 * @prop --tct-checkbox-checked-error-label-hover-color?: (<color>) Controls the optional label text color when checked, hovered, and in the error state.
 * @prop --tct-checkbox-checked-error-label-active-color?: (<color>) Controls the optional label text color when checked, active, and in the error state.
 * @prop --tct-checkbox-checked-error-description-hover-color?: (<color>) Controls the optional description color when checked, hovered, and in the error state.
 * @prop --tct-checkbox-checked-error-description-hover-stroke-width?: (<number>) Controls the optional description text stroke width when checked, hovered, and in the error state.
 * @prop --tct-checkbox-checked-error-description-active-color?: (<color>) Controls the optional description color when checked, active, and in the error state.
 * @prop --tct-checkbox-checked-error-description-active-stroke-width?: (<number>) Controls the optional description text stroke width when checked, active, and in the error state.
 * @prop --tct-checkbox-error-description-active-color?: (<color>) Controls the optional description color when active in the error state.
 * @prop --tct-checkbox-error-description-active-stroke-width?: (<number>) Controls the optional description text stroke width when active in the error state.
 * @prop --tct-checkbox-label-color?: (<color>) Controls the optional label text color in the default state.
 * @prop --tct-checkbox-label-font-size?: (<length-percentage>) Controls the optional font size of the checkbox label.
 * @prop --tct-checkbox-label-line-height: (<number> | <length-percentage>) Controls the line height of the checkbox label.
 * @prop --tct-checkbox-label-hyphens: (<custom-ident>) Controls the hyphens behavior of the checkbox label.
 * @prop --tct-checkbox-label-word-break: (<custom-ident>) Controls the word-break behavior of the checkbox label.
 * @prop --tct-checkbox-label-word-wrap: (<custom-ident>) Controls the word-wrap behavior of the checkbox label.
 * @prop --tct-checkbox-label-hover-color?: (<color>) Controls the optional label text color when hovered.
 * @prop --tct-checkbox-label-active-color?: (<color>) Controls the optional label text color when active.
 * @prop --tct-checkbox-checked-label-hover-color?: (<color>) Controls the optional label text color when checked and hovered.
 * @prop --tct-checkbox-checked-label-active-color?: (<color>) Controls the optional label text color when checked and active.
 * @prop --tct-checkbox-description-font-weight: (<number>) Controls the font weight of the checkbox description.
 * @prop --tct-checkbox-description-stroke-width: (<length>) Controls the description text stroke width in the default state.
 * @prop --tct-checkbox-description-hover-color?: (<color>) Controls the optional description color when hovered.
 * @prop --tct-checkbox-description-hover-stroke-width: (<length>) Controls the description text stroke width when hovered.
 * @prop --tct-checkbox-hover-description-font-weight: (<number>) Controls the description font weight when hovered.
 * @prop --tct-checkbox-description-active-color?: (<color>) Controls the optional description color when active.
 * @prop --tct-checkbox-description-active-stroke-width?: (<number>) Controls the optional description text stroke width when active.
 * @prop --tct-checkbox-description-focused-stroke-width: (<length>) Controls the description text stroke width when focused.
 * @prop --tct-checkbox-checked-description-hover-color?: (<color>) Controls the optional description color when checked and hovered.
 * @prop --tct-checkbox-checked-description-hover-stroke-width?: (<number>) Controls the optional description text stroke width when checked and hovered.
 * @prop --tct-checkbox-checked-description-active-color?: (<color>) Controls the optional description color when checked and active.
 * @prop --tct-checkbox-checked-description-active-stroke-width?: (<number>) Controls the optional description text stroke width when checked and active.
 * @prop --tct-checkbox-animation-duration: (<time>) Controls the duration of the checkmark draw animation.
 * @prop --tct-checkbox-animation-timing-function: (*) Controls the timing function of the checkmark draw animation.
 * @prop --tct-checkbox-animation-fill-mode: (<custom-ident>) Controls the animation-fill-mode of the checkmark draw animation.
 * @prop --tct-checkbox-favorite-stroke-color: (<color>) Controls the icon stroke color when type is favorite, in the default state.
 * @prop --tct-checkbox-favorite-stroke-width: (<number>) Controls the icon stroke width when type is favorite, in the default state.
 * @prop --tct-checkbox-favorite-fill-color: (<color>) Controls the icon fill color when type is favorite.
 * @prop --tct-checkbox-favorite-hover-stroke-color: (<color>) Controls the icon stroke color when type is favorite, on hover.
 * @prop --tct-checkbox-favorite-hover-stroke-width: (<number>) Controls the icon stroke width when type is favorite, on hover.
 * @prop --tct-checkbox-favorite-focused-stroke-color: (<color>) Controls the icon stroke color when type is favorite, on focus.
 * @prop --tct-checkbox-favorite-checked-stroke-color: (<color>) Controls the icon stroke color when type is favorite and checked.
 * @prop --tct-checkbox-favorite-checked-fill-color: (<color>) Controls the icon fill color when type is favorite and checked.
 * @prop --tct-checkbox-favorite-checked-hover-stroke-color: (<color>) Controls the icon stroke color when type is favorite, checked, and hovered.
 * @prop --tct-checkbox-favorite-checked-focused-stroke-color: (<color>) Controls the icon stroke color when type is favorite, checked, and focused.
 * @prop --tct-checkbox-favorite-error-stroke-color: (<color>) Controls the icon stroke color when type is favorite and in the error state.
 * @prop --tct-checkbox-toggle-width: (<length>) Controls the width of the toggle control when type is toggle.
 * @prop --tct-checkbox-toggle-color: (<color>) Controls the toggle indicator color when type is toggle, in the default state.
 * @prop --tct-checkbox-toggle-icon-stroke-width: (<number>) Controls the icon stroke width inside the toggle.
 * @prop --tct-checkbox-toggle-track-color?: (<color>) Controls the optional track outline color when type is toggle, in the default state.
 * @prop --tct-checkbox-toggle-track-fill?: (<color>) Controls the optional track fill when type is toggle, in the default state.
 * @prop --tct-checkbox-toggle-track-box-shadow: (*) Controls the box shadow of the toggle track in the default state.
 * @prop --tct-checkbox-toggle-active-color: (<color>) Controls the toggle indicator color when active.
 * @prop --tct-checkbox-toggle-active-fill: (<color>) Controls the toggle indicator fill when active.
 * @prop --tct-checkbox-toggle-active-track-color: (<color>) Controls the toggle track color when active.
 * @prop --tct-checkbox-toggle-active-track-fill: (<color>) Controls the toggle track fill when active.
 * @prop --tct-checkbox-toggle-hover-circle-color: (<color>) Controls the toggle indicator (circle) color on hover when not checked.
 * @prop --tct-checkbox-toggle-hover-track-box-shadow: (*) Controls the box shadow of the toggle track on hover.
 * @prop --tct-checkbox-toggle-hover-track-color: (<color>) Controls the toggle track outline color on hover.
 * @prop --tct-checkbox-toggle-hover-track-fill: (<color>) Controls the toggle track fill on hover.
 * @prop --tct-checkbox-toggle-checked-circle-color: (<color>) Controls the toggle indicator (circle) color when checked.
 * @prop --tct-checkbox-toggle-checked-track-color: (<color>) Controls the toggle track color when checked.
 * @prop --tct-checkbox-toggle-checked-hover-track-color: (<color>) Controls the toggle track color when checked and hovered.
 * @prop --tct-checkbox-toggle-checked-active-track-color: (<color>) Controls the toggle track color when checked and active.
 * @prop --tct-checkbox-toggle-error-color: (<color>) Controls the toggle indicator color in the error state.
 * @prop --tct-checkbox-toggle-error-active-color: (<color>) Controls the toggle indicator color when active in the error state.
 * @prop --tct-checkbox-toggle-error-active-track-color: (<color>) Controls the toggle track color when active in the error state.
 * @prop --tct-checkbox-toggle-error-active-track-fill: (<color>) Controls the toggle track fill when active in the error state.
 * @prop --tct-checkbox-toggle-error-hover-color: (<color>) Controls the toggle indicator color when hovered in the error state.
 * @prop --tct-checkbox-toggle-error-hover-track-color: (<color>) Controls the toggle track color when hovered in the error state.
 * @prop --tct-checkbox-toggle-error-hover-track-fill: (<color>) Controls the toggle track fill when hovered in the error state.
 * @prop --tct-checkbox-toggle-error-track-color: (<color>) Controls the toggle track color in the error state.
 * @prop --tct-checkbox-toggle-error-track-fill: (<color>) Controls the toggle track fill in the error state.
 * @prop --tct-checkbox-toggle-checked-error-track-color: (<color>) Controls the toggle track color when checked in the error state.
 * @prop --tct-checkbox-toggle-checked-error-hover-track-color: (<color>) Controls the toggle track color when checked, hovered, and in the error state.
 * @prop --tct-checkbox-toggle-checked-error-active-track-color: (<color>) Controls the toggle track color when checked, active, and in the error state.
 */
:host {
  --comp-checkbox-padding: var(--tct-checkbox-padding, var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, 8px)) 0);
  display: block;
  position: relative;
  padding: var(--comp-checkbox-padding);
  --comp-default-checkbox-margin: var(--tct-checkbox-margin-top, var(--t-checkbox-margin-top, 0px)) 0 var(--tct-checkbox-margin-bottom, var(--t-checkbox-margin-bottom, 0px));
  margin: var(--tct-checkbox-margin, var(--comp-default-checkbox-margin));
}

.container {
  --comp-checkbox-size: var(--tct-checkbox-size, var(--t-checkbox-size, 24px));
  --comp-checkbox-default-column-gap: var(--app-scale-2x, 10px);
  --comp-checkbox-default-row-gap: 0;
  --comp-checkbox-default-gap: var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);
  --comp-checkbox-label-line-height: var(--tct-checkbox-label-line-height, var(--const-px-24, 24px));
  --comp-checkbox-tween: var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
  --comp-checkbox-toggle-width: var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 38px));
  --comp-checkbox-toggle-track-fill: var(--tct-checkbox-toggle-track-fill, var(--tct-checkbox-toggle-track-color, transparent));
  --comp-checkbox-toggle-track-fill-active: var(--tct-checkbox-toggle-active-track-fill, var(--tct-checkbox-toggle-active-track-color, var(--tct-checkbox-toggle-active-color, var(--t-primary-l1, #7755af))));
  --comp-checkbox-toggle-track-fill-hover: var(--tct-checkbox-toggle-hover-track-fill, var(--tct-checkbox-toggle-hover-track-color, var(--comp-checkbox-toggle-track-fill)));
  --comp-checkbox-toggle-track-fill-error: var(--tct-checkbox-toggle-error-track-fill, var(--tct-checkbox-toggle-error-track-color, var(--comp-checkbox-toggle-track-fill)));
  --comp-checkbox-toggle-track-fill-error-hover: var(--tct-checkbox-toggle-error-hover-track-fill, var(--tct-checkbox-toggle-error-hover-track-color, var(--comp-checkbox-toggle-track-fill-error)));
  --comp-checkbox-toggle-track-fill-error-active: var(--tct-checkbox-toggle-error-active-track-fill, var(--tct-checkbox-toggle-error-active-track-color, var(--comp-checkbox-toggle-track-fill-error)));
  --comp-checkbox-toggle-error-color: var(--tct-checkbox-toggle-error-color, var(--comp-checkbox-error-color));
  --comp-checkbox-toggle-color: var(--tct-checkbox-toggle-color, var(--t-gray-8, #808080));
  --comp-checkbox-gap: var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));
  --comp-control-height: var(--comp-checkbox-size);
  --comp-checkbox-outer-stroke-color: var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));
  --comp-checkbox-outer-fill-color: var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));
  --comp-checkbox-checked-fill-color: var(--tct-checkbox-checked-fill-color, var(--t-primary, #040404));
  --comp-checkbox-checked-color: var(--tct-checkbox-checked-stroke-color, var(--tct-white, var(--app-white, #FFFFFF)));
  --comp-control-width: var(--comp-checkbox-size);
  --comp-checkbox-error-color: var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));
  --comp-checkbox-bold-fallback-stroke-width: var(--tct-checkbox-bold-fallback-stroke-width, 0.7px);
  --comp-checkbox-stroke-width: var(--tct-checkbox-stroke-width, unset);
  --comp-checkbox-checked-stroke-width: var(--tct-checkbox-checked-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));
  --comp-checkbox-hover-stroke-width: var(--tct-checkbox-hover-stroke-width, unset);
  --comp-checkbox-focused-stroke-width: var(--tct-checkbox-focused-stroke-width, unset);
  --comp-checkbox-checked-hover-stroke-width: var(--tct-checkbox-checked-hover-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));
  --comp-checkbox-checked-focused-stroke-width: var(--tct-checkbox-checked-focused-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));
  --comp-checkbox-description-stroke-width: var(--tct-checkbox-description-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));
  --comp-checkbox-description-focused-stroke-width: var(--tct-checkbox-description-focused-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));
  --comp-checkbox-description-hover-stroke-width: var(--tct-checkbox-description-hover-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));
  --comp-checkbox-toggle-circle-fill-active: var(--tct-checkbox-toggle-active-fill, var(--tct-checkbox-toggle-active-color, var(--comp-checkbox-toggle-color)));
  display: grid;
  grid-template-areas: "svg label";
  align-items: center;
  gap: var(--comp-checkbox-gap);
  grid-template-columns: var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap));
}
:host([type=favorite]) .container {
  --comp-checkbox-favorite-stroke-color: var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));
  --comp-checkbox-favorite-fill-color: var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24));
}
.container.has-description {
  grid-template-areas: "svg label" ". description";
  align-items: start;
}
.container.has-multiline-label {
  align-items: start;
}
.container.has-description .label-control, .container.has-multiline-label .label-control {
  margin-top: calc((var(--comp-checkbox-label-line-height) - var(--comp-control-height)) / 2);
}
:host([hide-label]:not([hide-label=false])) .container {
  grid-template-areas: "svg";
  grid-template-columns: var(--comp-control-width);
}
:host([type=toggle]) .container {
  --comp-control-width: var(--comp-checkbox-toggle-width);
  --comp-control-height: 30px;
}
:host([align=right]) .container, :host([alignment=right]) .container, :host([type=toggle]:not([align]):not([alignment])) .container {
  grid-template-areas: "label svg";
  grid-template-columns: calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width);
}
:host([align=right]) .container.has-description, :host([alignment=right]) .container.has-description, :host([type=toggle]:not([align]):not([alignment])) .container.has-description {
  grid-template-areas: "label svg" "description .";
}

.label-control {
  align-items: center;
  display: flex;
}

.label-text {
  grid-area: label;
}
:host([description]) .label-text {
  -webkit-text-stroke-width: var(--comp-checkbox-description-stroke-width);
  text-stroke-width: var(--comp-checkbox-description-stroke-width);
}
:host([checked]:not([checked=false])) .label-text {
  -webkit-text-stroke-width: var(--comp-checkbox-checked-stroke-width);
  text-stroke-width: var(--comp-checkbox-checked-stroke-width);
}
:host(:hover) .label-text {
  -webkit-text-stroke-width: var(--comp-checkbox-hover-stroke-width);
  text-stroke-width: var(--comp-checkbox-hover-stroke-width);
}
:host(:focus-within) .label-text {
  -webkit-text-stroke-width: var(--comp-checkbox-focused-stroke-width);
  text-stroke-width: var(--comp-checkbox-focused-stroke-width);
}
:host([description]:hover) .label-text {
  -webkit-text-stroke-width: var(--comp-checkbox-description-hover-stroke-width);
  text-stroke-width: var(--comp-checkbox-description-hover-stroke-width);
}
:host([checked]:not([checked=false]):hover) .label-text {
  -webkit-text-stroke-width: var(--comp-checkbox-checked-hover-stroke-width);
  text-stroke-width: var(--comp-checkbox-checked-hover-stroke-width);
}
:host([description]:focus-within) .label-text {
  -webkit-text-stroke-width: var(--comp-checkbox-description-focused-stroke-width);
  text-stroke-width: var(--comp-checkbox-description-focused-stroke-width);
}
:host([checked]:not([checked=false]):focus-within) .label-text {
  -webkit-text-stroke-width: var(--comp-checkbox-checked-focused-stroke-width);
  text-stroke-width: var(--comp-checkbox-checked-focused-stroke-width);
}
:host(:active) .label-text {
  -webkit-text-stroke-width: var(--tct-checkbox-active-stroke-width, unset);
  text-stroke-width: var(--tct-checkbox-active-stroke-width, unset);
}
:host([checked]:not([checked=false]):active) .label-text {
  -webkit-text-stroke-width: var(--tct-checkbox-checked-active-stroke-width, unset);
  text-stroke-width: var(--tct-checkbox-checked-active-stroke-width, unset);
}
:host([has-error]:not([has-error=false]):hover) .label-text {
  -webkit-text-stroke-width: var(--tct-checkbox-error-hover-stroke-width, unset);
  text-stroke-width: var(--tct-checkbox-error-hover-stroke-width, unset);
}
:host([has-error]:not([has-error=false]):focus-within) .label-text {
  -webkit-text-stroke-width: var(--tct-checkbox-error-focused-stroke-width, unset);
  text-stroke-width: var(--tct-checkbox-error-focused-stroke-width, unset);
}
:host([has-error]:not([has-error=false]):active) .label-text {
  -webkit-text-stroke-width: var(--tct-checkbox-error-active-stroke-width, unset);
  text-stroke-width: var(--tct-checkbox-error-active-stroke-width, unset);
}
:host([checked]:not([checked=false])[has-error]:not([has-error=false]):hover) .label-text {
  -webkit-text-stroke-width: var(--tct-checkbox-checked-error-hover-stroke-width, unset);
  text-stroke-width: var(--tct-checkbox-checked-error-hover-stroke-width, unset);
}
:host([checked]:not([checked=false])[has-error]:not([has-error=false]):focus-within) .label-text {
  -webkit-text-stroke-width: var(--tct-checkbox-checked-error-focused-stroke-width, unset);
  text-stroke-width: var(--tct-checkbox-checked-error-focused-stroke-width, unset);
}
:host([checked]:not([checked=false])[has-error]:not([has-error=false]):active) .label-text {
  -webkit-text-stroke-width: var(--tct-checkbox-checked-error-active-stroke-width, unset);
  text-stroke-width: var(--tct-checkbox-checked-error-active-stroke-width, unset);
}
.label-text label {
  line-height: var(--comp-checkbox-label-line-height);
}
.label-text label .label-content {
  display: inline;
  font-size: var(--tct-checkbox-label-font-size, inherit);
}

.description-text {
  grid-area: description;
  font-weight: var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400));
}
:host(:hover) .description-text {
  font-weight: var(--tct-checkbox-hover-description-font-weight, var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400)));
}

label {
  color: var(--tct-checkbox-label-color);
  cursor: pointer;
  hyphens: var(--tct-checkbox-label-hyphens, auto);
  word-break: var(--tct-checkbox-label-word-break, break-word);
  word-wrap: var(--tct-checkbox-label-word-wrap, break-word);
}

.checkbox-icon {
  width: var(--comp-checkbox-size);
  height: var(--comp-checkbox-size);
  border-radius: var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));
  stroke: var(--comp-checkbox-outer-stroke-color);
  fill: var(--comp-checkbox-outer-fill-color);
  stroke-width: var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));
  flex-shrink: 0;
  box-shadow: var(--tct-checkbox-box-shadow);
}
.checkbox-icon rect {
  transition: fill var(--tct-checkbox-tween, var(--app-tween-2, 0.4s ease));
}
:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon {
  stroke: var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-checked-fill-color, var(--comp-checkbox-outer-stroke-color))));
}
:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon rect {
  fill: var(--comp-checkbox-checked-fill-color);
}
:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon {
  stroke: var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));
  box-shadow: var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-box-shadow));
}
:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon rect {
  fill: var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color));
}
:host([has-error]:not([has-error=false]):not([type=favorite])[checked]:not([checked=false])) .checkbox-icon rect {
  fill: var(--tct-checkbox-error-checked-outer-fill-color);
}
:host([indeterminate]:not([indeterminate=false]):not([type=favorite])) .checkbox-icon {
  stroke: var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-checked-fill-color, var(--comp-checkbox-outer-stroke-color))));
}
:host([indeterminate]:not([indeterminate=false]):not([type=favorite])) .checkbox-icon rect {
  fill: var(--comp-checkbox-checked-fill-color);
}
:host(:hover:not([type=favorite])) .checkbox-icon {
  stroke: var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));
  box-shadow: var(--tct-checkbox-hover-box-shadow, var(--tct-checkbox-box-shadow));
}
:host(:hover:not([type=favorite])) .checkbox-icon rect {
  fill: var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color));
}
:host(:hover[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon {
  stroke: var(--tct-checkbox-error-hover-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));
  box-shadow: var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow, var(--tct-checkbox-box-shadow))));
}
:host(:hover[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon rect {
  fill: var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));
}
:host(:focus-within:not([type=favorite])) .checkbox-icon {
  --comp-checkbox-focused-box-shadow: var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);
  stroke: var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)));
  fill: var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));
  box-shadow: var(--tct-checkbox-focused-box-shadow, var(--tct-checkbox-box-shadow, var(--comp-checkbox-focused-box-shadow)));
}
:host(:focus-within[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon {
  stroke: var(--tct-checkbox-error-focused-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));
  fill: var(--tct-checkbox-error-focused-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));
  box-shadow: var(--tct-checkbox-error-focused-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-box-shadow, var(--comp-checkbox-focused-box-shadow))));
}
:host([type=favorite]) .checkbox-icon {
  --tct-icon-stroke-width: var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));
  --tct-icon-stroke-primary: var(--comp-checkbox-favorite-stroke-color);
  transition: fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween);
}
:host(:hover[type=favorite]) .checkbox-icon {
  --tct-icon-stroke-primary: var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-fill-color));
  --tct-icon-stroke-width: var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2));
}
:host([type=favorite]:focus-within) .checkbox-icon {
  --tct-icon-stroke-primary: var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-fill-color));
  --tct-icon-stroke-width: var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2));
}
:host([checked]:not([checked=false])[type=favorite]) .checkbox-icon {
  --tct-icon-stroke-primary: var(--tct-checkbox-favorite-checked-stroke-color, var(--tct-checkbox-favorite-stroke-color, var(--comp-checkbox-favorite-fill-color)));
  fill: var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));
  transition: fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween);
}
:host([checked]:not([checked=false])[type=favorite]:hover) .checkbox-icon {
  --tct-icon-stroke-primary: var(--tct-checkbox-favorite-checked-hover-stroke-color, var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-stroke-color)));
  --tct-icon-fill-primary: var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));
  --tct-icon-stroke-width: var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2));
}
:host([checked]:not([checked=false])[type=favorite]:focus-within) .checkbox-icon {
  --tct-icon-stroke-primary: var(--tct-checkbox-favorite-checked-focused-stroke-color, var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-stroke-color)));
  --tct-icon-stroke-width: var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2));
}
:host([has-error]:not([has-error=false])[type=favorite]) .checkbox-icon {
  --tct-icon-stroke-primary: var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color));
}
:host([has-error]:not([has-error=false])[type=favorite][checked]:not([checked=false])) .checkbox-icon {
  --tct-icon-stroke-primary: var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color));
}

.checkbox-fill {
  fill: none;
  stroke: var(--comp-checkbox-checked-color);
  stroke-width: var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));
  stroke-linecap: round;
  stroke-linejoin: round;
}
:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-fill {
  stroke: var(--tct-checkbox-error-checkmark-stroke-color, #d20a0a);
  stroke-width: var(--tct-checkbox-error-checkmark-stroke-width, 2.5);
}

.checked-fill {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  animation-name: draw-checkmark;
  animation-duration: var(--tct-checkbox-animation-duration, var(--t-tween-time-in-4, 300ms));
  animation-timing-function: var(--tct-checkbox-animation-timing-function, ease-out);
  animation-fill-mode: var(--tct-checkbox-animation-fill-mode, forwards);
}

@keyframes draw-checkmark {
  to {
    stroke-dashoffset: 0;
  }
}
.indeterminate-fill {
  stroke-width: var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5));
}

.toggle-svg-container {
  height: 30px;
  width: var(--comp-checkbox-toggle-width);
  position: relative;
  text-align: initial;
}

.toggle-indicator,
.toggle-track {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.toggle-indicator {
  transition: left var(--comp-checkbox-tween), height var(--comp-checkbox-tween), width var(--comp-checkbox-tween);
  height: 16px;
  width: 16px;
  left: 4px;
  border-radius: 50%;
}

.toggle-track {
  --comp-default-track-box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-color);
  height: 24px;
  width: 38px;
  fill: var(--comp-checkbox-toggle-track-fill);
  border-radius: var(--app-border-radius-3, 12px);
  box-shadow: var(--tct-checkbox-toggle-track-box-shadow, var(--comp-default-track-box-shadow));
  transition: fill var(--comp-checkbox-tween), box-shadow var(--comp-checkbox-tween);
}

.toggle-circle {
  mask: url(#xMask);
  fill: var(--comp-checkbox-toggle-color);
  transition: fill var(--comp-checkbox-tween);
}

.toggle-icon {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--tct-checkbox-toggle-icon-stroke-width, 2);
  stroke: black;
}

:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .toggle-track,
:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .toggle-track {
  --comp-default-hover-track-box-shadow: inset 0 0 0 2px var(--comp-checkbox-toggle-color);
  box-shadow: var(--tct-checkbox-toggle-hover-track-box-shadow, var(--comp-default-hover-track-box-shadow));
  fill: var(--comp-checkbox-toggle-track-fill-hover);
}
:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .toggle-indicator,
:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .toggle-indicator {
  height: 18px;
  width: 18px;
}
:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .toggle-circle,
:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .toggle-circle {
  fill: var(--tct-checkbox-toggle-hover-circle-color, var(--t-primary-d1, var(--t-gray-6, #4d4d4d)));
}
:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .label-text,
:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .label-text {
  color: var(--tct-checkbox-label-hover-color, inherit);
}
:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .description-text,
:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .description-text {
  color: var(--tct-checkbox-description-hover-color, inherit);
  -webkit-text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);
  text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);
}
:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .toggle-circle {
  fill: var(--comp-checkbox-toggle-track-fill-active);
}
:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .label-text {
  color: var(--tct-checkbox-label-active-color, inherit);
}
:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .description-text {
  color: var(--tct-checkbox-description-active-color, inherit);
  -webkit-text-stroke-width: var(--tct-checkbox-description-active-stroke-width, unset);
  text-stroke-width: var(--tct-checkbox-description-active-stroke-width, unset);
}
:host(:is(:not([checked]), [checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .toggle-circle {
  fill: var(--comp-checkbox-toggle-circle-fill-active);
}
:host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])) .toggle-track {
  box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-error-color);
  fill: var(--comp-checkbox-toggle-track-fill-error);
}
:host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])) .toggle-circle {
  fill: var(--comp-checkbox-toggle-error-color);
}
:host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .toggle-track,
:host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .toggle-track {
  box-shadow: inset 0 0 0 2px var(--comp-checkbox-toggle-error-color);
  fill: var(--comp-checkbox-toggle-track-fill-error-hover);
}
:host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .toggle-circle,
:host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .toggle-circle {
  fill: var(--tct-checkbox-toggle-error-hover-color, var(--comp-checkbox-toggle-error-color));
}
:host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .label-text,
:host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .label-text {
  color: var(--tct-checkbox-label-hover-color, inherit);
}
:host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .description-text,
:host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .description-text {
  color: var(--tct-checkbox-description-hover-color, inherit);
  -webkit-text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);
  text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);
}
:host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .toggle-track {
  fill: var(--comp-checkbox-toggle-track-fill-error-active);
}
:host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .toggle-circle {
  fill: var(--tct-checkbox-toggle-error-active-color, var(--comp-checkbox-toggle-error-color));
}
:host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .label-text {
  color: var(--tct-checkbox-error-label-active-color, inherit);
}
:host(:is(:not([checked]), [checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .description-text {
  color: var(--tct-checkbox-error-description-active-color, inherit);
  -webkit-text-stroke-width: var(--tct-checkbox-error-description-active-stroke-width, unset);
  text-stroke-width: var(--tct-checkbox-error-description-active-stroke-width, unset);
}

:host([checked]:not([checked=false])) .toggle-indicator {
  left: 18px;
}
:host([checked]:not([checked=false])) .toggle-track {
  fill: var(--tct-checkbox-toggle-checked-track-color, var(--t-primary, #6a4a9e));
  border: none;
}
:host([checked]:not([checked=false])) .toggle-circle {
  mask: url(#checkMask);
  fill: var(--tct-checkbox-toggle-checked-circle-color, var(--t-base, #ffffff));
}
:host([checked]:not([checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .toggle-track,
:host([checked]:not([checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .toggle-track {
  fill: var(--tct-checkbox-toggle-checked-hover-track-color, var(--t-primary-d1, #5f438e));
}
:host([checked]:not([checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .toggle-indicator,
:host([checked]:not([checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .toggle-indicator {
  height: 18px;
  width: 18px;
}
:host([checked]:not([checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .label-text,
:host([checked]:not([checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .label-text {
  color: var(--tct-checkbox-checked-label-hover-color, inherit);
}
:host([checked]:not([checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .description-text,
:host([checked]:not([checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .description-text {
  color: var(--tct-checkbox-checked-description-hover-color, inherit);
  -webkit-text-stroke-width: var(--tct-checkbox-checked-description-hover-stroke-width, unset);
  text-stroke-width: var(--tct-checkbox-checked-description-hover-stroke-width, unset);
}
:host([checked]:not([checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .toggle-track {
  fill: var(--tct-checkbox-toggle-checked-active-track-color, var(--t-primary-l1, #7755af));
}
:host([checked]:not([checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .toggle-indicator {
  height: 18px;
  width: 18px;
}
:host([checked]:not([checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .label-text {
  color: var(--tct-checkbox-checked-label-active-color, inherit);
}
:host([checked]:not([checked=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .description-text {
  color: var(--tct-checkbox-checked-description-active-color, inherit);
  -webkit-text-stroke-width: var(--tct-checkbox-checked-description-active-stroke-width, unset);
  text-stroke-width: var(--tct-checkbox-checked-description-active-stroke-width, unset);
}
:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])) .toggle-track {
  fill: var(--tct-checkbox-toggle-checked-error-track-color, var(--comp-checkbox-toggle-error-color));
}
:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .toggle-track,
:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .toggle-track {
  fill: var(--tct-checkbox-toggle-checked-error-hover-track-color, var(--comp-checkbox-toggle-error-color));
}
:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .label-text,
:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .label-text {
  color: var(--tct-checkbox-checked-error-label-hover-color, inherit);
}
:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :hover .description-text,
:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :focus-within .description-text {
  color: var(--tct-checkbox-checked-error-description-hover-color, inherit);
  -webkit-text-stroke-width: var(--tct-checkbox-checked-error-description-hover-stroke-width, unset);
  text-stroke-width: var(--tct-checkbox-checked-error-description-hover-stroke-width, unset);
}
:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .toggle-track {
  fill: var(--tct-checkbox-toggle-checked-error-active-track-color, var(--comp-checkbox-toggle-error-color));
}
:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .label-text {
  color: var(--tct-checkbox-checked-error-label-active-color, inherit);
}
:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]), [disabled=false]):is(:not([group-disabled]), [group-disabled=false])) :active .description-text {
  color: var(--tct-checkbox-checked-error-description-active-color, inherit);
  -webkit-text-stroke-width: var(--tct-checkbox-checked-error-description-active-stroke-width, unset);
  text-stroke-width: var(--tct-checkbox-checked-error-description-active-stroke-width, unset);
}

:host(:is([disabled]:not([disabled=false]), [group-disabled]:not([group-disabled=false]))) {
  cursor: not-allowed;
  opacity: var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));
}
:host(:is([disabled]:not([disabled=false]), [group-disabled]:not([group-disabled=false]))) label {
  cursor: not-allowed;
}