<div class="toggle-wrapper">
  <input class="toggle-input" type="checkbox" id="pin-toggle"/>
  <label class="toggle-container" for="pin-toggle">
    <div class="toggle-circle">
      <div class="pin-icon">
        <span class="pin-top"></span>
        <span class="pin-middle"></span>
        <span class="pin-bottom"></span>
      </div>
    </div>
  </label>
</div>
<div class="socials">
  <a class="social-link" href="https://twitter.com/aybukeceylan" target="_top">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter">
      <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/>
    </svg>
  </a>
  <a class="social-link" href="https://www.linkedin.com/in/ayb%C3%BCkeceylan/" target="_top">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
  </a>
</div>

* {
  box-sizing: border-box;
}

$toggle-circle-size: 44px;
$toggle-pin-color: #25263c;

body, html {
  width: 100%;
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3a49fd;
}

.toggle-wrapper {
  padding: 16px;
  position: relative;
}

.toggle-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  outline: none;
  
  &:checked + label {
    background-color: #fff;

    > .toggle-circle {
      left: calc(100% - #{$toggle-circle-size});
      
      .pin-icon {
          transform: rotate(0);
      }
      
      .pin-top {
        animation: pushPinTop .4s ease-in-out .55s;
      }
      
      .pin-middle, .pin-bottom:before {
        animation: pushPin .4s ease-in-out .55s;
      }
    }
  }
}

.toggle-container {
  border-radius: 30px;
  display: block;
  width: 100px;
  height: 40px;
  background-color: #1018a4;
  position: relative;
  cursor: pointer;
  transition: all .2s cubic-bezier(0.35, 0.4, 0.45, 0.2);
}

.toggle-circle {
  position: absolute;
  top: 50%;
  left: -4px;
  transform: translatey(-50%);
  background-color: #fff;
  width: $toggle-circle-size;
  height: $toggle-circle-size;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
  transition: all 0.3s cubic-bezier(0.33, 0.44, 0.45, 1.65);
  display: flex;
  align-items: center;
  justify-content: center;
  color:  #041043;
}

.pin-icon {
  transition: all .2s ease-in-out;
  transition-delay: .4s;
  width: 24px;
  height: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotate(45deg);
  position: relative;
  
  span {
    flex-shrink: 0;
    position: relative;
  }
}

.pin-top {
  display: inline-block;
  border-radius: 4px;
  background-color: $toggle-pin-color;
  width: 14px;
  height: 2px;
  top: -3px;
}

.pin-middle {
  width: 12px;
  height: 12px;
  top: -3px;
  
  &:before, &:after {
    content: "";
    position: absolute;
    background-color: $toggle-pin-color;
    width: 2px;
    height: 16px;
    top: -1px;
    border-radius: 4px;
  }
  
  &:before {
    transform: rotate(16deg);
    left: 0;
  }
  
  &:after {
    transform: rotate(-16deg);
    right: 0;
  }
}

.pin-bottom {
  display: inline-block;
  border-radius: 4px;
  background-color: $toggle-pin-color;
  width: 2px;
  height: 12px;
  position: relative;
  bottom: -1px;
  
  &:before {
    content: "";
    position: absolute;
    background-color: #25263c;
    width: 20px;
    height: 2px;
    left: 50%;
    border-radius: 4px;
    transform: translatex(-50%);
    top: -3px;
  }
}

@keyframes pushPin {
  60% { top: -2px; }
  85% { top: -2px; }
  100% { top: -3px; }
}

@keyframes pushPinTop {
  60% { top: -5px; }
  85% { top: -5px; }
  100% { top: -4px; }
}

.socials {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  align-items: center;
}

.social-link {
  color: #fff;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  margin-right: 12px;
}