.SmoothCornersBox {
  --b-smooth-corners-box-border-radius: 0;
  --b-smooth-corners-box-shadow-offset-x: 0;
  --b-smooth-corners-box-shadow-offset-y: 0;
  --b-smooth-corners-box-shadow-blur-radius: 0px;
  --b-smooth-corners-box-shadow-spread-radius: 0px;
  --b-smooth-corners-box-shadow-color: transparent;
  --b-smooth-corners-box-padding: 0px;
  --b-smooth-corners-box-margin: 0px;
  --b-smooth-corners-box-background-color: transparent;

  box-sizing: content-box;
  margin: var(--b-smooth-corners-box-margin);

  background-color: var(--b-smooth-corners-box-background-color);
  background-image: var(--b-smooth-corners-box-background-image);
  background-size: cover;
  border-radius: var(--b-smooth-corners-box-border-radius);
  box-shadow: var(--b-smooth-corners-box-shadow-offset-x)
    var(--b-smooth-corners-box-shadow-offset-y)
    var(--b-smooth-corners-box-shadow-blur-radius)
    var(--b-smooth-corners-box-shadow-spread-radius)
    var(--b-smooth-corners-box-shadow-color);

  &:where([data-state='enabled']) {
    @supports (background: paint(smooth-corners)) {
      --smooth-corners: var(--b-smooth-corners-box-border-radius);
      --smooth-corners-shadow: var(--b-smooth-corners-box-shadow-offset-x),
        var(--b-smooth-corners-box-shadow-offset-y),
        var(--b-smooth-corners-box-shadow-blur-radius),
        var(--b-smooth-corners-box-shadow-spread-radius),
        var(--b-smooth-corners-box-shadow-color);
      --smooth-corners-bg-color: var(--b-smooth-corners-box-background-color);
      --smooth-corners-padding: var(--b-smooth-corners-box-padding);

      margin: calc(
        var(--b-smooth-corners-box-margin) +
          (-1 * var(--b-smooth-corners-box-padding))
      );
      padding: var(--b-smooth-corners-box-padding);

      background: paint(smooth-corners);
      border-radius: 0;
      border-image-source: var(--b-smooth-corners-box-background-image);
      box-shadow: none;
    }
  }
}