:host {
  display: block;
  --switch-size:30px;
}

.switch {
  display: none;
}

label {
  position: relative;
  display: block;
  padding: 1px;
  border-radius: var(--switch-size);
  height: var(--switch-size);
  width: calc(var(--switch-size) * 2);
  margin-bottom: 5px;
  background-color: #eee;
  cursor: pointer;
  user-select: none;
  -webkit-border-radius: var(--switch-size);
  -moz-border-radius: var(--switch-size);
  -ms-border-radius: var(--switch-size);
  -o-border-radius: var(--switch-size);
}

label:before {
  content: "";
  display: block;
  border-radius: var(--switch-size);
  height: var(--switch-size);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: white;
  transform: scale(1, 1);
  transition: all 0.3s ease;
  -webkit-border-radius: var(--switch-size);
  -moz-border-radius: var(--switch-size);
  -ms-border-radius: var(--switch-size);
  -o-border-radius: var(--switch-size);
}

label:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: calc(1px - var(--switch-size) / 2);
  margin-left: calc(0px - var(--switch-size) / 2);
  width: var(--switch-size);
  height: var(--switch-size);
  border-radius: var(--switch-size);
  background-color: white;
  box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
  transform: translate(calc(1px - var(--switch-size) / 2));
  transition: all 0.3s ease;
  -webkit-transform: translate(calc(1px - var(--switch-size) / 2));
  -moz-transform: translate(calc(1px - var(--switch-size) / 2));
  -ms-transform: translate(calc(1px - var(--switch-size) / 2));
  -o-transform: translate(calc(1px - var(--switch-size) / 2));
}

.switch:checked ~ label:after {
  transform: translate(calc(var(--switch-size) / 2 - 1px));
  -webkit-transform: translate(calc(var(--switch-size) / 2 - 1px));
  -moz-transform: translate(calc(var(--switch-size) / 2 - 1px));
  -ms-transform: translate(calc(var(--switch-size) / 2 - 1px));
  -o-transform: translate(calc(var(--switch-size) / 2 - 1px));
}

.switch:checked ~ label:before {
  background-color: green;
}