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

/// The spacer of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-spacer: k-spacing(4) !default;

/// The width of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-width: 260px !default;
/// The width of the border around the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-border-width: 2px !default;
/// The border radius of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-border-radius: k-border-radius(md) !default;
/// The vertical padding of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-padding-y: $kendo-color-gradient-spacer !default;
/// The horizontal padding of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-padding-x: calc( #{$kendo-color-gradient-spacer} / 2 ) !default;
/// The spacing between the sections of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-spacing: $kendo-color-gradient-spacer !default;
/// The font family of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-font-family: var( --kendo-font-family, inherit ) !default;
/// The font size of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-font-size: var( --kendo-font-size, inherit ) !default;
/// The line height of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-line-height: var( --kendo-line-height, normal ) !default;

/// The text color of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-text: var( --kendo-component-text, initial ) !default;
/// The background color of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-bg: var( --kendo-component-bg, initial ) !default;
/// The border color of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-border: var( --kendo-component-border, initial ) !default;
/// The box shadow of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-shadow: var( --kendo-box-shadow-depth-2, none ) !default;

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

/// The width of the small ColorGradient.
/// @group color-gradient
$kendo-color-gradient-sm-width: 236px !default;
/// The width of the medium ColorGradient.
/// @group color-gradient
$kendo-color-gradient-md-width: $kendo-color-gradient-width !default;
/// The width of the large ColorGradient.
/// @group color-gradient
$kendo-color-gradient-lg-width: 362px !default;

/// The spacing between the sections of the small ColorGradient.
/// @group color-gradient
$kendo-color-gradient-sm-spacing: $kendo-color-gradient-spacing !default;
/// The spacing between the sections of the medium ColorGradient.
/// @group color-gradient
$kendo-color-gradient-md-spacing: $kendo-color-gradient-spacing !default;
/// The spacing between the sections of the large ColorGradient.
/// @group color-gradient
$kendo-color-gradient-lg-spacing: k-spacing(4.5) !default;

/// The border color of the focused ColorGradient.
/// @group color-gradient
$kendo-color-gradient-focus-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 )) !default;
/// The box shadow of the focused ColorGradient.
/// @group color-gradient
$kendo-color-gradient-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;

/// The width of the border around the ColorGradient canvas.
/// @group color-gradient
$kendo-color-gradient-canvas-border-width: 0 !default;
/// The border radius of the ColorGradient canvas.
/// @group color-gradient
$kendo-color-gradient-canvas-border-radius: k-border-radius(md) !default;
/// The spacing between the items of the ColorGradient canvas.
/// @group color-gradient
$kendo-color-gradient-canvas-spacing: k-spacing(2) !default;
/// The height the ColorGradient canvas hsv rectangle.
/// @group color-gradient
$kendo-color-gradient-canvas-rectangle-height: 180px !default;
/// The height the small ColorGradient canvas hsv rectangle.
/// @group color-gradient
$kendo-color-gradient-sm-canvas-rectangle-height: 164px !default;
/// The height the medium ColorGradient canvas hsv rectangle.
/// @group color-gradient
$kendo-color-gradient-md-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height !default;
/// The height the large ColorGradient canvas hsv rectangle.
/// @group color-gradient
$kendo-color-gradient-lg-canvas-rectangle-height: 256px !default;

/// The spacing between the items of the small ColorGradient canvas.
/// @group color-gradient
$kendo-color-gradient-sm-canvas-spacing: $kendo-color-gradient-canvas-spacing !default;
/// The spacing between the items of the medium ColorGradient canvas.
/// @group color-gradient
$kendo-color-gradient-md-canvas-spacing: $kendo-color-gradient-canvas-spacing !default;
/// The spacing between the items of the large ColorGradient canvas.
/// @group color-gradient
$kendo-color-gradient-lg-canvas-spacing: k-spacing(4) !default;

/// The border color of the ColorGradient canvas hsv rectangle.
/// @group color-gradient
$kendo-color-gradient-canvas-rectangle-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
/// The box shadow of the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-canvas-draghandle-shadow: var( --kendo-box-shadow-depth-2, none ) !default;

/// The width of the ColorGradient slider.
/// @group color-gradient
$kendo-color-gradient-slider-track-size: 20px !default;
/// The border radius of the ColorGradient slider.
/// @group color-gradient
$kendo-color-gradient-slider-border-radius: k-border-radius(md) !default;
/// The width of the border around the ColorGradient slider.
/// @group color-gradient
$kendo-color-gradient-slider-border-width: if($kendo-enable-color-system, 0, 1px) !default;
/// The color of the border around the ColorGradient slider.
/// @group color-gradient
$kendo-color-gradient-slider-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;

