@use 'sass:map';
@use 'display' as *;
@use 'typography' as *;
@use 'spacer' as *;

$btn: () !default;
$btn: 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': 2px,
    'focus-ring-type': outline,
    'font-family': null,
    'font-size': map.get($typography, 'font-size-base'),
    'font-style': null,
    'font-weight': 500,
    'gap': map.get($spacers, 'xs'),
    'icon-padding': 0.75em,
    'icon-size': 1em,
    'padding': 0.75em 1em,
    'shadow-size': 0.25rem,
    'text-transform': null,
  ),
  $btn
);

$btn-lg: () !default;
$btn-lg: map.merge(
  (
    'font-size': 1.15rem,
    'gap': map.get($spacers, 'xs'),
    'icon-padding': 0.9em,
    'padding': 0.9em 1.15em,
  ),
  $btn-lg
);

$btn-sm: () !default;
$btn-sm: map.merge(
  (
    'font-size': 0.8rem,
    'gap': map.get($spacers, 'xxs'),
    'icon-padding': 0.5em,
    'icon-size': 0.8rem,
    'padding': 0.5em 0.75em,
  ),
  $btn-sm
);