/* ToggleButton */
.root {
  border-radius: 20px;
  transition: all 0.25s ease-out;
  width: 60px;
  height: 30px;
  cursor: pointer;
  padding: 3px 0 3px 3px;
  background-color: transparent;
  border: 2px solid var(--color-grey-platinum);
}

.button {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: var(--color-grey-silver);
}

.selected {
  padding-left: 32px;
}

.selected .button {
  background-color: #fff;
}

.icon {
  transition: all 0.25s ease-out;
}

.selectedIcon {
  transform: translate(5px, -28px);
}

.notSelectedIcon {
  transform: translate(28px, -28px);
}

/*
 * Themes
 */

.default.selected {
  background-color: var(--color-brand-blue);
}

.green.selected {
  background-color: var(--color-brand-green);
}

.orange.selected {
  background-color: var(--color-brand-orange);
}

.orangeToGreen {
  background-color: var(--color-brand-orange);
}

.orangeToGreen .button {
  background-color: #fff;
}

.orangeToGreen.selected {
  background-color: var(--color-brand-green);
}