:root {
  ---color-primary-hover: #c80054;
  ---color-disabled: #a7a7a7;
  ---color-disabled-bg: #e7e7e7;
  ---color-bg-hover: #feecf0;
  ---color-pressed: #a70056;
}

/*** button ****/
.section-btn {
  margin-top: 2rem;
}
.section-btn button,
.section-btn > input[type="submit"] {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  line-height: 1.5rem;
  cursor: pointer;
  min-width: 108px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid var(--primary-color);
  position: relative;
}

/* Size button */
button.is-medium,
input[type="submit"].is-medium {
  padding: 0.5rem 2rem;
}

button.is-small,
input[type="submit"].is-small {
  padding: 0.25rem 2rem;
}

/* Disabled */

button:disabled,
input[type="submit"]:disabled {
  cursor: not-allowed;
}
/* Default or Primary Button */
button,
input[type="submit"],
button.primary,
input[type="submit"].primary {
  color: var(--white-color);
  background-color: var(--primary-color);
}

button:hover,
input[type="submit"]:hover,
button.primary:hover,
input[type="submit"].primary:hover {
  background-color: var(---color-primary-hover);
}

button:disabled,
input[type="submit"]:disabled,
button.primary:disabled,
input[type="submit"].primary:disabled {
  background-color: var(---color-disabled-bg);
  color: var(---color-disabled);
  border: 1px solid var(---color-disabled-bg);
}

/* Secondary Button */
button.secondary,
input[type="submit"].secondary {
  color: var(--primary-color);
  background-color: var(--white-color);
  border: 1px solid var(--primary-color);
}

button.secondary:hover,
input[type="submit"].secondary:hover {
  background-color: var(---color-bg-hover);
}

button.secondary:disabled,
input[type="submit"].secondary:disabled {
  color: var(---color-disabled);
  border: 1px solid var(---color-disabled);
  background-color: var(--white-color);
}

/* Tertiary Button */
button.tertiary,
input[type="submit"].tertiary {
  color: var(--primary-color);
  background-color: var(--white-color);
}

button.tertiary:hover,
input[type="submit"].tertiary:hover {
  background-color: var(---color-bg-hover);
}

button.tertiary:disabled,
input[type="submit"].tertiary:disabled {
  color: var(---color-disabled);
  background-color: var(--white-color);
}

/* Text Link */

a.text-link,
span.text-link {
  color: var(--primary-color);
  text-decoration: underline;
  cursor: pointer;
  font-size: 1.2rem;
}

a.text-link:hover,
span.text-link:hover {
  color: var(---color-primary-hover);
}

a.text-link:visited,
span.text-link:visited {
  color: var(---color-pressed);
}

/* Button action */

button.btn-action {
  width: 44px;
  padding: 0.2rem;
}
/* width 100% */

button.maxWidth {
  width: 100%;
}
/* animaciones */

button.animate {
  width: 50px;
  min-width: 0;
  border-radius: 50%;
  color: transparent;
  position: relative;
}

button.animate:after {
  position: absolute;
  content: "";
  width: 25px;
  height: 25px;
  border: 4px solid white;
  border-radius: 50%;
  border-left-color: transparent;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  animation: spin ease-in 2.5s forwards infinite;
  animation-name: spin;
  -webkit-animation-name: spin;
  transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  animation-duration: 2.5s;
  -webkit-animation-duration: 2.5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

button.success:before {
  position: absolute;
  content: "";
  width: 25px;
  height: 12.5px;
  border: 4px solid white;
  border-right: 0;
  border-top: 0;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(0);
  transform: translate(-50%, -50%) rotate(0deg) scale(0);
  -webkit-animation: success ease-in 0.15s forwards;
  animation: success ease-in 0.25s forwards;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  90% {
    transform: translate(-50%, -50%) rotate(1080deg) scale(1);
  }
  100% {
    transform: scale(0);
  }
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }

  98% {
    -webkit-transform: translate(-50%, -50%) rotate(1080deg) scale(1);
  }

  100% {
    -webkit-transform: translate(-50%, -50%) rotate(1080deg) scale(0);
  }
}

@keyframes success {
  from {
    transform: translate(-50%, -50%) rotate(0) scale(0);
  }
  to {
    transform: translate(-50%, -50%) rotate(-45deg) scale(1);
  }
}

@-webkit-keyframes success {
  from {
    -webkit-transform: translate(-50%, -50%) rotate(0) scale(0);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg) scale(1);
  }
}