/// The height of the ColorGradient vertical slider.
/// @group color-gradient
$kendo-color-gradient-slider-vertical-size: 180px !default;
/// The width of the ColorGradient horizontal slider.
/// @group color-gradient
$kendo-color-gradient-slider-horizontal-size: 100% !default;
/// The background image of the ColorGradient alpha slider.
/// @group color-gradient
$kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
/// The height of the small ColorGradient vertical slider.
/// @group color-gradient
$kendo-color-gradient-sm-slider-vertical-size: 164px !default;
/// The height of the medium ColorGradient vertical slider.
/// @group color-gradient
$kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-slider-vertical-size !default;
/// The height of the large ColorGradient vertical slider.
/// @group color-gradient
$kendo-color-gradient-lg-slider-vertical-size: 256px !default;

/// The width of the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-width: 20px !default;
/// The height of the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-height: 20px !default;
/// The width of the border around the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-border-width: 2px !default;
/// The width of the outline around the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-outline-width: 1px !default;
/// The color of the border around the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-border: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
/// The box shadow of the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
/// The color of the border around the focused ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-focus-border: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
/// The focus color of the outline around the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-focus-shadow: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
/// The hover color of the outline around the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-draghandle-hover-shadow: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;

/// The vertical offset of the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-canvas-draghandle-offset-y: ( -1 * math.div( $kendo-color-gradient-draghandle-height, 2 ) ) !default;
/// The horizontal offset of the ColorGradient canvas drag handle.
/// @group color-gradient
$kendo-color-gradient-canvas-draghandle-offset-x: ( -1 * math.div( $kendo-color-gradient-draghandle-width, 2 ) ) !default;

/// The width of the ColorGradient input.
/// @group color-gradient
$kendo-color-gradient-input-width: 48px !default;
/// The spacing between the ColorGradient inputs.
/// @group color-gradient
$kendo-color-gradient-input-spacing: calc( #{$kendo-color-gradient-spacer} / 4 ) !default;
/// The font size of the ColorGradient input labels.
/// @group color-gradient
$kendo-color-gradient-input-label-font-size: var( --kendo-font-size-sm, inherit ) !default;
/// The spacing between the ColorGradient inputs and their labels.
/// @group color-gradient
$kendo-color-gradient-input-label-spacing: calc( #{$kendo-color-gradient-spacer} / 4 ) !default;
/// The text color of the ColorGradient input labels.
/// @group color-gradient
$kendo-color-gradient-input-label-text: var( --kendo-subtle-text, inherit ) !default;

/// The width of the small ColorGradient input.
/// @group color-gradient
$kendo-color-gradient-sm-input-width: 43px !default;
/// The width of the medium ColorGradient input.
/// @group color-gradient
$kendo-color-gradient-md-input-width: $kendo-color-gradient-input-width !default;
/// The width of the large ColorGradient input.
/// @group color-gradient
$kendo-color-gradient-lg-input-width: 68px !default;

/// The font weight of the ColorGradient contrast ratio text.
/// @group color-gradient
$kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold, normal ) !default;
/// The spacing between the items in the ColorGradient contrast tool.
/// @group color-gradient
$kendo-color-gradient-contrast-spacing: calc( #{$kendo-color-gradient-spacer} / 1.5 ) !default;

/// The size map of the ColorGradient.
/// @group color-gradient
$kendo-color-gradient-sizes: (
    sm: (
        width: $kendo-color-gradient-sm-width,
        vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,
        rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
        input-width: $kendo-color-gradient-sm-input-width,
        spacing: $kendo-color-gradient-sm-spacing,
        canvas-spacing: $kendo-color-gradient-sm-canvas-spacing,
        padding-x: $kendo-color-gradient-sm-padding-x,
        padding-y: $kendo-color-gradient-sm-padding-y
    ),
    md: (
        width: $kendo-color-gradient-md-width,
        vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,
        rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
        input-width: $kendo-color-gradient-md-input-width,
        spacing: $kendo-color-gradient-md-spacing,
        canvas-spacing: $kendo-color-gradient-md-canvas-spacing,
        padding-x: $kendo-color-gradient-md-padding-x,
        padding-y: $kendo-color-gradient-md-padding-y
    ),
    lg: (
        width: $kendo-color-gradient-lg-width,
        vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,
        rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
        input-width: $kendo-color-gradient-lg-input-width,
        spacing: $kendo-color-gradient-lg-spacing,
        canvas-spacing: $kendo-color-gradient-lg-canvas-spacing,
        padding-x: $kendo-color-gradient-lg-padding-x,
        padding-y: $kendo-color-gradient-lg-padding-y
    )
) !default;