.theme-toggle {
  width: 45px;
  height: 23px;
  background-color: #e0e0e0;
  border-radius: 23px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;

  .toggle-circle {
    width: 23px;
    height: 23px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

    img {
      width: 14px;
      height: 14px;
    }
  }
}

.theme-toggle.active {
  background-color: #555;

  .toggle-circle {
    left: 22px;
  }
}

