@use "sass:map";
@use "sass:math";
@use "../core/_index.scss" as *;
@use "../core/functions/index.import.scss" as *;

// Button

/// The width of the border around the Button.
/// @group button
$kendo-button-border-width: 1px !default;

/// The border radius of the Button.
/// @group button
$kendo-button-border-radius: null !default;

/// The horizontal padding of the Button.
/// @group button
$kendo-button-padding-x: k-spacing(4) !default;
/// The horizontal padding of the small Button.
/// @group button
$kendo-button-sm-padding-x: k-spacing(4) !default;
/// The horizontal padding of the medium Button.
/// @group button
$kendo-button-md-padding-x: k-spacing(4) !default;
/// The horizontal padding of the large Button.
/// @group button
$kendo-button-lg-padding-x: k-spacing(4) !default;

/// The vertical padding of the Button.
/// @group button
$kendo-button-padding-y: k-spacing(2) !default;
/// The vertical padding of the small Button.
/// @group button
$kendo-button-sm-padding-y: k-spacing(1.5) !default;
/// The vertical padding of the medium Button.
/// @group button
$kendo-button-md-padding-y: k-spacing(2) !default;
/// The vertical padding of the large Button.
/// @group button
$kendo-button-lg-padding-y: k-spacing(2.5) !default;

/// The font family of the Button.
/// @group button
$kendo-button-font-family: var( --kendo-font-family, inherit ) !default;

/// The font size of the Button.
/// @group button
$kendo-button-font-size: var( --kendo-font-size, inherit )  !default;
/// The font size of the small Button.
/// @group button
$kendo-button-sm-font-size: var( --kendo-font-size, inherit )  !default;
/// The font size of the medium Button.
/// @group button
$kendo-button-md-font-size: var( --kendo-font-size, inherit )  !default;
/// The font size of the large Button.
/// @group button
$kendo-button-lg-font-size: var( --kendo-font-size, inherit )  !default;

/// Line heights used along with the $kendo-font-size variable.
/// @group button
$kendo-button-line-height: math.div( 20, 14 ) !default;
/// The line height used along with the $kendo-font-size variable of the small Button.
/// @group button
$kendo-button-sm-line-height: math.div( 20, 14 ) !default;
/// The line height used along with the $kendo-font-size variable of the medium Button.
/// @group button
$kendo-button-md-line-height: math.div( 20, 14 ) !default;
/// The line height used along with the $kendo-font-size variable of the large Button.
/// @group button
$kendo-button-lg-line-height: math.div( 20, 14 ) !default;

/// The calculated height of the Button.
/// @group button
$kendo-button-calc-size: calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
$kendo-button-sm-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
$kendo-button-md-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
$kendo-button-lg-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;

/// The calculated inner height of the Button excluding the border width.
/// @group button
$kendo-button-inner-calc-size: calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-padding-y} * 2 ) ) !default;
$kendo-button-sm-inner-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
$kendo-button-md-inner-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
$kendo-button-lg-inner-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) ) !default;

/// The sizes map for the Button.
/// @group button
$kendo-button-sizes: (
    sm: (
        padding-x: $kendo-button-sm-padding-x,
        padding-y: $kendo-button-sm-padding-y,
        font-size: $kendo-button-sm-font-size,
        line-height: $kendo-button-sm-line-height
    ),
    md: (
        padding-x: $kendo-button-md-padding-x,
        padding-y: $kendo-button-md-padding-y,
        font-size: $kendo-button-md-font-size,
        line-height: $kendo-button-md-line-height
    ),
    lg: (
        padding-x: $kendo-button-lg-padding-x,
        padding-y: $kendo-button-lg-padding-y,
        font-size: $kendo-button-lg-font-size,
        line-height: $kendo-button-lg-line-height
    )
) !default;

/// The theme colors map for the Button.
/// @group button
$kendo-button-theme-colors: map.merge(
    $kendo-theme-colors,
    ( "base": $kendo-base-bg )
) !default;

/// The base background of the Button.
/// @group button
$kendo-button-bg: if($kendo-enable-color-system, k-color( base ), $kendo-base-bg) !default;
/// The base text color of the Button.
/// @group button
$kendo-button-text: if($kendo-enable-color-system, k-color( on-base ), $kendo-base-text) !default;
/// The base border color of the Button.
/// @group button
$kendo-button-border: $kendo-button-bg !default;
/// The base background gradient of the Button.
/// @group button
$kendo-button-gradient: none !default;
/// The base shadow of the Button.
/// @group button
$kendo-button-shadow: k-elevation(2) !default;

