.search-toggle-container {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-toggle-container .label {
  font-size: 1em;
  font-weight: 700;
  cursor: pointer;
}

input[type="checkbox"] {
  background-color: #fff;
  visibility: hidden;
  &:checked + label {
    transform: rotate(360deg);
    background-color: #000;
    &:before {
      transform: translateX(22.5px); /* 90px / 4 */
      background-color: #fff;
    }
  }
}

#search-toggle-label {
  display: flex;
  align-items: center;
  width: 45px; /* 180px / 4 */
  height: 22.5px; /* 90px / 4 */
  border: 1.5px solid; /* 6px / 4 */
  border-radius: 99em;
  position: relative;
  transition: transform 0.75s ease-in-out;
  transform-origin: 50% 50%;
  cursor: pointer;

  &:before {
    transition: transform 0.75s ease;
    transition-delay: 0.5s;
    content: "";
    display: block;
    position: absolute;
    width: 13.5px; /* 54px / 4 */
    height: 13.5px; /* 54px / 4 */
    background-color: #fff;
    border-radius: 50%;
    top: 3px; /* 12px / 4 */
    left: 3px; /* 12px / 4 */
  }
  margin: 0 0.5em 4em 0.5em;
}