@import "../../../assets/scss/variables";

.form-button {

  display: flex;
  align-items: center;
  background-color: $main-color;
  gap: 20px;
  padding: 0 20px;
  padding-top: 1px;
  height: 48px;
  align-items: center;
  justify-content: center;
  color: white;
  border: none;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  font-size: 1.4rem;



  hr {
    background-color: white;
    width: 1px;
    height: 27px;
    opacity: 1;
  }

  & * {
    font-size: inherit;
    color: inherit;
    line-height: inherit;
  }

  & img {
    filter: $svg-white
  }

  /**
   PREDIFINED
   */

  &.submit {
    background-color: $success;
    font-weight: $bold;
  }

  &.proceed {
    &:hover {
      img {
        animation: enter 3s infinite linear;
      }
    }
  }

  &.back {
    &:hover {
      img {
        animation: enter 3s infinite linear;
      }
    }
  }


  &:disabled {
    cursor: default;
    background-color: $inactive;
    pointer-events: none;
  }

  &.loading{
    pointer-events: none;
  }


}


@keyframes enter {
  0% {
    transform: translate(0px, 0px);
  }
  15% {
    transform: translate(15px, 0px);
  }
  30% {
    transform: translate(0px, 0px);
  }
}


//&.activate {
//	&--failed{
//		width:392px;
//		hr {
//			margin-left: 34px;
//			margin-right: 15px;
//			width: 1px;
//			height: 27px;
//			border-left: 2px solid white;
//			opacity: 1;
//		}
//	}
//	width: 222px;
//	margin-right: 32px;
//	hr {
//		margin-left: 34px;
//		margin-right: 15px;
//		width: 1px;
//		height: 27px;
//		border-left: 2px solid white;
//		opacity: 1;
//	}
//}
//&.activate-go {
//	width: 282px;
//
//	hr {
//		margin-left: 34px;
//		margin-right: 15px;
//		width: 1px;
//		height: 27px;
//		border-left: 2px solid white;
//		opacity: 1;
//	}
//}
//margin-bottom: 21px;
//font-weight: $bold;
//font-size: $btn-txt-size;
//color: white;
//background-color: $main-color;
//&.success {
//	background-color: $success-color;
//}
//&.retry {
//	background-color: $error-color;
//}
//border-radius: 5px;
//border-width: 0;
//text-transform: uppercase;
//display: flex;
//justify-content: center;
//align-items: center;
//&.ldapreq {
//	padding: 29px 24px 27px 35px;
//	&--failed {
//		max-width: 511px;
//		width: 100%;
//		min-width: 247px;
//		padding: 29px 20px 28px 27px;
//		hr {
//			margin-left: 30.5px;
//			margin-right: 14.5px;
//			width: 2px;
//			height: 27px;
//			border-left: 2px solid white;
//			opacity: 1;
//		}
//	}
//
//	hr {
//		margin-left: 34px;
//		margin-right: 15px;
//		width: 2px;
//		height: 27px;
//		border-left: 2px solid white;
//		opacity: 1;
//	}
//}
//&.create {
//	width: 364px;
//
//	hr {
//		margin-left: 33.5px;
//		margin-right: 34.58px;
//		width: 2px;
//		height: 27px;
//		border-left: 2px solid white;
//		opacity: 1;
//	}
//}
//&.login {
//	max-width: 200px;
//	width: 100%;
//	padding: 29px 24.2px 28px 45px;
//	hr {
//		margin: 0 14.95px 0 44px;
//		width: 2px;
//		height: 27px;
//		border-left: 2px solid white;
//		opacity: 1;
//	}
//}
//height: 60px;
//&.loading {
//	pointer-events: none;
//}
//&.next-step{
//	background-color: #2BC48A;
//	width:287px
//}
//
//&:disabled {
//	pointer-events: none;
//	background-color: $inactive-color;
//	color: $inactive-text;
//	.retry {
//		display: none;
//	}
//	hr {
//		border-left: 2px solid $inactive-text;
//		opacity: 1;
//		width: 2px;
//		height: 27px;
//		opacity: 1;
//	}
//}
//
//&:hover {
//	.retry {
//		animation: retry 3s infinite linear;
//		@keyframes retry {
//			0% {
//				transform: rotate(0deg);
//			}
//			15% {
//				transform: rotate(-359deg);
//			}
//			30% {
//				transform: translate(0px, 0px);
//			}
//		}
//	}
//	.enter {
//		animation: enter 3s infinite linear;
//
//		@keyframes enter {
//			0% {
//				transform: translate(0px, 0px);
//			}
//			15% {
//				transform: translate(15px, 0px);
//			}
//			30% {
//				transform: translate(0px, 0px);
//			}
//		}
//	}
//}