@use '../variables' as variables;

@forward 'forms/form-control';
@forward 'forms/form-select';

:root {
  --input-bg: #{variables.$input-bg};
  --input-border-color: #{variables.$input-border-color};
  --input-border-radius: #{variables.$input-border-radius};
  --input-border-width: #{variables.$input-border-width};
  --input-box-shadow: #{variables.$input-box-shadow};
  --input-color: #{variables.$input-color};
  --input-font-family: #{variables.$input-font-family};
  --input-font-size: #{variables.$input-font-size};
  --input-font-weight: #{variables.$input-font-weight};
  --input-height: #{variables.$input-height};
  --input-line-height: #{variables.$input-line-height};
  --input-padding-x: #{variables.$input-padding-x};
  --input-padding-y: #{variables.$input-padding-y};
  --input-transition: #{variables.$input-transition};

  --input-focus-bg: #{variables.$input-focus-bg};
  --input-focus-color: #{variables.$input-focus-color};
  --input-focus-border-color: #{variables.$input-focus-border-color};
  --input-focus-box-shadow: #{variables.$input-box-shadow};

  --input-placeholder-color: #{variables.$input-placeholder-color};

  --input-disabled-bg: #{variables.$input-disabled-bg};
  --input-disabled-border-color: #{variables.$input-disabled-border-color};
  --input-disabled-color: #{variables.$input-disabled-color};

  // xs

  --input-border-radius-xs: #{variables.$input-border-radius-xs};
  --input-font-size-xs: #{variables.$input-font-size-xs};
  --input-height-xs: #{variables.$input-height-xs};
  --input-padding-x-xs: #{variables.$input-padding-x-xs};
  --input-padding-y-xs: #{variables.$input-padding-y-xs};

  // sm

  --input-border-radius-sm: #{variables.$input-border-radius-sm};
  --input-font-size-sm: #{variables.$input-font-size-sm};
  --input-height-sm: #{variables.$input-height-sm};
  --input-padding-x-sm: #{variables.$input-padding-x-sm};
  --input-padding-y-sm: #{variables.$input-padding-y-sm};

  // lg

  --input-border-radius-lg: #{variables.$input-border-radius-lg};
  --input-font-size-lg: #{variables.$input-font-size-lg};
  --input-height-lg: #{variables.$input-height-lg};
  --input-padding-x-lg: #{variables.$input-padding-x-lg};
  --input-padding-y-lg: #{variables.$input-padding-y-lg};

  // xl

  --input-border-radius-xl: #{variables.$input-border-radius-xl};
  --input-font-size-xl: #{variables.$input-font-size-xl};
  --input-height-xl: #{variables.$input-height-xl};
  --input-padding-x-xl: #{variables.$input-padding-x-xl};
  --input-padding-y-xl: #{variables.$input-padding-y-xl};
}