_forms.scss

@use 'sass:math';
@use 'sass:list';
@use 'sass:map';

@use './button';
@use './../color';
@use './../type';
@use './../spacing';
@use './../../functions/sizing';

@use './../../functions/tokens';
@use './../../tokens/utilities';

// Forms

// Used elsewhere than text input, textarea or select

$input-padding-y: button.$input-btn-padding-y !default;
$input-padding-x: button.$input-btn-padding-x !default;
$input-line-height: type.$line-height-copy !default;

$input-padding-y-sm: sizing.px-to-rem(button.$input-btn-padding-y-sm) !default;
$input-line-height-sm: type.$line-height-copy !default;

$input-padding-y-rg: button.$input-btn-padding-y-rg !default;
$input-padding-x-rg: button.$input-btn-padding-x-rg !default;
$input-line-height-rg: type.$line-height-copy !default;

$input-padding-y-lg: sizing.px-to-rem(button.$input-btn-padding-y-lg) !default;
$input-line-height-lg: type.$line-height-copy !default;

$input-disabled-border-color: color.$gray-40; // Design System only

$input-border-color: color.$gray-80 !default;
$input-border-width: button.$input-btn-border-width !default;

$input-focus-width: button.$input-btn-focus-width !default;
$input-focus-box-shadow: none !default;
$input-focus-outline-thickness: tokens.get('utility-gap-2', utilities.$post-spacing);

$input-height-border: $input-border-width * 2 !default;

$input-height-content: type.$font-size-base * $input-line-height !default;
$input-height-inner: $input-height-content + ($input-padding-y * 2) !default;
$input-height: $input-height-inner + sizing.px-to-rem($input-height-border) !default;

$input-height-content-sm: type.$font-size-14 * 1 !default;
$input-height-inner-sm: $input-height-content-sm + ($input-padding-y-sm * 2) + sizing.px-to-rem(2) !default; // + 2px approximation from Figma mockup
$input-height-sm: $input-height-inner-sm + sizing.px-to-rem($input-height-border) !default;

$input-height-content-rg: type.$font-size-regular * $input-line-height-rg !default;
$input-height-inner-rg: $input-height-content-rg + ($input-padding-y-rg * 2) !default;
$input-height-rg: calc(#{$input-height-inner-rg} + #{$input-height-border}) !default;

$input-height-content-lg: (type.$font-size-16 * $input-line-height-lg) - sizing.px-to-rem(2) !default; // - 2px and remove approximation in Figma
$input-height-inner-lg: $input-height-content-lg + ($input-padding-y-lg * 2) !default;
$input-height-lg: $input-height-inner-lg + sizing.px-to-rem($input-height-border) !default;

$form-range-track-height: 0.2rem !default;
$form-range-track-bg: color.$gray-20 !default;
$form-range-track-box-shadow: inset 0 0.25rem 0.25rem rgba(color.$black, 0.1) !default;

$form-range-thumb-width: 2rem !default;
$form-range-thumb-height: $form-range-thumb-width !default;
$form-range-thumb-bg: color.$white !default;
$form-range-thumb-border: 2px solid color.$black !default;
$form-range-thumb-focus-box-shadow:
  0 0 0 1px color.$black,
  0 0 0 0.2rem rgba(color.$gray-80, 0.25) !default;
$form-range-thumb-focus-box-shadow-width: 0.2rem; // For focus box shadow issue in Edge
$form-range-thumb-active-bg: color.$white !default;
$form-range-thumb-disabled-bg: $form-range-thumb-bg !default;
$form-range-thumb-disabled-border-color: $input-disabled-border-color !default;

$form-range-height: $form-range-thumb-height + $form-range-thumb-focus-box-shadow-width * 2;
$form-range-input-height-ie: 6rem !default;

$form-floating-height: $input-height-lg * $input-line-height-lg;