@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', sans-serif;
}

:root {
  --button-width: 80px;
  --button-height: 40px;
  --toggle-diameter: 34px;
  --button-toggle-offset: calc(
    (var(--button-height) - var(--toggle-diameter)) / 2
  );
  --toggle-shadow-offset: 4;
  --toggle-wider: 42px;
  --color-grey: #e9e9e9;
  --color-dark-grey: #39393d;
  --color-green: #30d158;
}

.toggle-ctn {
  display: flex;
  align-items: center;
  margin: 10px 0;
  width: 200px;
}

.toggle {
  display: none;
}

.label {
  display: inline-block;
  width: var(--button-width);
  height: var(--button-height);
  background-color: var(--color-grey);
  border-radius: calc(var(--button-height) / 2);
  cursor: pointer;
  margin: 0 15px;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.ball {
  width: var(--toggle-diameter);
  height: var(--toggle-diameter);
  border-radius: calc(var(--toggle-diameter) / 2);
  background-color: #fff;
  position: absolute;
  top: var(--button-toggle-offset);
  box-shadow: var(--toggle-shadow-offset) 0 12px rgba(0, 0, 0, 0.1);
  transform: translatex(var(--button-toggle-offset));
  transition: 0.3s all ease-in-out;
}

.label:active .ball {
  width: var(--toggle-wider);
}

.toggle:checked + .label {
  background-color: var(--color-green);
}
.toggle:checked + .label > .ball {
  box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 12px rgba(0, 0, 0, 0.1);
  transform: translatex(
    calc(
      var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)
    )
  );
}

.toggle:checked:active + .label > .ball {
  transform: translatex(
    calc(
      var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)
    )
  );
}