@utility margin-scaffold {
  margin-block: var(--margin-block, var(--margin, var(--fallback-margin)));
  margin-inline: var(--margin-inline, var(--margin, var(--fallback-margin)));
}

@utility padding-scaffold {
  padding-block: var(--padding-block, var(--padding, var(--fallback-padding)));
  padding-inline: var(
    --padding-inline,
    var(--padding, var(--fallback-padding))
  );
}

@utility border-scaffold {
  border: var(--border-width) var(--border-style)
    var(--_bc, var(--border-color));
  border-radius: var(--radius);
}

/* @utility border-* {
  border-width: --spacing(--value(number));
  border-width: --value([length]);
} */

/*********************
 * Rounded *
 *********************/
@utility rounded-* {
  border-radius: --spacing(--value(number));
}

@utility rounded-t-* {
  border-top-left-radius: --spacing(--value(number));
  border-top-right-radius: --spacing(--value(number));
}

@utility rounded-b-* {
  border-bottom-left-radius: --spacing(--value(number));
  border-bottom-right-radius: --spacing(--value(number));
}

@utility rounded-l-* {
  border-top-left-radius: --spacing(--value(number));
  border-bottom-left-radius: --spacing(--value(number));
}

@utility rounded-r-* {
  border-top-right-radius: --spacing(--value(number));
  border-bottom-right-radius: --spacing(--value(number));
}

@utility rounded-tl-* {
  border-top-left-radius: --spacing(--value(number));
}

@utility rounded-tr-* {
  border-top-right-radius: --spacing(--value(number));
}

@utility rounded-bl-* {
  border-bottom-left-radius: --spacing(--value(number));
}

@utility rounded-br-* {
  border-bottom-right-radius: --spacing(--value(number));
}

@utility rounded-x {
  > :where(:first-child) {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
  }

  > :where(:last-child) {
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
  }
}

@utility rounded-x-* {
  > :where(:first-child) {
    border-top-left-radius: --value([length]);
    border-top-left-radius: --spacing(--value(integer));
    border-bottom-left-radius: --value([length]);
    border-bottom-left-radius: --spacing(--value(integer));
  }

  > :where(:last-child) {
    border-top-right-radius: --value([length]);
    border-top-right-radius: --spacing(--value(integer));
    border-bottom-right-radius: --value([length]);
    border-bottom-right-radius: --spacing(--value(integer));
  }
}

@utility rounded-y {
  > :first-child {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
  }

  > :last-child {
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
  }
}

@utility rounded-y-* {
  > :first-child {
    border-top-left-radius: --value([length]);
    border-top-left-radius: --spacing(--value(integer));
    border-top-right-radius: --value([length]);
    border-top-right-radius: --spacing(--value(integer));
  }

  > :last-child {
    border-bottom-left-radius: --value([length]);
    border-bottom-left-radius: --spacing(--value(integer));
    border-bottom-right-radius: --value([length]);
    border-bottom-right-radius: --spacing(--value(integer));
  }
}

/*********************
 * Radius *
 *********************/
@utility radius-* {
  --radius: --value([length]);
  --radius: --spacing(--value(number));
}