.toggle-active.btn[disabled] {
  background-color: var(--secondary-color);
  color: var(--secondary-background);
  opacity: 1;
}

.toggle-not-active {
  background-color: var(--quaternary-background);
  color: var(--secondary-color);
}
.toggle-not-active:hover {
  color: var(--secondary-background);
}

.toggle-not-active:hover,
.toggle-not-active:focus {
  background-color: var(--secondary-color);
}

.btn-group .btn.toggle-not-active,
.btn-group .btn.toggle-active {
  border-color: var(--tertiary-color);
  padding-left: 30px;
  padding-right: 30px;
}

.btn-group .btn-primary,
.btn-group .btn-primary:focus,
.btn-group .btn-primary:hover {
  border-color: var(--secondary-color);
}

.btn.toggle-active > .tick,
.btn.toggle-not-active > .tick {
  position: absolute;
}

.btn:first-child > .tick {
  left: 9px;
  top: calc(50% - 8pt);
}

.btn:last-child > .tick {
  right: 6px;
  top: calc(50% - 8pt);
}

.btn-group .btn + .btn {
  margin-left: -2px;
}

label.toggle-label {
  display: flex;
  flex-direction: column;
}

@media (max-width: 550px) {
  .btn:first-child > .tick {
    left: 6px;
  }

  .btn:last-child > .tick {
    right: 5px;
  }
}

@media (max-width: 440px) {
  .btn:first-child > .tick {
    left: auto;
    right: 5px;
  }
}
