@use "sass:map";
@use "sass:math";
@use "../core/_index.scss" as *;
@use "../button/_variables.scss" as *;

/// The default theme color of the FAB.
/// @group floating-action-button
/// @role default
$kendo-fab-default-theme-color: "primary" !default;
/// The default fill mode of the FAB.
/// @group floating-action-button
/// @role default
$kendo-fab-default-fill-mode: "solid" !default;
/// The default roundness of the FAB.
/// @group floating-action-button
/// @role default
$kendo-fab-default-roundness: "full" !default;
/// The default size of the FAB.
/// @group floating-action-button
/// @role default
$kendo-fab-default-size: "md" !default;

/// The width of the border around the FAB.
/// @group floating-action-button
$kendo-fab-border-width: var( --kendo-fab-border-width, 1px ) !default;
/// The font family of the FAB.
/// @group floating-action-button
$kendo-fab-font-family: var( --kendo-fab-font-family, var( --kendo-font-family, inherit ) ) !default;
/// The font size of the FAB.
/// @group floating-action-button
$kendo-fab-font-size: var( --kendo-fab-font-size, var( --kendo-font-size, inherit ) ) !default;
/// The line height of the FAB.
/// @group floating-action-button
$kendo-fab-line-height: var( --kendo-fab-line-height, var( --kendo-line-height, normal ) ) !default;

/// The horizontal padding of the small FAB.
/// @group floating-action-button
$kendo-fab-sm-padding-x: var( --kendo-fab-sm-padding-x, k-spacing(1.5) ) !default;
/// The horizontal padding of the medium FAB.
/// @group floating-action-button
$kendo-fab-md-padding-x: var( --kendo-fab-md-padding-x, k-spacing(4) ) !default;
/// The horizontal padding of the large FAB.
/// @group floating-action-button
$kendo-fab-lg-padding-x: var( --kendo-fab-lg-padding-x, k-spacing(6) ) !default;

/// The vertical padding of the small FAB.
/// @group floating-action-button
$kendo-fab-sm-padding-y: var( --kendo-fab-sm-padding-y, k-spacing(1.5) ) !default;
/// The vertical padding of the medium FAB.
/// @group floating-action-button
$kendo-fab-md-padding-y: var( --kendo-fab-md-padding-y, k-spacing(4) ) !default;
/// The vertical padding of the large FAB.
/// @group floating-action-button
$kendo-fab-lg-padding-y: var( --kendo-fab-lg-padding-y, k-spacing(6) ) !default;

