* {
  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-radio-transition: (*) Controls the transition timing of radio state changes.
 * @prop --tct-radio-mark-size: (<length>) Controls the width and height of the radio mark.
 * @prop --tct-radio-stroke-width: (<number>) Controls the stroke width of the radio circles in the default state. Values above `2` are clipped by the radio mark envelope.
 * @prop --tct-radio-stroke-color: (<color>) Controls the stroke color of the radio circles in the default state.
 * @prop --tct-radio-background-fill?: (<color>) Controls the optional background fill of the radio in the default state.
 * @prop --tct-radio-background-stroke: (<color>) Controls the stroke color of the radio in the default state.
 * @prop --tct-radio-background-stroke-width: (<number>) Controls the stroke width of the radio in the default state.
 * @prop --tct-radio-background-transition: (*) Controls the transition timing applied to the radio fill.
 * @prop --tct-radio-box-shadow?: (*) Controls the optional box shadow of the radio.
 * @prop --tct-radio-box-shadow-focus-visible: (*) Controls the box shadow of the radio when focused via keyboard.
 * @prop --tct-radio-focus-box-shadow?: (*) Controls the optional box shadow of the radio on focus.
 * @prop --tct-radio-select-fill-default?: (<color>) Controls the optional inner-circle fill in the default state.
 * @prop --tct-radio-select-fill-checked: (<color>) Controls the inner-circle fill when the radio is checked.
 * @prop --tct-radio-checked-fill: (<color>) Controls the inner-circle fill when the radio is checked (legacy alias).
 * @prop --tct-radio-checked-background-fill?: (<color>) Controls the optional background fill when the radio is checked.
 * @prop --tct-radio-checked-stroke-color: (<color>) Controls the stroke color when the radio is checked.
 * @prop --tct-radio-selected-fill-active: (<color>) Controls the inner-circle fill when the radio is active.
 * @prop --tct-radio-background-fill-active?: (<color>) Controls the optional background fill when the radio is active.
 * @prop --tct-radio-background-stroke-active: (<color>) Controls the stroke color when the radio is active.
 * @prop --tct-radio-hover-background-fill?: (<color>) Controls the optional background fill when the radio is hovered.
 * @prop --tct-radio-hover-stroke-color: (<color>) Controls the stroke color when the radio is hovered.
 * @prop --tct-radio-checked-hover-stroke-color: (<color>) Controls the stroke color when a checked radio is hovered.
 * @prop --tct-radio-hover-label-color?: (<color>) Controls the optional label text color when the radio is hovered.
 * @prop --tct-radio-focus-background-fill?: (<color>) Controls the optional background fill when the radio is focused.
 * @prop --tct-radio-focus-stroke-color: (<color>) Controls the stroke color when the radio is focused.
 * @prop --tct-radio-focus-label-color?: (<color>) Controls the optional label text color when the radio is focused.
 * @prop --tct-radio-label-color-active?: (<color>) Controls the optional label text color when the radio is active.
 * @prop --tct-radio-label-font-color?: (<color>) Controls the optional label text color in the default state.
 * @prop --tct-radio-label-font-color-checked?: (<color>) Controls the optional label text color when the radio is checked.
 * @prop --tct-radio-checked-label-font-color?: (<color>) Controls the optional label text color when the radio is checked (legacy alias).
 * @prop --tct-radio-label-font-size: (<length-percentage>) Controls the font size of the radio label.
 * @prop --tct-radio-label-font-weight: (<number>) Controls the font weight of the radio label.
 * @prop --tct-radio-font-weight: (<number>) Controls the font weight of the radio label (legacy alias).
 * @prop --tct-radio-label-font-weight-active: (<number>) Controls the label font weight when the radio is active.
 * @prop --tct-radio-label-font-weight-checked: (<number>) Controls the label font weight when the radio is checked.
 * @prop --tct-radio-checked-label-font-weight: (<number>) Controls the label font weight when the radio is checked (legacy alias).
 * @prop --tct-radio-label-letter-spacing: (<length>) Controls the letter spacing of the radio label.
 * @prop --tct-radio-label-letter-spacing-active: (<length>) Controls the label letter spacing when the radio is active.
 * @prop --tct-radio-label-letter-spacing-checked: (<length>) Controls the label letter spacing when the radio is checked.
 * @prop --tct-radio-checked-label-letter-spacing: (<length>) Controls the label letter spacing when the radio is checked (legacy alias).
 * @prop --tct-radio-label-gap: (<length-percentage>) Controls the gap between the radio circle and label content.
 * @prop --tct-radio-label-margin-right: (<length-percentage>) Controls the right margin of the radio label.
 * @prop --tct-radio-min-height: (<length>) Controls the minimum height of the radio label row.
 * @prop --tct-radio-hidden-columns: (*) Controls the grid-template-columns when the label is visually hidden.
 * @prop --tct-radio-label-hidden-columns?: (*) Controls the optional grid-template-columns when the label is visually hidden.
 * @prop --tct-radio-tile-label-font-size: (<length-percentage>) Controls the font size of the radio tile label.
 * @prop --tct-radio-tile-padding: (<length-percentage>+) Controls the inner padding of a radio tile.
 * @prop --tct-radio-tile-divider-width: (<length>) Controls the width of the divider between radio tiles.
 * @prop --tct-radio-tile-divider-color: (<color>) Controls the color of the divider between radio tiles.
 * @prop --tct-radio-tile-hover-background-fill: (<color>) Controls the background of an unselected radio tile on hover.
 * @prop --tct-radio-tile-active-background-fill: (<color>) Controls the background of an unselected radio tile while active.
 * @prop --tct-radio-tile-checked-background-fill: (<color>) Controls the background of a selected radio tile.
 * @prop --tct-radio-tile-checked-label-color: (<color>) Controls the label color of a selected radio tile.
 * @prop --tct-radio-tile-indicator-height: (<length>) Controls the height of the selected radio tile indicator.
 * @prop --tct-radio-tile-indicator-border-radius: (<length-percentage>+) Controls the selected radio tile indicator radius.
 * @prop --tct-radio-tile-checked-stroke-color: (<color>) Controls the border color of the radio tile when checked.
 * @prop --tct-radio-tile-focus-box-shadow: (*) Controls the box shadow of the radio tile when focused via keyboard.
 */
:host {
  display: block;
  letter-spacing: var(--tct-radio-label-letter-spacing, inherit);
}

:host([checked]:not([checked=false])) {
  letter-spacing: var(--tct-radio-label-letter-spacing-checked, var(--tct-radio-checked-label-letter-spacing, var(--tct-checkbox-selected-letter-spacing, var(--tct-radio-label-letter-spacing, inherit))));
}

:host(:active) {
  letter-spacing: var(--tct-radio-label-letter-spacing-active, var(--tct-radio-label-letter-spacing, inherit));
}

.radio-container {
  --comp-radio-mark-track-size: 36px;
  --comp-radio-mark-size: var(--tct-radio-mark-size, 20px);
  --comp-radio-mark-fill: var(--tct-radio-background-fill, transparent);
  --comp-radio-mark-stroke: var(--tct-radio-background-stroke, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)));
  --comp-radio-mark-stroke-width: var(--tct-radio-background-stroke-width, var(--tct-radio-stroke-width, 2));
  --comp-radio-mark-color-transition: background-color var(--tct-radio-background-transition, var(--tct-checkbox-tween, var(--app-tween-1, 0.15s ease))), border-color var(--tct-radio-background-transition, var(--tct-checkbox-tween, var(--app-tween-1, 0.15s ease)));
  --comp-radio-mark-dot-fill: var(--tct-radio-select-fill-default, transparent);
  --comp-label-content-color: var(--tct-radio-label-color, inherit);
  --comp-label-content-font-weight: var(--tct-radio-label-font-weight, var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400)));
  --comp-label-content-margin-right: var(--tct-radio-label-margin-right, 0);
  --comp-label-content-gap: var(--tct-radio-label-gap, 0);
  --comp-label-hidden-columns: var(--tct-radio-hidden-columns, var(--tct-radio-label-hidden-columns, var(--comp-radio-mark-track-size) 1fr));
  --comp-radio-mark-transition: box-shadow var(--tct-radio-transition, var(--tct-tween-1, var(--app-tween-1, 0.15s ease))), transform var(--tct-radio-transition, var(--tct-tween-1, var(--app-tween-1, 0.15s ease)));
  --comp-radio-mark-box-shadow: var(--tct-radio-box-shadow, none);
  --comp-radio-mark-fill-checked: var(--tct-radio-checked-background-fill, var(--t-base, #ffffff));
  --comp-radio-mark-stroke-checked: var(--tct-radio-checked-stroke-color, var(--t-primary, #6a4a9e));
  --comp-radio-mark-dot-fill-checked: var(--tct-radio-select-fill-checked, var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-primary, #6a4a9e)))));
  --comp-label-content-font-weight-checked: var(--tct-radio-label-font-weight-checked, var(--tct-radio-checked-label-font-weight, var(--tct-checkbox-selected-font-weight, var(--comp-label-content-font-weight))));
  --comp-label-content-color-checked: var(--tct-radio-label-font-color-checked, var(--tct-radio-checked-label-font-color, var(--tct-radio-checked-label-color, inherit)));
  --comp-radio-mark-fill-active: var(--tct-radio-background-fill-active, #e8ddef);
  --comp-radio-mark-stroke-active: var(--tct-radio-background-stroke-active, var(--t-primary-d2, #553b7e));
  --comp-radio-mark-dot-fill-active: var(--tct-radio-selected-fill-active, var(--comp-radio-mark-dot-fill-checked));
  --comp-label-content-font-weight-active: var(--tct-radio-label-font-weight-active, var(--comp-label-content-font-weight));
  --comp-label-content-color-active: var(--tct-radio-label-color-active, var(--comp-label-content-color));
  --comp-radio-mark-fill-hover: var(--tct-radio-hover-background-fill, #f3eefa);
  --comp-radio-mark-stroke-hover: var(--tct-radio-hover-stroke-color, var(--t-primary, #6a4a9e));
  --comp-radio-mark-stroke-checked-hover: var(--tct-radio-checked-hover-stroke-color, var(--t-primary-d2, #553b7e));
  --comp-label-content-color-hover: var(--tct-radio-hover-label-color, var(--comp-label-content-color));
  --comp-radio-mark-fill-focus: var(--tct-radio-focus-background-fill, var(--comp-radio-mark-fill));
  --comp-radio-mark-stroke-focus: var(--tct-radio-focus-stroke-color, var(--comp-radio-mark-stroke));
  --comp-label-content-color-focus: var(--tct-radio-focus-label-color, var(--comp-label-content-color));
  --comp-radio-mark-box-shadow-focus-visible: var(--tct-radio-box-shadow-focus-visible, var(--tct-radio-focus-box-shadow, var(--const-double-focus-ring)));
}
.radio-container label[for] {
  color: var(--comp-label-content-color);
  font-weight: var(--comp-label-content-font-weight);
  font-size: var(--tct-radio-label-font-size, var(--const-px-14, 14px));
  align-items: center;
  cursor: pointer;
  margin-right: var(--comp-label-content-margin-right);
  display: grid;
  grid-template-columns: var(--comp-radio-mark-track-size) 1fr;
  gap: var(--comp-label-content-gap);
  min-height: var(--tct-radio-min-height, var(--comp-radio-mark-track-size));
  user-select: none;
}
.radio-container label[for].label-hidden {
  grid-template-columns: var(--comp-label-hidden-columns);
}
.radio-container label[for] .description-content {
  grid-column: 2;
}
.radio-container .radio-mark {
  --comp-radio-mark-current-fill: var(--comp-radio-mark-fill);
  --comp-radio-mark-current-stroke: var(--comp-radio-mark-stroke);
  border-radius: 50%;
  box-shadow: var(--comp-radio-mark-box-shadow);
  height: var(--comp-radio-mark-size);
  justify-self: center;
  overflow: hidden;
  position: relative;
  transition: var(--comp-radio-mark-transition);
  width: var(--comp-radio-mark-size);
}
.radio-container .radio-mark::before {
  background: var(--comp-radio-mark-current-fill);
  border-color: var(--comp-radio-mark-current-stroke);
  border-radius: 50%;
  border-style: solid;
  border-width: calc(var(--comp-radio-mark-stroke-width) * 1px);
  box-sizing: border-box;
  content: "";
  height: calc(var(--comp-radio-mark-size) - 2px + var(--comp-radio-mark-stroke-width) * 1px);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: var(--comp-radio-mark-color-transition);
  width: calc(var(--comp-radio-mark-size) - 2px + var(--comp-radio-mark-stroke-width) * 1px);
}
.radio-container .radio-mark::after {
  background: var(--comp-radio-mark-dot-fill);
  border-radius: 50%;
  content: "";
  height: calc(var(--comp-radio-mark-size) / 2);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--tct-radio-transition, var(--tct-tween-1, var(--app-tween-1, 0.15s ease)));
  width: calc(var(--comp-radio-mark-size) / 2);
}
.radio-container input:focus-visible {
  box-shadow: none;
}
.radio-container input:checked + label .radio-mark {
  --comp-radio-mark-current-fill: var(--comp-radio-mark-fill-checked);
  --comp-radio-mark-current-stroke: var(--comp-radio-mark-stroke-checked);
}
.radio-container input:checked + label .radio-mark::after {
  background: var(--comp-radio-mark-dot-fill-checked);
  transform: translate(-50%, -50%) scale(1);
}
.radio-container input:checked + label .label-content {
  font-weight: var(--comp-label-content-font-weight-checked);
  color: var(--comp-label-content-color-checked);
}
.radio-container input:hover:not(:disabled) + label .radio-mark {
  --comp-radio-mark-current-fill: var(--comp-radio-mark-fill-hover);
  --comp-radio-mark-current-stroke: var(--comp-radio-mark-stroke-hover);
}
.radio-container input:hover:not(:disabled) + label .label-content {
  color: var(--comp-label-content-color-hover);
}
.radio-container input:active:not(:disabled) + label .radio-mark {
  --comp-radio-mark-current-fill: var(--comp-radio-mark-fill-active);
  --comp-radio-mark-current-stroke: var(--comp-radio-mark-stroke-active);
  transform: scale(0.9);
}
.radio-container input:active:not(:disabled) + label .radio-mark::after {
  background: var(--comp-radio-mark-dot-fill-active);
}
.radio-container input:active:not(:disabled) + label .label-content {
  font-weight: var(--comp-label-content-font-weight-active);
  color: var(--comp-label-content-color-active);
}
.radio-container input:focus + label .radio-mark {
  --comp-radio-mark-current-fill: var(--comp-radio-mark-fill-focus);
  --comp-radio-mark-current-stroke: var(--comp-radio-mark-stroke-focus);
}
.radio-container input:focus + label .label-content {
  color: var(--comp-label-content-color-focus);
}
.radio-container input:focus-visible + label .radio-mark {
  box-shadow: var(--comp-radio-mark-box-shadow-focus-visible);
}
.radio-container input:checked:hover:not(:disabled) + label .radio-mark {
  --comp-radio-mark-current-stroke: var(--comp-radio-mark-stroke-checked-hover);
}

.radio-tile label[for] {
  color: var(--tct-radio-label-font-color, var(--tct-radio-label-color, inherit));
  align-items: center;
  border: 0;
  background: var(--tct-radio-background-fill, var(--t-base, #ffffff));
  cursor: pointer;
  display: block;
  font-size: var(--tct-radio-tile-label-font-size, var(--tct-radio-label-font-size, var(--const-px-14, 14px)));
  overflow: hidden;
  padding: var(--tct-radio-tile-padding, 10px 20px);
  position: relative;
  text-align: center;
  transition: background var(--tct-tween-1, var(--app-tween-1, 0.15s ease)), color var(--tct-tween-1, var(--app-tween-1, 0.15s ease)), box-shadow var(--tct-tween-1, var(--app-tween-1, 0.15s ease));
  white-space: nowrap;
  user-select: none;
}
.radio-tile input:focus-visible {
  box-shadow: none;
}
.radio-tile input:checked + label {
  background: var(--tct-radio-tile-checked-background-fill, var(--tct-radio-checked-background-fill, #f3eefa));
  color: var(--tct-radio-tile-checked-label-color, var(--tct-radio-checked-label-color, var(--t-primary, #6a4a9e)));
}
.radio-tile input:checked + label:after {
  background: var(--tct-radio-tile-checked-stroke-color, var(--t-primary, #6a4a9e));
  border-radius: var(--tct-radio-tile-indicator-border-radius, 9999px 9999px 0 0);
  bottom: 0;
  content: "";
  height: var(--tct-radio-tile-indicator-height, 2px);
  left: 0;
  position: absolute;
  right: 0;
}
.radio-tile input:not(:checked):hover:not(:disabled) + label {
  background: var(--tct-radio-tile-hover-background-fill, #fafafa);
  color: var(--tct-radio-hover-label-color, var(--tct-radio-label-color, inherit));
}
.radio-tile input:not(:checked):active:not(:disabled) + label {
  background: var(--tct-radio-tile-active-background-fill, var(--t-gray-14, #f2f2f2));
}
.radio-tile input:focus-visible + label {
  z-index: 1;
  box-shadow: var(--tct-radio-tile-focus-box-shadow, var(--const-double-focus-ring));
}

:host(:not(:first-child)) .radio-tile label[for] {
  border-left: var(--tct-radio-tile-divider-width, 1px) solid var(--tct-radio-tile-divider-color, var(--t-gray-13, #e6e6e6));
}

:host(:first-child) .radio-tile label[for] {
  border-radius: var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px)) 0 0 var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px));
}

:host(:last-child) .radio-tile label[for] {
  border-radius: 0 var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px)) var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px)) 0;
}

:host(:only-child) .radio-tile label[for] {
  border-radius: var(--tct-radio-group-tile-border-radius, var(--app-border-radius-2, 8px));
}

input:disabled + label[for] {
  cursor: not-allowed;
  opacity: var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));
}