/// The base background of the hovered Button.
/// @group button
$kendo-button-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), null) !default;
/// The base text color of the hovered Button.
/// @group button
$kendo-button-hover-text: null !default;
/// The base border color of the hovered Button.
/// @group button
$kendo-button-hover-border: if($kendo-enable-color-system, k-color( base-hover ), null) !default;
/// The base background gradient of the hovered Button.
/// @group button
$kendo-button-hover-gradient: null !default;
/// The base shadow of the hovered Button.
/// @group button
$kendo-button-hover-shadow: $kendo-button-shadow !default;

/// The base background color of the active Button.
/// @group button
$kendo-button-active-bg: if($kendo-enable-color-system, k-color( base-active ), $kendo-base-bg) !default;
/// The base text color of the active Button.
/// @group button
$kendo-button-active-text: if($kendo-enable-color-system, k-color( on-base ), $kendo-base-text) !default;
/// The base border color of the active Button.
/// @group button
$kendo-button-active-border: if($kendo-enable-color-system, k-color( base-active ), null) !default;
/// The base background gradient of the active Button.
/// @group button
$kendo-button-active-gradient: null !default;
/// The base shadow of the active Button.
/// @group button
$kendo-button-active-shadow: k-elevation(6) !default;

/// The base background color of the selected Button.
/// @group button
$kendo-button-selected-bg: $kendo-button-active-bg !default;
/// The base text color of the selected Button.
/// @group button
$kendo-button-selected-text: $kendo-button-active-text !default;
/// The base border color of the selected Button.
/// @group button
$kendo-button-selected-border: $kendo-button-active-bg !default;
/// The base background gradient of the selected Button.
/// @group button
$kendo-button-selected-gradient: none !default;
/// The base shadow of the selected Button.
/// @group button
$kendo-button-selected-shadow: $kendo-button-shadow !default;

/// The base background of the focused Button.
/// @group button
$kendo-button-focus-bg: if($kendo-enable-color-system, k-color( base-hover ), null) !default;
/// The base text color of the focused Button.
/// @group button
$kendo-button-focus-text: null !default;
/// The base border color of the focused Button.
/// @group button
$kendo-button-focus-border: if($kendo-enable-color-system, k-color( base-hover ), null) !default;
/// The base background gradient of focused Button.
/// @group button
$kendo-button-focus-gradient: null !default;
/// The base shadow of the focused Button.
/// @group button
$kendo-button-focus-shadow: k-elevation(3) !default;

/// The base background color of the disabled Button.
/// @group button
$kendo-button-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), k-try-shade( $kendo-body-bg, 12% )) !default;
/// The base text color of the disabled Button.
/// @group button
$kendo-button-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 32%, transparent), $kendo-disabled-text) !default;
/// The base border color of the disabled Button.
/// @group button
$kendo-button-disabled-border: if($kendo-enable-color-system, transparent, $kendo-button-disabled-bg) !default;
/// The base background gradient of the disabled Button.
/// @group button
$kendo-button-disabled-gradient: null !default;
/// The base shadow of the disabled Button.
/// @group button
$kendo-button-disabled-shadow: null !default;

// Solid Button
$kendo-solid-button-gradient: none !default;
$kendo-solid-button-shade-function: "k-try-shade" !default;
$kendo-solid-button-shade-text-amount: unset !default;
$kendo-solid-button-shade-bg-amount: 0 !default;
$kendo-solid-button-shade-border-amount: 0 !default;
$kendo-solid-button-hover-shade-text-amount: null !default;
$kendo-solid-button-hover-shade-bg-amount: 0 !default;
$kendo-solid-button-hover-shade-border-amount: 0 !default;
$kendo-solid-button-active-shade-text-amount: null !default;
$kendo-solid-button-active-shade-bg-amount: 0 !default;
$kendo-solid-button-active-shade-border-amount: 0 !default;
$kendo-solid-button-shadow: false !default;
$kendo-solid-button-shadow-blur: unset !default;
$kendo-solid-button-shadow-spread: unset !default;
$kendo-solid-button-shadow-opacity: unset !default;