/// The offset of the focused FAB.
/// @group floating-action-button
$kendo-fab-focus-offset: var( --kendo-fab-focus-offset, 2px ) !default;
/// The outline width of the focused FAB.
/// @group floating-action-button
$kendo-fab-focus-outline-width: var( --kendo-fab-focus-outline-width, 2px ) !default;
/// The outline style of the focused FAB.
/// @group floating-action-button
$kendo-fab-focus-outline-style: var( --kendo-fab-focus-outline-style, #{$kendo-button-focus-outline-style} ) !default;

/// The horizontal padding of the FAB icon.
/// @group floating-action-button
$kendo-fab-icon-padding-x: var( --kendo-fab-icon-padding-x, k-spacing(0.5) ) !default;
/// The vertical padding of the FAB icon.
/// @group floating-action-button
$kendo-fab-icon-padding-y: var( --kendo-fab-icon-padding-y, $kendo-fab-icon-padding-x ) !default;
/// The spacing of the FAB icon.
/// @group floating-action-button
$kendo-fab-icon-spacing: var( --kendo-fab-icon-spacing, k-spacing(0.5) ) !default;

/// The horizontal padding of the FAB items.
/// @group floating-action-button
$kendo-fab-items-padding-x: var( --kendo-fab-items-padding-x, k-spacing(0) ) !default;
/// The vertical padding of the FAB items.
/// @group floating-action-button
$kendo-fab-items-padding-y: var( --kendo-fab-items-padding-y, k-spacing(4) ) !default;

/// The horizontal padding of the FAB item text.
/// @group floating-action-button
$kendo-fab-item-text-padding-x: var( --kendo-fab-item-text-padding-x, k-spacing(1.5) ) !default;
/// The vertical padding of the FAB item text.
/// @group floating-action-button
$kendo-fab-item-text-padding-y: var( --kendo-fab-item-text-padding-y, k-spacing(1) ) !default;
/// The width of the FAB item text border.
/// @group floating-action-button
$kendo-fab-item-text-border-width: var( --kendo-fab-item-text-border-width, 1px ) !default;
/// The border style of the FAB item text.
/// @group floating-action-button
$kendo-fab-item-text-border-style: var( --kendo-fab-item-text-border-style, solid ) !default;
/// The border radius of the FAB item text.
/// @group floating-action-button
$kendo-fab-item-text-border-radius: var( --kendo-fab-item-text-border-radius, #{k-border-radius(md)} ) !default;
/// The font size of the FAB item text.
/// @group floating-action-button
$kendo-fab-item-text-font-size: var( --kendo-fab-item-text-font-size, var( --kendo-font-size-xs, inherit ) ) !default;
/// The line height of the FAB item text.
/// @group floating-action-button
$kendo-fab-item-text-line-height: var( --kendo-fab-item-text-line-height, var( --kendo-line-height-xs, inherit ) ) !default;

/// The outline color of the focused FAB item.
/// @group floating-action-button
$kendo-fab-item-focus-outline: var( --kendo-fab-item-focus-outline, #{$kendo-button-focus-outline} ) !default;

/// The horizontal padding of the FAB item icon.
/// @group floating-action-button
$kendo-fab-item-icon-padding-x: var( --kendo-fab-item-icon-padding-x, k-spacing(2) ) !default;
/// The vertical padding of the FAB item icon.
/// @group floating-action-button
$kendo-fab-item-icon-padding-y: var( --kendo-fab-item-icon-padding-y, $kendo-fab-item-icon-padding-x ) !default;
/// The border width of the FAB item icon.
/// @group floating-action-button
$kendo-fab-item-icon-border-width: var( --kendo-fab-item-icon-border-width, 1px ) !default;
/// The border style of the FAB item icon.
/// @group floating-action-button
$kendo-fab-item-icon-border-style: var( --kendo-fab-item-icon-border-style, solid ) !default;
/// The border radius of the FAB item icon.
/// @group floating-action-button
$kendo-fab-item-icon-border-radius: var( --kendo-fab-item-icon-border-radius, 50% ) !default;

/// The size map for the FAB.
/// @group floating-action-button
$kendo-fab-sizes: (
    sm: (
        padding-x: $kendo-fab-sm-padding-x,
        padding-y: $kendo-fab-sm-padding-y,
        gap: k-spacing(1)
    ),
    md: (
        padding-x: $kendo-fab-md-padding-x,
        padding-y: $kendo-fab-md-padding-y,
        gap: k-spacing(1.5)
    ),
    lg: (
        padding-x: $kendo-fab-lg-padding-x,
        padding-y: $kendo-fab-lg-padding-y,
        gap: k-spacing(1.5)
    )
) !default;

/// The base shadow of the FAB.
/// @group floating-action-button
$kendo-fab-shadow: k-elevation(4) !default;

/// The base text color of the FAB item.
/// @group floating-action-button
$kendo-fab-item-text: var( --kendo-fab-item-text, k-color(on-base) ) !default;
/// The base background color of the FAB item.
/// @group floating-action-button
$kendo-fab-item-bg: var( --kendo-fab-item-bg, k-color(base) ) !default;
/// The base border color of the FAB item.
/// @group floating-action-button
$kendo-fab-item-border: var( --kendo-fab-item-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
/// The text color of the hovered FAB item.
/// @group floating-action-button
$kendo-fab-item-hover-text: var( --kendo-fab-item-hover-text, k-color(on-base) ) !default;
/// The background color of the hovered FAB item.
/// @group floating-action-button
$kendo-fab-item-hover-bg: var( --kendo-fab-item-hover-bg, k-color(base-hover) ) !default;
/// The border color of the hovered FAB item.
/// @group floating-action-button
$kendo-fab-item-hover-border: var( --kendo-fab-item-hover-border, color-mix( in srgb, k-color(border) 34%, transparent ) ) !default;
/// The text color of the focused FAB item.
/// @group floating-action-button
$kendo-fab-item-focus-text: var( --kendo-fab-item-focus-text, k-color(on-base) ) !default;
/// The background color of the focused FAB item.
/// @group floating-action-button
$kendo-fab-item-focus-bg: var( --kendo-fab-item-focus-bg, k-color(base) ) !default;
/// The border color of the focused FAB item.
/// @group floating-action-button
$kendo-fab-item-focus-border: var( --kendo-fab-item-focus-border, $kendo-fab-item-border ) !default;
/// The text color of the active FAB item.
/// @group floating-action-button
$kendo-fab-item-active-text: var( --kendo-fab-item-active-text, k-color(on-base) ) !default;
/// The background color of the active FAB item.
/// @group floating-action-button
$kendo-fab-item-active-bg: var( --kendo-fab-item-active-bg, k-color(base-active) ) !default;
/// The border color of the active FAB item.
/// @group floating-action-button
$kendo-fab-item-active-border: var( --kendo-fab-item-active-border, $kendo-fab-item-border ) !default;

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

/// Тhe opacity of the generating FAB.
/// @group floating-action-button
$kendo-fab-generating-opacity: var( --kendo-fab-generating-opacity, 60% ) !default;

@forward "@progress/kendo-theme-core/scss/components/fab/_variables.scss" with (
    $kendo-fab-default-theme-color: $kendo-fab-default-theme-color,
    $kendo-fab-default-fill-mode: $kendo-fab-default-fill-mode,
    $kendo-fab-default-roundness: $kendo-fab-default-roundness,
    $kendo-fab-default-size: $kendo-fab-default-size,
    $kendo-fab-border-width: $kendo-fab-border-width,
    $kendo-fab-font-family: $kendo-fab-font-family,
    $kendo-fab-font-size: $kendo-fab-font-size,
    $kendo-fab-line-height: $kendo-fab-line-height,
    $kendo-fab-sm-padding-x: $kendo-fab-sm-padding-x,
    $kendo-fab-md-padding-x: $kendo-fab-md-padding-x,
    $kendo-fab-lg-padding-x: $kendo-fab-lg-padding-x,
    $kendo-fab-sm-padding-y: $kendo-fab-sm-padding-y,
    $kendo-fab-md-padding-y: $kendo-fab-md-padding-y,
    $kendo-fab-lg-padding-y: $kendo-fab-lg-padding-y,
    $kendo-fab-icon-padding-x: $kendo-fab-icon-padding-x,
    $kendo-fab-icon-padding-y: $kendo-fab-icon-padding-y,
    $kendo-fab-icon-spacing: $kendo-fab-icon-spacing,
    $kendo-fab-items-padding-x: $kendo-fab-items-padding-x,
    $kendo-fab-items-padding-y: $kendo-fab-items-padding-y,
    $kendo-fab-shadow: $kendo-fab-shadow,
    $kendo-fab-item-text-padding-x: $kendo-fab-item-text-padding-x,
    $kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-y,
    $kendo-fab-item-text-border-width: $kendo-fab-item-text-border-width,
    $kendo-fab-item-text-border-radius: $kendo-fab-item-text-border-radius,
    $kendo-fab-item-text-font-size: $kendo-fab-item-text-font-size,
    $kendo-fab-item-text-line-height: $kendo-fab-item-text-line-height,
    $kendo-fab-item-icon-padding-x: $kendo-fab-item-icon-padding-x,
    $kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-y,
    $kendo-fab-item-icon-border-width: $kendo-fab-item-icon-border-width,
    $kendo-fab-item-icon-border-radius: $kendo-fab-item-icon-border-radius,
    $kendo-fab-sizes: $kendo-fab-sizes,
    $kendo-fab-item-text: $kendo-fab-item-text,
    $kendo-fab-item-bg: $kendo-fab-item-bg,
    $kendo-fab-item-border: $kendo-fab-item-border,
    $kendo-fab-generating-opacity: $kendo-fab-generating-opacity
);