.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;
}