#toggle {
  width: 60px;
  height: 28px;
  background: #c6c6c6;
  display: block;
  border-radius: 15px;
  padding: 0.1rem 0.2rem;
  cursor: pointer;
  position: relative;
  z-index: 99;
}

#toggle span {
  width: 25px;
  height: 25px;
  background: #f1f1f1;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

#toggle span i {
  font-size: 1rem;
  color: var(--cor-primaria);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.1s;
}

#toggle #shape {
  clip-path: circle(0% at 50% 50%);
  position: absolute;
  background: #1f1f1f;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* dark */

#toggle.change {
  background: #1f1f1f;
}

#toggle #shape.change {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #1f1f1f;
  clip-path: circle(100% at 50% 50%);
  z-index: 1;
}

#toggle span.change {
  background: #f1f1f1;
  transform: translateX(28px);
}

#toggle .sun {
  font-size: 0.9rem;
  color: var(--cor-primaria);
}

#toggle .sun.change {
  font-size: 0;
}

#toggle .moon {
  font-size: 0;
}

#toggle .moon.change {
  font-size: 0.9rem;
  color: #263053;
}