@use 'sass:map';
@use '../display' as *;
@use '../typography' as *;

$form-control: () !default;
$form-control: map.merge(
  (
    'border-radius': map.get($display, 'border-radius-sm'),
    'border-width': 1px,
    'focus-ring-box-shadow-type': outside,
    'focus-ring-offset': 2px,
    'focus-ring-size': 0.25rem,
    'focus-ring-type': box-shadow,
    'font-family': null,
    'font-size': map.get($typography, 'font-size-base'),
    'font-weight': null,
    'line-height': 1.5,
    'padding': 0.5em 0.75em,
    'textarea-block-size': 6rem,
  ),
  $form-control
);

$form-control-lg: () !default;
$form-control-lg: map.merge(
  (
    'font-size': map.get($typography, 'size-lg'),
    'padding': 0.65em 1em,
  ),
  $form-control-lg
);

$form-control-sm: () !default;
$form-control-sm: map.merge(
  (
    'border-radius': 0.35em,
    'font-size': map.get($typography, 'size-sm'),
    'padding': 0.25em 0.75em,
  ),
  $form-control-sm
);

$form-control-color: () !default;
$form-control-color: map.merge(
  (
    'aspect-ratio': 1,
    'block-size': 100%,
    'inline-size': 2.625rem,
    'padding': 0.5em,
  ),
  $form-control-color
);

$form-control-color-lg: () !default;
$form-control-color-lg: map.merge(
  (
    'aspect-ratio': 1,
    'block-size': 100%,
    'inline-size': 3.204rem,
    'padding': 0.5em,
  ),
  $form-control-color-lg
);

$form-control-color-sm: () !default;
$form-control-color-sm: map.merge(
  (
    'aspect-ratio': 1,
    'block-size': 100%,
    'inline-size': 1.925rem,
    'padding': 0.25em,
  ),
  $form-control-color-sm
);