:host {
  width: 100%;
  height: 100%;
}
.toggle-parent {
  border-radius: 25px;
  height: 32px;
  width: 100%;
  background-color: var(--color-ti-bg-grey-dark);
}
.toggle-child {
  background-color: transparent;
  border-radius: 25px;
  color: var(--color-ti-secondary-grey);
  font-weight: bold;
  cursor: pointer;
  font-size: 12px;
  height: 100%;
  width: 50%;
  padding-left: 13px;
  padding-right: 13px;
}
.toggle-child.highlight {
  background-color: var(--color-ti-primary-blue);
  color: var(--color-ti-primary-white);
}
.toggle-parent.disable {
  border: 2px solid var(--color-ti-secondary-grey);
  opacity: 0.5;
  pointer-events: none;
}
.toggle-parent.disable .toggle-child {
  color: var(--color-ti-secondary-grey);
}
.toggle-parent.disable .toggle-child.highlight {
  background-color: var(--color-ti-secondary-grey);
  color: var(--color-ti-primary-white);
}