:host {
  display: flex;
  align-items: center;

  --custom-toggle-color: var(--color-ti-primary-blue);
}
.toggle-parent {
  /* border: 0.5px solid var(--custom-toggle-color); */
  border-radius: 21.96px;
  height: 46px;
  @apply --custom-toggle-parent;
}
.flex-row-cen {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.toggle-child {
  border-radius: 16px;
  text-align: center;
  min-height: 35px;
  text-transform: capitalize;
  cursor: pointer;
  margin-left: 3px;
  margin-right: 3px;
  font-size: 14px;
  padding: 10px;
  display: flex;
  justify-content: center;
  border: 0.5px solid var(--color-ti-secondary-blue-lighter);
  min-width: var(--my-custom-toggle-width);
  @apply --custom-toggle-child;
}
.highlight-tog {
  background-color: var(--custom-toggle-color);
  color: #ffffff;
  font-family: Roboto;
  font-size: 14px;
}
.no-highlight-tog {
  color: var(--custom-toggle-color);
  background-color: transparent;
  font-family: Roboto;
  font-size: 14px;
}
.toggle-child.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.toggle-parent.highlight {
  outline-color: var(--color-ti-secondary-yellow);
  outline-width: 2px;
  outline-style: solid;
}