:root {
    --size: 15px;
    --transition: all 0.25s ease 0s;
    --on: green;
    --off: red;
  }
  
  .content {
    position: relative;
    width: calc(var(--size) * 6);
    height: calc(var(--size) * 2);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }
  
  input {
    display: none;
  }
  
  label[for="btn"] {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #888, #fff);
    border-radius: var(--size);
    padding: calc(var(--size) / 5);
    box-shadow: 0 0 calc(var(--size) / 50) calc(var(--size) / 50) #0002;
    transition: var(--transition);
  }
  
  input:checked + label[for="btn"] {
    background: var(--on);
    box-shadow: 0 calc(var(--size) / 50) calc(var(--size) / 5) #fff9,
      0 0 calc(var(--size) / 50) calc(var(--size) / 50) #0002;
  }
  
  label[for="btn"]:after {
    content: "";
    position: absolute;
    width: calc(100% - calc(calc(var(--size) / 5) * 12));
    height: calc(100% - calc(calc(var(--size) / 5) * 2));
    box-shadow: 0 0 calc(var(--size) / 2) calc(var(--size) / 10) var(--on),
      0 0 calc(var(--size) / 2) calc(var(--size) / 10) #fff;
    border-radius: var(--size);
    z-index: 0;
    opacity: 0;
    transition: var(--transition);
  }
  
  input:checked + label[for="btn"]:after {
    opacity: 1;
    width: calc(100% - calc(calc(var(--size) / 5) * 4));
  }
  

  .track {
    position: absolute;
    width: calc(calc(var(--size) * 6) - calc(var(--size) / 2.5));
    height: calc(calc(var(--size) * 2) - calc(var(--size) / 2.5));
    border-radius: var(--size);
    overflow: hidden;
  }
  
  .track:before {
    content: "";
    position: absolute;
    width: calc(200% - calc(calc(var(--size) * 2) - calc(var(--size) / 1)));
    height: 100%;
    left: -68%;
    transition: var(--transition);
    background: linear-gradient(90deg, var(--on) 50%, var(--off) 50%);
}
  
  .track:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--size);
    box-shadow: 0 calc(var(--size) / -10) calc(var(--size) / 10) 0 #0005 inset,
      0 calc(var(--size) / 10) calc(var(--size) / 10) 0 #0005 inset;
  }
  
  input:checked + label .track:before {
    left: 0%;
  }
  
  .thumb {
    position: absolute;
    width: calc(calc(var(--size) * 2) - calc(var(--size) / 3));
    height: calc(calc(var(--size) * 2) - calc(var(--size) / 3));
    top: calc(calc(var(--size) / 70) + calc(var(--size) / 70));
    left: calc(calc(var(--size) / 80) + calc(var(--size) / 80));
    background: linear-gradient(180deg, #fff, #afafaf);
    border-radius: var(--size);
    box-shadow: 0 0 0 calc(var(--size) / 50) #0002, 0 calc(var(--size) / 10) calc(var(--size) / 10) 0 #0008;
    cursor: pointer;
    font-size: calc(var(--size) / 2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-indent: calc(var(--size) * -0.025);
    text-shadow: calc(var(--size) / -8000) calc(var(--size) / -150) calc(var(--size) / 50) #0008, calc(var(--size) / 150) calc(var(--size) / 100) calc(var(--size) / 50) #fff;
    color: #7d7c7c;
    transition: var(--transition);
}
  
  input:checked + label .thumb {
    left: calc(
      calc(100% - calc(calc(var(--size) * 2) - calc(var(--size) / 3))) -
        calc(calc(var(--size) / 10) + calc(var(--size) / 15))
    );
    color: var(--off);
    /* background: radial-gradient(
        circle at 7% 50%,
        #fff calc(var(--size) / 50),
        #fff0 calc(var(--size) / 2)
      ),
      radial-gradient(circle at 0 50%, var(--off) 10%, #fff0 60%),
      linear-gradient(180deg, #fff, #afafaf); */
    text-shadow: 0 0 calc(var(--size) / 10) var(--off),
      0 0 calc(var(--size) / 5) #fff,
      calc(var(--size) / -8000) calc(var(--size) / -150) calc(var(--size) / 50) #0008,
      calc(var(--size) / 150) calc(var(--size) / 100) calc(var(--size) / 50) #fff;
  }
  
  .thumb:before {
    content: "";
    display: block;
    width: 70%;
    height: 70%;
    background: linear-gradient(180deg, #0008, #ccc, #fff);
    position: absolute;
    z-index: -1;
    border-radius: var(--size);
    border: calc(var(--size) / 50) solid #ddd;
  }
  
  .txt {
    left: 15px !important;
    position: absolute;
    color: white;
    top: 9%;
    font-size: 1em;
    transition: var(--transition);
  }
  .course_txt {
    left: 15px !important;
    position: absolute;
    color: white;
    top: 0%;
    font-size: 14px;
    transition: var(--transition);
  }
  
  input:checked + label .course_txt {
    left: calc(calc(var(--size) * 6) - calc(var(--size) / 2));
  }
  input:checked + label .txt {
    left: calc(calc(var(--size) * 6) - calc(var(--size) / 2));
  }
  
  .de-txt {
    left: 30px;
    position: absolute;
    color: white;
    top: 20%;
    font-size: 10px;
    transition: var(--transition);
  }
  .course_de-txt {
    left: 30px;
    position: absolute;
    color: white;
    top: 12%;
    font-size: 10px;
    transition: var(--transition);
  }
  
  input:checked + label .course_de-txt {
    left: calc(0px - calc(var(--size) / 2));
  }
  input:checked + label .de-txt {
    left: calc(0px - calc(var(--size) / 2));
  }