// Outline Button
$kendo-outline-button-shadow: false !default;
$kendo-outline-button-shadow-blur: unset !default;
$kendo-outline-button-shadow-spread: unset !default;
$kendo-outline-button-shadow-opacity: unset !default;

// Link Button
$kendo-link-button-shadow: false !default;
$kendo-link-button-shadow-blur: unset !default;
$kendo-link-button-shadow-spread: unset !default;
$kendo-link-button-shadow-opacity: unset !default;

// Clear Button
$kendo-clear-button-focus-opacity: .155 !default; // equal to 10% of black

/// The overlay opacity of the hovered flat Button. Used to create a background for the flat Button.
/// @group button
$kendo-flat-button-hover-opacity: .08 !default;
/// The overlay opacity of the focused flat Button. Used to create a background for the flat Button.
/// @group button
$kendo-flat-button-focus-opacity: .12 !default;
/// The overlay opacity of the active flat Button. Used to create a background for the flat Button.
/// @group button
$kendo-flat-button-active-opacity: .16 !default;
/// The overlay opacity of the selected flat Button. Used to create a background for the flat Button.
/// @group button
$kendo-flat-button-selected-opacity: .22 !default;
/// The opacity of the flat Button focus ring. Used to create a border for the flat Button.
/// @group button
$kendo-flat-button-focus-ring-opacity: unset !default;

/// The box-shadow transition of the Button.
/// @group button
$kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default;

