@use 'sass:map';
@use '../utils/constants.scss';
@use '../utils/tokens.scss' as tokens;
@use './icon.vars.scss' as iconVars;

// Shared CSS custom-property names for the input field size scale. These are
// deliberately distinct from the generic icon size var so a Beam `<Icon>` placed
// in a field slot resizes with the field even when it carries its own size prop.
$fieldHeight: '--#{constants.$prefix}input-field-height';
$fieldPaddingX: '--#{constants.$prefix}input-field-padding-x';
$fieldPaddingY: '--#{constants.$prefix}input-field-padding-y';
$fieldFont: '--#{constants.$prefix}input-field-font';
$fieldIconSize: '--#{constants.$prefix}input-field-icon-size';

// Shared sm / md / lg size scale for every Beam input component (TextField,
// NativeSelect, Select, Autocomplete, Search), driven by the input component
// size tokens.
$sizes: (
  'sm': (
    'height': tokens.$bm-comp-input-size-field-height-sm,
    'padding-y': tokens.$bm-comp-input-space-field-y-sm,
    'padding-x': tokens.$bm-comp-input-space-field-x-sm,
    'icon': tokens.$bm-comp-input-size-field-icon-sm,
    'font': tokens.$bm-comp-input-typo-sm,
  ),
  'md': (
    'height': tokens.$bm-comp-input-size-field-height-md,
    'padding-y': tokens.$bm-comp-input-space-field-y-md,
    'padding-x': tokens.$bm-comp-input-space-field-x-md,
    'icon': tokens.$bm-comp-input-size-field-icon-md,
    'font': tokens.$bm-comp-input-typo-md,
  ),
  'lg': (
    'height': tokens.$bm-comp-input-size-field-height-lg,
    'padding-y': tokens.$bm-comp-input-space-field-y-lg,
    'padding-x': tokens.$bm-comp-input-space-field-x-lg,
    'icon': tokens.$bm-comp-input-size-field-icon-lg,
    'font': tokens.$bm-comp-input-typo-lg,
  ),
);
// Emits the per-size field custom properties. Include inside an input
// component's root block.
@mixin field-size-scale {
  @each $size, $props in $sizes {
    &--#{$size} &__field {
      #{$fieldHeight}: #{map.get($props, 'height')};
      #{$fieldPaddingY}: #{map.get($props, 'padding-y')};
      #{$fieldPaddingX}: #{map.get($props, 'padding-x')};
      #{$fieldFont}: #{map.get($props, 'font')};
      #{$fieldIconSize}: #{map.get($props, 'icon')};
    }
  }
}

// Resize rule for Beam icons (.bm-icon) inside an input content slot: they track
// the field icon size via the dedicated var, which an Icon's own size prop cannot
// shadow. Non-Beam (third-party) SVGs are left untouched. Include inside the
// component's content-slot selector.
@mixin field-content-icon {
  .#{iconVars.$iconBaseClass} {
    width: var(#{$fieldIconSize});
    height: var(#{$fieldIconSize});
  }
}