.btn {
  @apply inline-block no-underline  px-5 py-2 font-medium capitalize transition;
}

.btn-primary {
  background: var(--color-primary-gradient);
  @apply text-white hover:brightness-105 rounded-xl py-3;
}
.btn-outline-primary {
  @apply relative rounded-xl py-3 px-6 border-none text-lightmode-text dark:text-text  hover:text-text! dark:hover:text-text;
  color: var(--sl-color-white);
}
.btn-outline-primary:hover {
  background: var(--color-primary-gradient);
  color: #fff !important;
}

.btn-outline-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  background: var(--color-primary-gradient);
  border-radius: inherit;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
}
