如何用Jetpack Compose实现带上下双阴影的立体感按钮？

我需要用Jetpack Compose实现带有立体感的按钮，该按钮包含顶部黑色阴影和底部白色阴影，预期效果如下：

以下是该按钮在Figma中的设计说明：

我尝试实现的代码如下：

@Composable
fun GameCoinsView(
  modifier: Modifier = Modifier,
  coins: Int,
  onClick: () -> Unit = {},
) {
  Box(
    modifier = modifier
      .clip(shape = shape)
      .width(IntrinsicSize.Min)
      .height(IntrinsicSize.Min)
  ) {
    Spacer(
      modifier = Modifier
        .align(Alignment.BottomCenter)
        .fillMaxWidth()
        .fillMaxHeight(fraction = 0.95f)
        .shadow(
          elevation = 2.dp,
          shape = RoundedCornerShape(12.dp),
          spotColor = Color.White.copy(alpha = 0.08f),
        ),
    )
    Spacer(
      modifier = Modifier
        .align(Alignment.TopCenter)
        .fillMaxWidth()
        .fillMaxHeight(fraction = 0.95f)
        .shadow(
          elevation = 2.dp,
          shape = RoundedCornerShape(12.dp),
          spotColor = Color.Black.copy(alpha = 0.28f),
        ),
    )
    Spacer(
      modifier = Modifier
        .fillMaxSize()
        .background(color = Color.White.copy(alpha = 0.08f))
        .blur(40.dp),
    )

    Text(
      modifier = Modifier.padding(vertical = 8.dp, horizontal = 12.dp),
      text = NumberFormat.getNumberInstance(ViewUtils.getDefaultLocaleCompose()).format(coins),
      fontSize = 18.sp,
      lineHeight = 23.4.sp,
      fontWeight = FontWeight.W600,
    )
  }
}

实际运行结果如下：

目前实现效果与预期不符，请求帮助解决该问题。

内容的提问来源于stack exchange，提问作者Ильин Павел