@use './_helpers.scss' as helper;
@import './_pxToRem.scss';

$form-component-xs: (
  gap: px-to-rem(12),
  padding-inline: px-to-rem(12),
  padding-block: px-to-rem(12),
  border-radius: helper.$alignedBorderRadius-xs,
  height: helper.$alignedHeights-xs,
);
$form-component-sm: (
  gap: px-to-rem(12),
  padding-inline: px-to-rem(12),
  padding-block: px-to-rem(12),
  border-radius: helper.$alignedBorderRadius-sm,
  height: helper.$alignedHeights-sm,
);
$form-component-md: (
  gap: px-to-rem(12),
  padding-inline: px-to-rem(12),
  padding-block: px-to-rem(12),
  border-radius: helper.$alignedBorderRadius-md,
  height: helper.$alignedHeights-md,
);
$form-component-lg: (
  gap: px-to-rem(12),
  padding-inline: px-to-rem(16),
  padding-block: px-to-rem(16),
  border-radius: helper.$alignedBorderRadius-lg,
  height: helper.$alignedHeights-lg,
);
$form-component-xl: (
  gap: px-to-rem(12),
  padding-inline: px-to-rem(24),
  padding-block: px-to-rem(24),
  border-radius: helper.$alignedBorderRadius-xl,
  height: helper.$alignedHeights-xl,
);