@forward "@progress/kendo-theme-core/scss/components/button/_variables.scss" with (
    $kendo-button-border-width: $kendo-button-border-width,
    $kendo-button-border-radius: $kendo-button-border-radius,
    $kendo-button-padding-x: $kendo-button-padding-x,
    $kendo-button-sm-padding-x: $kendo-button-sm-padding-x,
    $kendo-button-md-padding-x: $kendo-button-md-padding-x,
    $kendo-button-lg-padding-x: $kendo-button-lg-padding-x,
    $kendo-button-padding-y: $kendo-button-padding-y,
    $kendo-button-sm-padding-y: $kendo-button-sm-padding-y,
    $kendo-button-md-padding-y: $kendo-button-md-padding-y,
    $kendo-button-lg-padding-y: $kendo-button-lg-padding-y,
    $kendo-button-font-family: $kendo-button-font-family,
    $kendo-button-font-size: $kendo-button-font-size,
    $kendo-button-sm-font-size: $kendo-button-sm-font-size,
    $kendo-button-md-font-size: $kendo-button-md-font-size,
    $kendo-button-lg-font-size: $kendo-button-lg-font-size,
    $kendo-button-line-height: $kendo-button-line-height,
    $kendo-button-sm-line-height: $kendo-button-sm-line-height,
    $kendo-button-md-line-height: $kendo-button-md-line-height,
    $kendo-button-lg-line-height: $kendo-button-lg-line-height,
    $kendo-button-calc-size: $kendo-button-calc-size,
    $kendo-button-sm-calc-size: $kendo-button-sm-calc-size,
    $kendo-button-md-calc-size: $kendo-button-md-calc-size,
    $kendo-button-lg-calc-size: $kendo-button-lg-calc-size,
    $kendo-button-inner-calc-size: $kendo-button-inner-calc-size,
    $kendo-button-sm-inner-calc-size: $kendo-button-sm-inner-calc-size,
    $kendo-button-md-inner-calc-size: $kendo-button-md-inner-calc-size,
    $kendo-button-lg-inner-calc-size: $kendo-button-lg-inner-calc-size,
    $kendo-button-sizes: $kendo-button-sizes,
    $kendo-button-transition: $kendo-transition,
    $kendo-button-theme-colors: $kendo-button-theme-colors,
    $kendo-button-bg: $kendo-button-bg,
    $kendo-button-text: $kendo-button-text,
    $kendo-button-border: $kendo-button-border,
    $kendo-button-gradient: $kendo-button-gradient,
    $kendo-button-shadow: $kendo-button-shadow,
    $kendo-button-hover-bg: $kendo-button-hover-bg,
    $kendo-button-hover-text: $kendo-button-hover-text,
    $kendo-button-hover-border: $kendo-button-hover-border,
    $kendo-button-hover-gradient: $kendo-button-hover-gradient,
    $kendo-button-hover-shadow: $kendo-button-hover-shadow,
    $kendo-button-active-bg: $kendo-button-active-bg,
    $kendo-button-active-text: $kendo-button-active-text,
    $kendo-button-active-border: $kendo-button-active-border,
    $kendo-button-active-gradient: $kendo-button-active-gradient,
    $kendo-button-active-shadow: $kendo-button-active-shadow,
    $kendo-button-selected-bg: $kendo-button-selected-bg,
    $kendo-button-selected-text: $kendo-button-selected-text,
    $kendo-button-selected-border: $kendo-button-selected-border,
    $kendo-button-selected-gradient: $kendo-button-selected-gradient,
    $kendo-button-selected-shadow: $kendo-button-selected-shadow,
    $kendo-button-focus-bg: $kendo-button-focus-bg,
    $kendo-button-focus-text: $kendo-button-focus-text,
    $kendo-button-focus-border: $kendo-button-focus-border,
    $kendo-button-focus-gradient: $kendo-button-focus-gradient,
    $kendo-button-focus-shadow: $kendo-button-focus-shadow,
    $kendo-button-disabled-bg: $kendo-button-disabled-bg,
    $kendo-button-disabled-text: $kendo-button-disabled-text,
    $kendo-button-disabled-border: $kendo-button-disabled-border,
    $kendo-button-disabled-gradient: $kendo-button-disabled-gradient,
    $kendo-button-disabled-shadow: $kendo-button-disabled-shadow,
    $kendo-solid-button-gradient: $kendo-solid-button-gradient,
    $kendo-solid-button-shade-function: $kendo-solid-button-shade-function,
    $kendo-solid-button-shade-text-amount: $kendo-solid-button-shade-text-amount,
    $kendo-solid-button-shade-bg-amount: $kendo-solid-button-shade-bg-amount,
    $kendo-solid-button-shade-border-amount: $kendo-solid-button-shade-border-amount,
    $kendo-solid-button-hover-shade-text-amount: $kendo-solid-button-hover-shade-text-amount,
    $kendo-solid-button-hover-shade-bg-amount: $kendo-solid-button-hover-shade-bg-amount,
    $kendo-solid-button-hover-shade-border-amount: $kendo-solid-button-hover-shade-border-amount,
    $kendo-solid-button-active-shade-text-amount: $kendo-solid-button-active-shade-text-amount,
    $kendo-solid-button-active-shade-bg-amount: $kendo-solid-button-active-shade-bg-amount,
    $kendo-solid-button-active-shade-border-amount: $kendo-solid-button-active-shade-border-amount,
    $kendo-solid-button-shadow: $kendo-solid-button-shadow,
    $kendo-solid-button-shadow-blur: $kendo-solid-button-shadow-blur,
    $kendo-solid-button-shadow-spread: $kendo-solid-button-shadow-spread,
    $kendo-solid-button-shadow-opacity: $kendo-solid-button-shadow-opacity,
    $kendo-outline-button-shadow: $kendo-outline-button-shadow,
    $kendo-outline-button-shadow-blur: $kendo-outline-button-shadow-blur,
    $kendo-outline-button-shadow-spread: $kendo-outline-button-shadow-spread,
    $kendo-outline-button-shadow-opacity: $kendo-outline-button-shadow-opacity,
    $kendo-link-button-shadow: $kendo-link-button-shadow,
    $kendo-link-button-shadow-blur: $kendo-link-button-shadow-blur,
    $kendo-link-button-shadow-spread: $kendo-link-button-shadow-spread,
    $kendo-link-button-shadow-opacity: $kendo-link-button-shadow-opacity,
    $kendo-clear-button-focus-opacity: $kendo-clear-button-focus-opacity,
    $kendo-flat-button-hover-opacity: $kendo-flat-button-hover-opacity,
    $kendo-flat-button-focus-opacity: $kendo-flat-button-focus-opacity,
    $kendo-flat-button-active-opacity: $kendo-flat-button-active-opacity,
    $kendo-flat-button-selected-opacity: $kendo-flat-button-selected-opacity,
    $kendo-flat-button-focus-ring-opacity: $kendo-flat-button-focus-ring-opacity
);