@use 'ej2-base/styles/definition/material3-dark' as *;
@forward 'ej2-base/styles/definition/material3-dark';
$otp-input-width: 32px !default;
$otp-input-height: 32px !default;
$otp-input-gap: 14px !default;
$otp-separator-input-gap: 6px !default;
$otp-input-padding: 0 !default;
$otp-input-font-size: 14px !default;
$otp-input-font-weight: 400 !default;
$otp-input-password-font-size: 18px !default;
$otp-input-line-height: 20px !default;
$otp-input-border-radius-outlined: $radius-4 !default;
$otp-input-border-radius-underlined: $radius-0 !default;
$otp-input-border-radius-filled: $radius-4 $radius-4 $radius-0 $radius-0 !default;
$otp-separator-font-size: 16px !default;
$otp-separator-font-weight: 400 !default;
$otp-separator-line-height: 24px !default;

$otp-small-input-width: 24px !default;
$otp-small-input-height: 24px !default;
$otp-small-input-gap: 8px !default;
$otp-small-separator-input-gap: 4px !default;
$otp-small-input-font-size: 12px !default;
$otp-small-input-password-font-size: 18px !default;
$otp-small-input-line-height: 16px !default;
$otp-small-separator-font-size: 16px !default;
$otp-small-separator-line-height: 24px !default;

$otp-bigger-small-input-width: 36px !default;
$otp-bigger-small-input-height: 36px !default;
$otp-bigger-small-input-gap: 16px !default;
$otp-bigger-small-separator-input-gap: 6px !default;
$otp-bigger-small-input-font-size: 14px !default;
$otp-bigger-small-input-password-font-size: 20px !default;
$otp-bigger-small-input-line-height: 20px !default;
$otp-bigger-small-separator-font-size: 16px !default;
$otp-bigger-small-separator-line-height: 24px !default;

$otp-bigger-input-width: 40px !default;
$otp-bigger-input-height: 40px !default;
$otp-bigger-input-gap: 16px !default;
$otp-bigger-separator-input-gap: 8px !default;
$otp-bigger-input-font-size: 16px !default;
$otp-bigger-input-password-font-size: 20px !default;
$otp-bigger-input-line-height: 24px !default;
$otp-bigger-separator-font-size: 16px !default;
$otp-bigger-separator-line-height: 24px !default;

$otp-input-text-color: rgba($content-text-color) !default;
$otp-background-color: $transparent !default;
$otp-input-border-color: rgba($border) !default;
$otp-input-border-bottom-color: rgba($border) !default;
$otp-input-filled-bg-color: rgba($series-1) !default;
$otp-input-error-color: rgba($border-error) !default;
$otp-input-success-color: rgba($border-success) !default;
$otp-input-warning-color: rgba($border-warning) !default;
$otp-input-separator-color: $border !default;
$otp-input-underlined-bg-color: $transparent !default;
$otp-input-disabled-color: rgba($content-text-color) !default;
$otp-input-disabled-border-color: rgba($border) !default;
$otp-input-disabled-bg-color: $otp-background-color !default;
$otp-input-zero-padding-margin: 0 !default;