@use "../core/_index.scss" as *;
@use "../input/_variables.scss" as *;

// OTP

/// The gap between the items in the small OTP.
/// @group one-time-password
$kendo-otp-sm-gap: k-spacing(1) !default;
/// The gap between the items in the medium OTP.
/// @group one-time-password
$kendo-otp-md-gap: k-spacing(1.5) !default;
/// The gap between the items in the large OTP.
/// @group one-time-password
$kendo-otp-lg-gap: k-spacing(2) !default;

/// The horizontal padding of the small OTP separator.
/// @group one-time-password
$kendo-otp-sm-separator-padding-x: $kendo-otp-sm-gap !default;
/// The horizontal padding of the medium OTP separator.
/// @group one-time-password
$kendo-otp-md-separator-padding-x: $kendo-otp-md-gap !default;
/// The horizontal padding of the large OTP separator.
/// @group one-time-password
$kendo-otp-lg-separator-padding-x: $kendo-otp-lg-gap !default;

/// The horizontal padding of the small OTP separator.
/// @group one-time-password
$kendo-otp-sm-input-width: $kendo-input-sm-calc-size !default;
/// The horizontal padding of the medium OTP separator.
/// @group one-time-password
$kendo-otp-md-input-width: $kendo-input-md-calc-size !default;
/// The horizontal padding of the large OTP separator.
/// @group one-time-password
$kendo-otp-lg-input-width: $kendo-input-lg-calc-size !default;

@forward "@progress/kendo-theme-core/scss/components/otp/_variables.scss" with (
    $kendo-otp-sm-gap: $kendo-otp-sm-gap,
    $kendo-otp-md-gap: $kendo-otp-md-gap,
    $kendo-otp-lg-gap: $kendo-otp-lg-gap,
    $kendo-otp-sm-separator-padding-x: $kendo-otp-sm-separator-padding-x,
    $kendo-otp-md-separator-padding-x: $kendo-otp-md-separator-padding-x,
    $kendo-otp-lg-separator-padding-x: $kendo-otp-lg-separator-padding-x,
    $kendo-otp-sm-input-width: $kendo-otp-sm-input-width,
    $kendo-otp-md-input-width: $kendo-otp-md-input-width,
    $kendo-otp-lg-input-width: $kendo-otp-lg-input-width
);