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

/// The font family of the ColorPalette.
/// @group color-palette
$kendo-color-palette-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the ColorPalette.
/// @group color-palette
$kendo-color-palette-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the ColorPalette.
/// @group color-palette
$kendo-color-palette-line-height: 0 !default;

/// The outline width of the ColorPalette tile.
/// @group color-palette
$kendo-color-palette-tile-outline-width: 1px !default;
/// The outline style of the ColorPalette tile.
/// @group color-palette
$kendo-color-palette-tile-outline-style: solid !default;
/// The outline color of the ColorPalette tile.
/// @group color-palette
$kendo-color-palette-tile-outline: transparent !default;
/// The width of the ColorPalette tile.
/// @group color-palette
$kendo-color-palette-tile-width: k-spacing(6) !default;
/// The height of the ColorPalette tile.
/// @group color-palette
$kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
/// The width of the small ColorPalette tile.
/// @group color-palette
$kendo-color-palette-sm-tile-width: k-spacing(5.5) !default;
/// The height of the small ColorPalette tile.
/// @group color-palette
$kendo-color-palette-sm-tile-height: $kendo-color-palette-sm-tile-width !default;
/// The width of the medium ColorPalette tile.
/// @group color-palette
$kendo-color-palette-md-tile-width: $kendo-color-palette-tile-width !default;
/// The height of the medium ColorPalette tile.
/// @group color-palette
$kendo-color-palette-md-tile-height: $kendo-color-palette-tile-height !default;
/// The width of the large ColorPalette tile.
/// @group color-palette
$kendo-color-palette-lg-tile-width: k-spacing(8) !default;
/// The height of the large ColorPalette tile.
/// @group color-palette
$kendo-color-palette-lg-tile-height: $kendo-color-palette-lg-tile-width !default;

/// The outline color of the ColorPalette focused tile.
/// @group color-palette
$kendo-color-palette-tile-focus-outline: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
/// The shadow of the ColorPalette focused tile.
/// @group color-palette
$kendo-color-palette-tile-focus-shadow: inset 0 0 0 2px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
/// The outline color of the ColorPalette hovered tile.
/// @group color-palette
$kendo-color-palette-tile-hover-outline: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 )) !default;
/// The shadow of the ColorPalette hovered tile.
/// @group color-palette
$kendo-color-palette-tile-hover-shadow: inset 0 0 0 2px $kendo-color-palette-tile-hover-outline, inset 0 0 0 4px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
/// The outline color of the ColorPalette selected tile.
/// @group color-palette
$kendo-color-palette-tile-selected-outline: $kendo-color-palette-tile-hover-outline !default;
/// The shadow of the ColorPalette selected tile.
/// @group color-palette
$kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-hover-shadow !default;
/// The outline color of the ColorPalette selected hover tile.
/// @group color-palette
$kendo-color-palette-tile-selected-hover-outline: $kendo-color-palette-tile-focus-outline !default;

/// The size map of the ColorPalette.
/// @group color-palette
$kendo-color-palette-sizes: (
    sm: (
        width: $kendo-color-palette-sm-tile-width,
        height: $kendo-color-palette-sm-tile-height
    ),
    md: (
        width: $kendo-color-palette-md-tile-width,
        height: $kendo-color-palette-md-tile-height
    ),
    lg: (
        width: $kendo-color-palette-lg-tile-width,
        height: $kendo-color-palette-lg-tile-height
    )
) !default;