@use '@syncfusion/react-base/styles/themes/variables' as *;

$input-line-height: $line-height-sm !default;
$input-font-size: $font-size-sm !default;
$input-transparent-background: $transparent !default;
$input-content-color: rgb($content-text-color) !default;
$input-content-disabled-color: $content-text-color-disabled !default;
$input-border-color: rgb($border) !default;
$input-border-disabled-color: rgb($border-light) !default;
$input-disabled-bg-color: none !default;
$input-readonly-bg-color: none !default;
$input-line-bottom: $spacing-0 !default;
$input-line-background: rgb($primary-bg-color) !default;
$input-padding: $spacing-5 $spacing-0 !default;
$input-select-background: rgb($primary) !default;
$input-select-font-color: rgb($primary-text-color) !default;
$input-placeholder-color: rgb($outline) !default;
$input-float-label-color: rgb($content-text-color-alt1) !default;
$input-placeholder-disabled-color: $content-text-color-disabled !default;
$input-margin-bottom: $spacing-4 !default;
$input-border-hover-color: rgb($content-text-color-alt1) !default;
$input-float-prefix-focus-left: $spacing-0 !default;
$input-border-focus-color: rgb($primary) !default;

$input-outlined-border-radius: $radius-4 !default;
$input-medium-outlined-border-radius: $radius-4 !default;
$input-large-outlined-border-radius: $radius-4 !default;
$input-outlined-padding: $spacing-5 $spacing-16 !default;
$input-outlined-prefix-padding: $spacing-5 $spacing-0 !default;
$input-outlined-focus-border-color: rgb($primary) !default;
$input-outlined-border-hover-color: rgb($content-text-color-alt1) !default;
$input-outlined-disabled-bg-color: transparent !default;
$input-outlined-readonly-bg-color: transparent !default;

$input-filled-background: rgb($series-1) !default;
$input-filled-background-transition: opacity 15ms linear, background-color 15ms linear !default;
$input-filled-border-radius: $radius-4 $radius-4 $radius-0 $radius-0 !default;
$input-medium-filled-border-radius: $radius-4 $radius-4 $radius-0 $radius-0 !default;
$input-large-filled-border-radius: $radius-4 $radius-4 $radius-0 $radius-0 !default;
$input-filled-padding: $spacing-7 $spacing-12 !default;
$input-filled-prefix-padding: $spacing-7 $spacing-0 !default;
$input-filled-float-padding: $spacing-13 $spacing-12 $spacing-1 $spacing-12 !default;
$input-filled-prefix-float-padding: $spacing-11 $spacing-0 $spacing-1 $spacing-0 !default;
$input-filled-border-width: $spacing-0 $spacing-0 $spacing-1 $spacing-0 !default;
$input-filled-border-color: rgb($border) !default;
$input-filled-hover-active-bg-color: rgb($surface-variant) !default;
$input-filled-hover-border-color: rgb($border) !default;
$input-filled-box-shadow: none !default;
$input-filled-disabled-bg-color: rgb($surface-variant) !default;
$input-filled-line-background: rgb($primary-bg-color) !default;
$input-filled-success-line-background: rgb($border-success) !default;
$input-filled-warning-line-background: rgb($border-warning) !default;
$input-filled-error-line-background: rgb($border-error) !default;
$input-filled-focus-border-color: rgb($primary) !default;

$input-float-margin-top: $spacing-16 !default;
$input-float-top: calc(var(--sf-spacing) * -0.6875) !default;
$input-float-text-letter-spacing: $letter-spacing-wide !default;
$input-float-line-height: $line-height-xs !default;
$input-float-focus-height: $spacing-2 !default;
$input-float-focus-line-width: $spacing-0 !default;
$input-float-focus-color: rgb($primary) !default;
$input-float-focus-font-size: $font-size-xs !default;
$input-float-focus-transition: translate3d(0, calc(var(--sf-spacing) * -0.3125), 0) !default;
$input-float-prefix-focus-transition: translate3d(0, calc(var(--sf-spacing) * -0.3125), 0) !default;
$input-float-transform: translate3d(0, $spacing-16, 0) scale(1) !default;
$input-float-font-weight: $font-weight-normal !default;
$input-float-left: $spacing-0 !default;

