/* 
Toggles adapted from https://codepen.io/magnificode/pen/ojYJJP
 */
 .toggle-container, .dl-toggle-container {
  justify-content: center;
  align-items: center;
  z-index: -1;
  display: block;
}
.dl-toggle-container label, .dl-toggle-container input {
  width: 5em !important;
}
.selbtn {
  border: 3px solid var(--primary-color);
  display: inline-block;
  padding: 10px;
  position: relative;
  text-align: center;
  transition: background 600ms ease, color 600ms ease;
}

input[type="radio"].toggle {
  display: none;
}
input[type="radio"].toggle + label {
  cursor: pointer;
  min-width: 60px;
}
input[type="radio"].toggle + label:hover {
  background: none;
  color: var(--primary-color);
}
input[type="radio"].toggle + label:after {
  background: var(--primary-color);
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 100%;
  z-index: -1;
}
input[type="radio"].toggle.toggle-left + label {
  border-right: 0;
}
.toggle-container input[type="radio"].toggle.toggle-left + label:after {
  left: 100%;
}
input[type="radio"].toggle.toggle-right + label {
  margin-left: -5px;
}
.toggle-container input[type="radio"].toggle.toggle-right + label:after {
  left: -100%;
}
input[type="radio"].toggle:checked + label {
  cursor: default;
  color: var(--bg-color);
  transition: color 200ms;
}
.toggle-container input[type="radio"].toggle:checked + label:after {
  left: 0;
}

/*For triple select toggle*/
input[type="radio"].toggle.toggle-center + label {
  margin-left: -5px;
  border-right: 0;
}
input[type="radio"].toggle.pos-self + label:after {
  left: 0;
}
input[type="radio"].toggle.pos-right-1 + label:after {
  left: 100%;
}
input[type="radio"].toggle.pos-right-2 + label:after {
  left: 200%;
}
input[type="radio"].toggle.pos-left-1 + label:after {
  left: -100%;
}
input[type="radio"].toggle.pos-left-2 + label:after {
  left: -200%;
}

/* Disabled */
input[type="radio"].toggle:disabled + label {
  border-color: var(--disabled-color);
  cursor: default;
}
input[type="radio"].toggle:not(:checked):disabled + label {
  color: var(--disabled-color);
}
input[type="radio"].toggle:disabled + label::after {
  background: var(--disabled-color);
}