styled component :before selector problem

as u can see i have that custom style for a buttom that i want to wrap , but the :before selector is not working, i am using react boostrap and styled components. the syntax looks correct

const Btn = styled.button`
  --border-width: 4px;
  --glow-spread: 2px;
  --glow-width: 3px;

  position: relative;
  border: var(--border-width) solid transparent;
  background: black;
  color: white;
  background-clip: padding-box;

  &:before {
    content: "";
    background: linear-gradient(
      160deg,
      (#ff3bff, #ffcdcd, #5c24ff, #7c2bfd, #fb48f6)
    );
    background-clip: padding-box;

    border-radius: inherit;
    border: solid transparent;
    border-width: calc(var(--border-width) - var(--glow-width));
    filter: blur(var(--glow-spread));
    z-index: -1;

    position: absolute;
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    bottom: calc(-1 * var(--border-width));
    right: calc(-1 * var(--border-width));
    box-sizing: border-box;
  }
`;