$input-outlined-float-top: calc(var(--sf-spacing) * -0.3125) !default;
$input-outlined-float-left: $spacing-16 !default;
$input-outlined-float-focus-left: $spacing-12 !default;
$input-outlined-float-focus-transition: translate3d(0, $spacing-2, 0) !default;
$input-outlined-float-focus-padding: $spacing-0 $spacing-4 !default;
$input-outlined-float-focus-background: rgb($content-bg-color) !default;

$input-filled-float-top: calc(var(--sf-spacing) * -0.6875) !default;
$input-filled-float-left: $spacing-12 !default;
$input-filled-float-focus-left: $spacing-16 !default;
$input-filled-float-focus-transition: translate3d(0, $spacing-11, 0) !default;
$input-filled-font-size: $font-size-xs !default;
$input-filled-line-height: $line-height-xs !default;

$input-close-icon-box-size: $spacing-32 !default;
$input-close-icon-box-padding: $spacing-5 !default;
$input-close-icon-margin-inline: $spacing-3 !default;
$input-close-icon-box-margin: calc(var(--sf-spacing) * -0.0625) !default;
$input-close-icon-color: rgb($content-text-color-alt1) !default;
$input-close-icon-hover-color: rgb($icon-color) !default;
$input-close-icon-hover-background: rgba($content-text-color, .08) !default;
$input-close-icon-active-background: rgba($content-text-color, .12) !default;
$input-close-icon-active-color: rgb($content-text-color) !default;
$input-close-icon-border-radius: $radius-full !default;

$input-medium-line-height: $line-height-sm !default;
$input-medium-font-size: $font-size-sm !default;
$input-medium-letter-spacing: $letter-spacing-wider !default;
$input-medium-padding: $spacing-9 $spacing-0 !default;
$input-medium-close-icon-box-size: $spacing-40 !default;
$input-medium-close-icon-box-padding: $spacing-6 !default;
$input-medium-close-icon-margin-inline: $spacing-4 !default;
$input-medium-close-icon-font-size: $font-size-xl !default;
$input-medium-float-prefix-focus-transition: translate3d(0, calc(var(--sf-spacing) * -0.625), 0) !default;
$input-medium-float-focus-transition: translate3d(0, calc(var(--sf-spacing) * -0.5625), 0) !default;
$input-medium-float-font-size: $font-size-xs !default;
$input-medium-float-line-height: $line-height-xs !default;
$input-medium-float-left: $spacing-0 !default;
$input-medium-float-margin-top: $spacing-16 !default;

$input-medium-outlined-padding: $spacing-9 $spacing-16 !default;
$input-medium-outlined-prefix-padding: $spacing-9 $spacing-0 !default;
$input-medium-outlined-float-top: calc(var(--sf-spacing) * -0.4375) !default;
$input-medium-outlined-float-prefix-focus-transition: translate3d(0, calc(var(--sf-spacing) * -0.125), 0) !default;
$input-medium-outlined-float-focus-transition: translate3d(0, calc(var(--sf-spacing) * -0.125), 0) !default;

$input-medium-filled-line-height: $line-height-sm !default;
$input-medium-filled-padding: $spacing-9 $spacing-16 !default;
$input-medium-filled-float-padding: calc(var(--sf-spacing) * 1.0625) $spacing-16 $spacing-1 $spacing-16 !default;
$input-medium-filled-float-top: calc(var(--sf-spacing) * -0.4375) !default;
$input-medium-filled-float-left: $spacing-14 !default;
$input-medium-filled-float-focus-transition: translate3d(0, $spacing-7, 0) !default;
$input-medium-filled-font-size: $font-size-sm !default;

