.btn-vhp {
  padding: 10px 20px;
  min-height: 40px;
  border: 0px;
  border-radius: 12px;
  font-weight: 400;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: 0.4s color;
  transition: 0.4s color;
  background-color: rgba(
    var(--background-secondary),
    var(--text-opacity)
  ) !important;
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-delay: 1.5s;
  color: rgba(var(--text-primary), var(--text-opacity)) !important;
  align-content: baseline;

  &.reverse {
    background: var(--vhp-default-red-gradient) !important;
    color: white !important;
  }

  &.white {
    background-color: white !important;
    color: rgba(var(--text-primary), var(--text-opacity)) !important;

    &:hover {
      background-color: rgba(var(--red-light-vhp), 1) !important;
      color: rgba(var(--text-reverse), var(--text-opacity)) !important;
    }
  }
}

.btn-vhp:hover {
  color: white !important;
  background: var(--vhp-default-red-gradient);

  &.reverse {
    background: rgba(
      var(--background-secondary),
      var(--text-opacity)
    ) !important;
    color: rgba(var(--text-primary), var(--text-opacity)) !important;
  }
}