.toggle{
  position: relative;
}

.toggle-checkbox{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
}
.toggle-label-container{
  position: relative;
  display: flex;
  height: 100%;
  border: 1px solid rgb(131, 187, 34);
  border-radius: 0.375rem;
  overflow: hidden;
}

.toggle-label{
  flex-basis: 50%;
  width: 50%;
  flex-grow: 1;
  font-size: 12px;
  text-transform: capitalize;
}

.toggle-switch{
  background: rgb(131, 187, 34);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 100%;
  /* background: cornflowerblue; */
  transform: translateX(0%);
  transition: all 0.3s ease-in-out;
  display: grid;
  place-content: center;
  color: white;
  /* font-size: 16px; */
}

.toggle-checkbox:checked + .toggle-label-container .toggle-switch {
  transform: translateX(100%);
}