$input-large-line-height: $line-height-base !default;
$input-large-font-size: $font-size-base !default;
$input-large-letter-spacing: $letter-spacing-normal !default;
$input-large-padding: $spacing-11 $spacing-0 !default;
$input-large-close-icon-box-size: $spacing-40 !default;
$input-large-close-icon-box-padding: $spacing-10 !default;
$input-large-close-icon-margin-inline: $spacing-4 !default;
$input-large-close-icon-font-size: $font-size-xl !default;
$input-large-float-prefix-focus-transition: translate3d(0, calc(var(--sf-spacing) * -0.625), 0) !default;
$input-large-float-focus-transition: translate3d(0, calc(var(--sf-spacing) * -0.5625), 0) !default;
$input-large-float-font-size: $font-size-xs !default;
$input-large-float-line-height: $line-height-xs !default;
$input-large-float-left: $spacing-0 !default;
$input-large-float-margin-top: $spacing-16 !default;

$input-large-outlined-padding: $spacing-11 $spacing-16 !default;
$input-large-outlined-prefix-padding: $spacing-11 $spacing-0 !default;
$input-large-outlined-float-top: calc(var(--sf-spacing) * -0.3125) !default;
$input-large-outlined-float-prefix-focus-transition: translate3d(0, calc(var(--sf-spacing) * -0.125), 0) !default;
$input-large-outlined-float-focus-transition: translate3d(0, calc(var(--sf-spacing) * -0.125), 0) !default;

$input-large-filled-line-height: $line-height-base !default;
$input-large-filled-padding: $spacing-11 $spacing-16 !default;
$input-large-filled-float-padding: $spacing-20 $spacing-16 $spacing-2 $spacing-16 !default;
$input-large-filled-float-prefix-padding: $spacing-20 $spacing-0 $spacing-2 $spacing-0 !default;
$input-large-filled-float-top: calc(var(--sf-spacing) * -0.3125) !default;
$input-large-filled-float-left: $spacing-14 !default;
$input-large-filled-float-focus-transition: translate3d(0, $spacing-8, 0) !default;
$input-large-filled-font-size: $font-size-base !default;
$input-large-filled-prefix-padding: $spacing-11 $spacing-0 !default;

$input-success-border-color: rgb($border-success) !default;
$input-warning-border-color: rgb($border-warning) !default;
$input-error-border-color: rgb($border-error) !default;

$input-text-success-color: rgb($success) !default;
$input-text-warning-color: rgb($warning) !default;
$input-text-error-color: rgb($error) !default;

$input-form-label-font-size: $font-size-xs !default;
$input-form-label-line-height: $line-height-xs !default;
$input-form-label-letter-space: $letter-spacing-wide !default;
$input-form-label-color: rgb($content-text-color-alt1) !default;
$input-form-error-font-size: $font-size-xs !default;
$input-form-error-color: rgb($error-font-color) !default;

$input-outlined-focus-border-shadow: 0 0 0 2px $input-outlined-focus-border-color;
$input-success-border-shadow: inset 1px 1px $input-success-border-color, inset -1px 0 $input-success-border-color, inset 0 -1px $input-success-border-color;
$input-warning-border-shadow: inset 1px 1px $input-warning-border-color, inset -1px 0 $input-warning-border-color, inset 0 -1px $input-warning-border-color;
$input-error-border-shadow: inset 1px 1px $input-error-border-color, inset -1px 0 $input-error-border-color, inset 0 -1px $input-error-border-color;

$input-filled-focus-border-shadow: transparent;
$input-filled-success-border-shadow: transparent;
$input-filled-warning-border-shadow: transparent;
$input-filled-error-border-shadow: transparent;

$input-helper-text-font-weight: $font-weight-normal !default;
$input-helper-text-font-size: $font-size-xs !default; 
$input-helper-text-line-height: $line-height-xs !default;
$input-helper-text-letter-spacing: $letter-spacing-wide !default;
$input-helper-text-on-focus-transform: translateY(-100%) !default;
$input-helper-text-on-focus-transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms !default;
$input-helper-text-on-focused-transform: translateY(0) !default;

$input-medium-helper-text-font-size: $font-size-xs !default; 
$input-medium-helper-text-line-height: $line-height-xs !default;

$input-large-helper-text-font-size: $font-size-xs !default; 
$input-large-helper-text-line-height: $line-height-xs !default;