@use "sass:color";
@use "sass:map";
@use "../core/_index.scss" as *;

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

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

/// The vertical padding of the small Button.
/// @group button
$kendo-button-sm-padding-y: calc(var( --kendo-button-sm-padding-y, #{k-spacing(0.5)} ) + 1px) !default;
/// The vertical padding of the medium Button.
/// @group button
$kendo-button-md-padding-y: calc(var( --kendo-button-md-padding-y, #{k-spacing(1)} ) + 1px) !default;
/// The vertical padding of the large Button.
/// @group button
$kendo-button-lg-padding-y: calc(var( --kendo-button-lg-padding-y, #{k-spacing(2)} ) + 1px) !default;

/// The font size of the small Button.
/// @group button
$kendo-button-sm-font-size: var( --kendo-font-size-sm, 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-lg, inherit ) !default;

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

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

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

/// The calculated height of the Button.
/// @group button
$kendo-button-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-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-md-line-height} * 1em ) + ( #{$kendo-button-md-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 Outline width of the focused Button.
/// @group button
$kendo-button-focus-outline-width: var( --kendo-button-focus-outline-width, 2px ) !default;
/// The outline style of the focused Button.
/// @group button
$kendo-button-focus-outline-style: var( --kendo-button-focus-outline-style, solid ) !default;

/// The offset of the flat focused Button.
/// @group button
$kendo-button-flat-focus-offset: var( --kendo-button-flat-focus-offset, 1px ) !default;

/// The offset of the link focused Button.
/// @group button
$kendo-button-link-focus-offset: var( --kendo-button-link-focus-offset, 0 ) !default;

/// The opacity of the pulsing animation for the generating Button.
/// @group button
$kendo-button-pulsing-opacity: var( --kendo-button-pulsing-opacity, .6 ) !default;

/// The theme colors map for the Button.
/// @group button
$kendo-button-theme-colors: (
    "base": k-color(base),
    "primary": k-color(primary),
    "secondary": k-color(secondary),
    "tertiary": k-color(tertiary),
    "info": k-color(info),
    "success": k-color(success),
    "warning": k-color(warning),
    "error": k-color(error),
    "dark": k-color(dark),
    "light": k-color(light),
    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
) !default;

/// The base background of the Button.
/// @group button
$kendo-button-bg: var( --kendo-button-bg, k-color(base) ) !default;
/// The base text color of the Button.
/// @group button
$kendo-button-text: var( --kendo-button-text, k-color(on-base) ) !default;
/// The base border color of the Button.
/// @group button
$kendo-button-border: var( --kendo-button-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
/// The base background gradient of the Button.
/// @group button
$kendo-button-gradient: linear-gradient( var( --kendo-button-gradient, transparent, transparent ) ) !default;
/// The base shadow of the Button.
/// @group button
$kendo-button-shadow: var( --kendo-button-shadow, none ) !default;

/// The base background of the hovered Button.
/// @group button
$kendo-button-hover-bg: var( --kendo-button-hover-bg, k-color(base-hover) ) !default;
/// The base text color of the hovered Button.
/// @group button
$kendo-button-hover-text: var( --kendo-button-hover-text, k-color(on-base) ) !default;
/// The base border color of the hovered Button.
/// @group button
$kendo-button-hover-border: var( --kendo-button-hover-border, color-mix( in srgb, k-color(border) 34%, transparent ) ) !default;

/// The base border color of the focused Button.
/// @group button
$kendo-button-focus-border: var( --kendo-button-focus-border, k-color(border-alt) ) !default;
/// The base outline color of the focused Button.
/// @group button
$kendo-button-focus-outline: var( --kendo-button-focus-outline, k-color(on-base) ) !default;

/// The base background of the active Button.
/// @group button
$kendo-button-active-bg: var( --kendo-button-active-bg, k-color(base-active) ) !default;
/// The base text color of the active Button.
/// @group button
$kendo-button-active-text: var( --kendo-button-active-text, k-color(on-base) ) !default;
/// The base border color of the active Button.
/// @group button
$kendo-button-active-border: var( --kendo-button-active-border, $kendo-button-border ) !default;

/// The base background of the disabled Button.
/// @group button
$kendo-button-disabled-bg: var( --kendo-button-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 7%, transparent) ) !default;
/// The base text color of the disabled Button.
/// @group button
$kendo-button-disabled-text: var( --kendo-button-disabled-text, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
/// The base border color of the disabled Button.
/// @group button
$kendo-button-disabled-border: var( --kendo-button-disabled-border, color-mix(in srgb, k-color(on-app-surface) 14%, transparent) ) !default;

/// The base background of the disabled outline Button.
/// @group button
$kendo-button-outline-disabled-bg: var( --kendo-button-disabled-bg, initial ) !default;
/// The base text color of the disabled outline Button.
/// @group button
$kendo-button-outline-disabled-text: var( --kendo-button-disabled-text, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
/// The base border color of the disabled outline Button.
/// @group button
$kendo-button-outline-disabled-border: var( --kendo-button-disabled-border, color-mix(in srgb, k-color(on-app-surface) 14%, transparent) ) !default;

/// The base background of the disabled flat Button.
/// @group button
$kendo-button-flat-disabled-bg: var( --kendo-button-disabled-bg, initial ) !default;
/// The base text color of the disabled flat Button.
/// @group button
$kendo-button-flat-disabled-text: var( --kendo-button-disabled-text, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
/// The base border color of the disabled flat Button.
/// @group button
$kendo-button-flat-disabled-border: var( --kendo-button-disabled-border, initial ) !default;

@forward "@progress/kendo-theme-core/scss/components/button/_variables.scss" with (
    $kendo-button-border-width: $kendo-button-border-width,
    $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-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-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-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-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-font-family: $kendo-button-font-family,
    $kendo-button-font-weight: $kendo-button-font-weight,
    $kendo-button-sizes: $kendo-button-sizes,
    $kendo-button-pulsing-opacity: $kendo-button-pulsing-opacity,
    $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-active-bg: $kendo-button-active-bg,
    $kendo-button-active-text: $kendo-button-active-text,
    $kendo-button-active-border: $kendo-button-active-border,
    $kendo-button-disabled-bg: $kendo-button-disabled-bg,
    $kendo-button-disabled-text: $kendo-button-disabled-text,
    $kendo-button-disabled-border: $kendo-button-disabled-border
);