.webalc-pill-primary { background-color: hsl(var(--color-primary-runtime)); color: hsl(var(--color-foreground-runtime)); border-radius: 50px; padding: 14px 28px; font-weight: 600; border: none; cursor: pointer; transition: background-color 300ms ease, box-shadow 300ms ease, transform 300ms ease; } .webalc-pill-primary:hover { background-color: hsl(165 70% 65%); box-shadow: 0 6px 20px hsl(var(--color-primary-runtime) / 0.4); transform: translateY(-1px); } .webalc-pill-secondary { background-color: transparent; color: hsl(var(--color-foreground-runtime)); border: 2px solid hsl(var(--color-foreground-runtime)); border-radius: 50px; padding: 12px 26px; font-weight: 600; transition: background 300ms ease; } .webalc-pill-secondary:hover { background-color: hsl(var(--color-foreground-runtime)); color: hsl(var(--color-background-runtime)); } .webalc-pill-secondary-on-dark { background-color: transparent; color: white; border: 2px solid white; border-radius: 50px; padding: 12px 26px; font-weight: 600; transition: background 300ms ease, color 300ms ease; } .webalc-pill-secondary-on-dark:hover { background-color: white; color: hsl(var(--color-foreground-runtime)); } .webalc-pill-primary-on-mint { background-color: hsl(var(--color-foreground-runtime)); color: hsl(var(--color-background-runtime)); border-radius: 50px; padding: 14px 28px; font-weight: 600; border: none; cursor: pointer; transition: background-color 300ms ease, box-shadow 300ms ease, transform 300ms ease; } .webalc-pill-primary-on-mint:hover { background-color: hsl(240 10% 14%); box-shadow: 0 6px 20px hsl(0 0% 0% / 0.2); transform: translateY(-1px); }