.app-btn {
  width: 150px;
  height: 50px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  z-index: 0;
  border: 1px solid transparent !important;
}
.app-btn::after,
.app-btn::before {
  content: "";
  position: absolute;
}
.app-btn::after {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -2;
  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: all 0.3s linear;
}
.app-btn span {
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s linear;
}
.app-btn img {
  width: 24px;
  height: 24px;
  -o-object-fit: contain;
  object-fit: contain;
  transition: all 0.3s linear;
}
.app-btn.white-btn {
  background-color: #fff;
}
.app-btn.white-btn span {
  color: #0a2538;
}
.app-btn.white-btn::after {
  background-color: #0a2538;
}
.app-btn.white-btn:hover {
  border-color: #fff !important;
}
.app-btn.primary-btn {
  background-image: linear-gradient(
    to left,
    var(--color-primary),
    var(--color-primary)
  );
}
.app-btn.primary-btn span {
  color: #fff;
}
.app-btn.primary-btn::after {
  background-color: #fff;
}
.app-btn.primary-btn:hover span {
  color: var(--color-primary);
}
.app-btn.black-btn {
  background-color: #000;
}
.app-btn.black-btn span {
  color: #fff;
}
.app-btn.black-btn::after {
  background-color: #fff;
}
.app-btn.black-btn:hover {
  border-color: #000 !important;
}
.app-btn.opacity-light-btn {
  background-color: rgba(255, 255, 255, 0.2);
}
.app-btn.opacity-light-btn span {
  color: #fff;
}
.app-btn.opacity-light-btn::after {
  background-color: #fff;
}
.app-btn.opacity-primary-btn {
  background-color: rgba(13, 52, 251, 0.05);
}
.app-btn.opacity-primary-btn span {
  color: #0a2538;
}
.app-btn.opacity-primary-btn::after {
  background-color: #fff;
}
.app-btn.opacity-primary-btn:hover {
  border-color: #0a2538 !important;
}

.app-btn:hover span.right-move {
  margin-inline-start: -24px;
}
.app-btn:hover span.left-move {
  margin-inline-start: 24px;
}

/* .app-btn:hover span.left-move {
  margin-inline-end: -24px;
} */
/* .app-btn:hover :last-child {
  opacity: 0;
  visibility: hidden;
} */
.app-btn.border-btn {
  border: 1px solid #4f008c !important;
}
.app-btn.border-btn span {
  color: var(--color-primary);
}
.app-btn.border-btn::after {
  background-image: linear-gradient(
    to left,
    var(--color-primary),
    var(--color-primary)
  );
}
.app-btn.border-btn :last-child,
.app-btn.border-btn :first-child {
  fill: var(--color-primary) !important;
}
.app-btn.border-btn:hover span {
  color: #fff;
}

.app-btn:hover img {
  transform: translateX(0%);
  opacity: 0;
}
.app-btn:hover span {
  animation: storm 0.4s linear;
}
.app-btn:hover::after {
  animation: sideClip 0.4s linear;
  -webkit-clip-path: polygon(0 -10px, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 -10px, 100% 0, 100% 100%, 0 100%);
}
.button-rounded-custom {
  border-radius: 12px;
}

@keyframes storm {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-2px);
  }
  40% {
    transform: translateX(2px);
  }
  60% {
    transform: translateX(-1px);
  }
  80% {
    transform: translateX(1px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes sideClip {
  0% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 -10px, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 -10px, 100% 0, 100% 100%, 0 100%);
  }
}