.checkbox-wrapper-54 {
  display: flex;
}
.checkbox-wrapper-54 input[type="checkbox"] {
  visibility: hidden;
  display: none;
}

.checkbox-wrapper-54 *,
.checkbox-wrapper-54 ::after,
.checkbox-wrapper-54 ::before {
  box-sizing: border-box;
}

/* The switch - the box around the slider */
.checkbox-wrapper-54 .switch {
  --width-of-switch: 2.5em;
  --height-of-switch: 1.3em;
  /* size of sliding icon -- sun and moon */
  --size-of-icon: 1.2em;
  /* it is like a inline-padding of switch */
  --slider-offset: 0.2em;
  position: relative;
  width: var(--width-of-switch);
  height: var(--height-of-switch);
  display: inline-block;
}

/* The slider */
.checkbox-wrapper-54 .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f4f4f5;
  transition: 0.4s;
  border-radius: 30px;
}

.checkbox-wrapper-54 .slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  border-radius: 20px;
  left: var(--slider-offset, 0.3em);
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
  transition: 0.4s;
}

.checkbox-wrapper-54 input:checked + .slider {
  background-color: #303136;
}

.checkbox-wrapper-54 input:checked + .slider:before {
  left: calc(100% - (var(--size-of-icon, 1.4em) + var(--slider-offset, 0.3em)));
  background: #303136;
  /* change the value of second inset in box-shadow to change the angle and direction of the moon  */
  box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
}

span.slider {
  border: 1px solid grey;
}


/* section__themeSwitch */

.section__themeSwitch {
  background-color: var(--bg-color-light);
  color: var(--text-color-light);
  transition: background-color 0.5s, color 0.5s;
}

@media (max-width: 450px) {
  .navbar__themeSwitch {
    display: none;
  }

  .section__themeSwitch {
    display: flex !important;
  }

  .checkbox-wrapper-54 .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
  }
}