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

/// Background color of the imageeditor.
/// @group image-editor
$kendo-image-editor-bg: var( --kendo-image-editor-bg, #{k-color(surface-alt)} ) !default;
/// Text color of the imageeditor.
/// @group image-editor
$kendo-image-editor-text: var( --kendo-image-editor-text, #{k-color(on-app-surface)} ) !default;
/// Border color of the imageeditor.
/// @group image-editor
$kendo-image-editor-border: var( --kendo-image-editor-border, color-mix(in srgb, #{k-color(border)} 16%, transparent) ) !default;
/// Vertical margin of the imageeditor.
/// @group image-editor
$kendo-image-editor-margin-y: var( --kendo-image-editor-margin-y, #{k-spacing(0)} ) !default;
/// Horizontal margin of the imageeditor.
/// @group image-editor
$kendo-image-editor-margin-x: var( --kendo-image-editor-margin-x, #{k-spacing(0)} ) !default;
/// Vertical padding of the imageeditor.
/// @group image-editor
$kendo-image-editor-padding-y: var( --kendo-image-editor-padding-y, #{k-spacing(0)} ) !default;
/// Horizontal padding of the imageeditor.
/// @group image-editor
$kendo-image-editor-padding-x: var( --kendo-image-editor-padding-x, #{k-spacing(0)} ) !default;

/// Border width of the imageeditor.
/// @group image-editor
$kendo-image-editor-border-width: var( --kendo-image-editor-border-width, 1px ) !default;
/// The border radius of the ImageEditor.
/// @group image-editor
$kendo-image-editor-border-radius: var( --kendo-image-editor-border-radius, null ) !default;
/// Font size of the imageeditor.
/// @group image-editor
$kendo-image-editor-font-size: var( --kendo-image-editor-font-size, var(--kendo-font-size) ) !default;
/// Line height of the imageeditor.
/// @group image-editor
$kendo-image-editor-line-height: var( --kendo-image-editor-line-height, var(--kendo-line-height) ) !default;
/// Font family of the imageeditor.
/// @group image-editor
$kendo-image-editor-font-family: var( --kendo-image-editor-font-family, var(--kendo-font-family) ) !default;

/// Imageeditor content background color.
/// @group image-editor
$kendo-image-editor-content-bg: var( --kendo-image-editor-content-bg, #{k-color(base-subtle)} ) !default;
/// Imageeditor content text color.
/// @group image-editor
$kendo-image-editor-content-text: var( --kendo-image-editor-content-text, inherit ) !default;
/// Imageeditor content border color.
/// @group image-editor
$kendo-image-editor-content-border: var( --kendo-image-editor-content-border, inherit ) !default;
/// Imageeditor content border width.
/// @group image-editor
$kendo-image-editor-content-border-width: 0px !default;

/// Imageeditor action pane background color.
/// @group image-editor
$kendo-image-editor-action-pane-bg: var( --kendo-image-editor-action-pane-bg, #{k-color(surface-alt)} ) !default;
/// Imageeditor action pane text color.
/// @group image-editor
$kendo-image-editor-action-pane-text: var( --kendo-image-editor-action-pane-text, inherit ) !default;
/// Imageeditor action pane border.
/// @group image-editor
$kendo-image-editor-action-pane-border: var( --kendo-image-editor-action-pane-border, inherit ) !default;
/// Imageeditor action pane vertical padding.
/// @group image-editor
$kendo-image-editor-action-pane-padding-y: var( --kendo-image-editor-action-pane-padding-y, #{k-spacing(3)} ) !default;
/// Imageeditor action pane horizontal padding.
/// @group image-editor
$kendo-image-editor-action-pane-padding-x: var( --kendo-image-editor-action-pane-padding-x, #{k-spacing(3)} ) !default;
/// Imageeditor action pane width.
/// @group image-editor
$kendo-image-editor-action-pane-width: var( --kendo-image-editor-action-pane-width, calc( 320px + #{$kendo-image-editor-content-border-width}) ) !default;

/// Imageeditor pane title text color.
/// @group image-editor
$kendo-image-editor-pane-title-text: var( --kendo-image-editor-pane-title-text, inherit ) !default;

/// Imageeditor option preview background color.
/// @group image-editor
$kendo-image-editor-option-preview-bg: var( --kendo-image-editor-option-preview-bg, null ) !default;
/// Imageeditor option preview text color.
/// @group image-editor
$kendo-image-editor-option-preview-text: var( --kendo-image-editor-option-preview-text, inherit ) !default;
/// Imageeditor option preview border color.
/// @group image-editor
$kendo-image-editor-option-preview-border: var( --kendo-image-editor-option-preview-border, color-mix(in srgb, #{k-color(border)} 16%, transparent) ) !default;
/// Imageeditor option preview hover background color.
/// @group image-editor
$kendo-image-editor-option-preview-hover-bg: var( --kendo-image-editor-option-preview-hover-bg, color-mix(in srgb, #{k-color(on-app-surface)} 5%, transparent) ) !default;
/// Imageeditor option preview hover text color.
/// @group image-editor
$kendo-image-editor-option-preview-hover-text: var( --kendo-image-editor-option-preview-hover-text, null ) !default;
/// Imageeditor option preview focus box shadow.
/// @group image-editor
$kendo-image-editor-option-preview-focus-shadow: var( --kendo-image-editor-option-preview-focus-shadow, inset 0 0 0 2px #{k-color(border-alt)} ) !default;
/// Imageeditor option preview selected box shadow.
/// @group image-editor
$kendo-image-editor-option-preview-selected-shadow: var( --kendo-image-editor-option-preview-selected-shadow, inset 0 0 0 2px #{k-color(primary)}, inset 0 0 0 4px #{k-color(app-surface)} ) !default;
/// Imageeditor option preview selected border color.
/// @group image-editor
$kendo-image-editor-option-preview-selected-border: var( --kendo-image-editor-option-preview-selected-border, null ) !default;
/// Imageeditor option preview selected text color.
/// @group image-editor
$kendo-image-editor-option-preview-selected-text: var( --kendo-image-editor-option-preview-selected-text, null ) !default;
/// Imageeditor option preview selected font weight.
/// @group image-editor
$kendo-image-editor-option-preview-selected-font-weight: var( --kendo-image-editor-option-preview-selected-font-weight, var(--kendo-font-weight-semibold) ) !default;

/// Imageeditor pane header vertical padding.
/// @group image-editor
$kendo-image-editor-pane-header-padding-y: var( --kendo-image-editor-pane-header-padding-y, #{k-spacing(4)} ) !default;
/// Imageeditor pane header horizontal padding.
/// @group image-editor
$kendo-image-editor-pane-header-padding-x: var( --kendo-image-editor-pane-header-padding-x, #{k-spacing(4)} ) !default;
/// Gap between the title and the actions of the imageeditor pane header.
/// @group image-editor
$kendo-image-editor-pane-header-gap: var( --kendo-image-editor-pane-header-gap, #{k-spacing(2)} ) !default;

/// Imageeditor pane content top padding.
/// @group image-editor
$kendo-image-editor-pane-content-padding-top: var( --kendo-image-editor-pane-content-padding-top, #{k-spacing(2)} ) !default;
/// Imageeditor pane content bottom padding.
/// @group image-editor
$kendo-image-editor-pane-content-padding-bottom: var( --kendo-image-editor-pane-content-padding-bottom, #{k-spacing(4)} ) !default;
/// Imageeditor pane content horizontal padding.
/// @group image-editor
$kendo-image-editor-pane-content-padding-x: var( --kendo-image-editor-pane-content-padding-x, #{k-spacing(4)} ) !default;
/// Gap between the fields of the imageeditor pane content.
/// @group image-editor
$kendo-image-editor-pane-content-gap: var( --kendo-image-editor-pane-content-gap, #{k-spacing(4)} ) !default;

/// Gap between the slider and the numeric input of an imageeditor adjustment row.
/// @group image-editor
$kendo-image-editor-adjustment-row-gap: var( --kendo-image-editor-adjustment-row-gap, #{k-spacing(4)} ) !default;

/// Imageeditor pane footer vertical padding.
/// @group image-editor
$kendo-image-editor-pane-footer-padding-y: var( --kendo-image-editor-pane-footer-padding-y, #{k-spacing(4)} ) !default;
/// Imageeditor pane footer horizontal padding.
/// @group image-editor
$kendo-image-editor-pane-footer-padding-x: var( --kendo-image-editor-pane-footer-padding-x, #{k-spacing(4)} ) !default;

/// Gap between the imageeditor option list items.
/// @group image-editor
$kendo-image-editor-option-list-gap: var( --kendo-image-editor-option-list-gap, #{k-spacing(2)} ) !default;
/// The scroll-fade gradient stops of the ImageEditor option list.
/// @group image-editor
$kendo-image-editor-option-list-scroll-gradient: var( --kendo-image-editor-option-list-scroll-gradient, rgba(255, 255, 255, 0) 0%, #{k-color(surface-alt)} 100% ) !default;
/// Vertical padding of an imageeditor option preview.
/// @group image-editor
$kendo-image-editor-option-preview-padding-y: var( --kendo-image-editor-option-preview-padding-y, #{k-spacing(1.5)} ) !default;
/// Horizontal padding of an imageeditor option preview.
/// @group image-editor
$kendo-image-editor-option-preview-padding-x: var( --kendo-image-editor-option-preview-padding-x, #{k-spacing(1.5)} ) !default;
/// Border radius of an imageeditor option preview.
/// @group image-editor
$kendo-image-editor-option-preview-border-radius: var( --kendo-image-editor-option-preview-border-radius, #{k-border-radius(sm)} ) !default;
/// Width of an imageeditor option preview.
/// @group image-editor
$kendo-image-editor-option-preview-width: var( --kendo-image-editor-option-preview-width, 88px ) !default;

/// The font size of the ImageEditor option label.
/// @group image-editor
$kendo-image-editor-option-label-font-size: var( --kendo-imageeditor-option-label-font-size, var(--kendo-font-size-sm) ) !default;

/// Crop background color of the imageeditor.
/// @group image-editor
$kendo-image-editor-frame-bg: var( --kendo-image-editor-frame-bg, inherit ) !default;
/// Crop text color of the imageeditor.
/// @group image-editor
$kendo-image-editor-frame-text: var( --kendo-image-editor-frame-text, inherit ) !default;
/// Crop border color of the imageeditor.
/// @group image-editor
$kendo-image-editor-frame-border: var( --kendo-image-editor-frame-border, #{k-color(primary)} ) !default;
/// Crop overlay background color of the imageeditor.
/// @group image-editor
$kendo-image-editor-crop-overlay-bg: var( --kendo-image-editor-crop-overlay-bg, rgba( $kendo-color-black, .2 ) ) !default;
/// Crop overlay accent-tinted color of the imageeditor, layered above the background.
/// @group image-editor
$kendo-image-editor-crop-overlay-accent-bg: var( --kendo-image-editor-crop-overlay-accent-bg, #{color-mix(in srgb, k-color(primary) 8%, transparent)} ) !default;

/// Crop grid line color of the imageeditor.
/// @group image-editor
$kendo-image-editor-grid-line-color: var( --kendo-image-editor-grid-line-color, #{k-color(primary)} ) !default;

/// Resize handle background color of the imageeditor.
/// @group image-editor
$kendo-image-editor-handle-bg: var( --kendo-image-editor-handle-bg, #{k-color(primary-subtle)} ) !default;
/// Resize handle border color of the imageeditor.
/// @group image-editor
$kendo-image-editor-handle-border: var( --kendo-image-editor-handle-border, #{k-color(primary)} ) !default;
/// Crop border width of the imageeditor.
/// @group image-editor
$kendo-image-editor-frame-border-width: var( --kendo-image-editor-frame-border-width, 2px ) !default;
/// Crop border style of the imageeditor.
/// @group image-editor
$kendo-image-editor-frame-border-style: var( --kendo-image-editor-frame-border-style, solid ) !default;

/// Imageeditor resize handle horizontal margin.
/// @group image-editor
$kendo-image-editor-handle-margin-x: var( --kendo-image-editor-handle-margin-x, 0 ) !default;
/// Imageeditor resize handle vertical margin.
/// @group image-editor
$kendo-image-editor-handle-margin-y: var( --kendo-image-editor-handle-margin-y, 0 ) !default;
/// Imageeditor resize handle border width.
/// @group image-editor
$kendo-image-editor-handle-border-width: var( --kendo-image-editor-handle-border-width, 2px ) !default;
/// Imageeditor resize handle size.
/// @group image-editor
$kendo-image-editor-handle-size: var( --kendo-image-editor-handle-size, #{k-spacing(6)} ) !default;
/// Imageeditor resize handle thickness.
/// @group image-editor
$kendo-image-editor-handle-thickness: var( --kendo-image-editor-handle-thickness, #{k-spacing(3)} ) !default;
/// Imageeditor resize handle border radius.
/// @group image-editor
$kendo-image-editor-handle-border-radius: var( --kendo-image-editor-handle-border-radius, #{k-border-radius(full)} ) !default;
/// Imageeditor scale handle size.
/// @group image-editor
$kendo-image-editor-scale-handle-size: var( --kendo-image-editor-scale-handle-size, #{k-spacing(3)} ) !default;
/// Imageeditor resize handle top offset.
/// @group image-editor
$kendo-image-editor-resize-top-offset: var( --kendo-image-editor-resize-top-offset, calc( #{$kendo-image-editor-handle-size} / 2 ) ) !default;
/// Imageeditor resize handle left offset.
/// @group image-editor
$kendo-image-editor-resize-left-offset: var( --kendo-image-editor-resize-left-offset, calc( #{$kendo-image-editor-handle-size} / 2 ) ) !default;

@forward "@progress/kendo-theme-core/scss/components/imageeditor/_variables.scss" with (
    $kendo-image-editor-margin-y: $kendo-image-editor-margin-y,
    $kendo-image-editor-margin-x: $kendo-image-editor-margin-x,
    $kendo-image-editor-padding-y: $kendo-image-editor-padding-y,
    $kendo-image-editor-padding-x: $kendo-image-editor-padding-x,
    $kendo-image-editor-border-width: $kendo-image-editor-border-width,
    $kendo-image-editor-border-radius: $kendo-image-editor-border-radius,
    $kendo-image-editor-font-size: $kendo-image-editor-font-size,
    $kendo-image-editor-line-height: $kendo-image-editor-line-height,
    $kendo-image-editor-font-family: $kendo-image-editor-font-family,
    $kendo-image-editor-content-border-width: $kendo-image-editor-content-border-width,
    $kendo-image-editor-action-pane-padding-y: $kendo-image-editor-action-pane-padding-y,
    $kendo-image-editor-action-pane-padding-x: $kendo-image-editor-action-pane-padding-x,
    $kendo-image-editor-action-pane-width: $kendo-image-editor-action-pane-width,
    $kendo-image-editor-pane-header-padding-y: $kendo-image-editor-pane-header-padding-y,
    $kendo-image-editor-pane-header-padding-x: $kendo-image-editor-pane-header-padding-x,
    $kendo-image-editor-pane-header-gap: $kendo-image-editor-pane-header-gap,
    $kendo-image-editor-pane-content-padding-top: $kendo-image-editor-pane-content-padding-top,
    $kendo-image-editor-pane-content-padding-bottom: $kendo-image-editor-pane-content-padding-bottom,
    $kendo-image-editor-pane-content-padding-x: $kendo-image-editor-pane-content-padding-x,
    $kendo-image-editor-pane-content-gap: $kendo-image-editor-pane-content-gap,
    $kendo-image-editor-adjustment-row-gap: $kendo-image-editor-adjustment-row-gap,
    $kendo-image-editor-pane-footer-padding-y: $kendo-image-editor-pane-footer-padding-y,
    $kendo-image-editor-pane-footer-padding-x: $kendo-image-editor-pane-footer-padding-x,
    $kendo-image-editor-option-list-gap: $kendo-image-editor-option-list-gap,
    $kendo-image-editor-option-list-scroll-gradient: $kendo-image-editor-option-list-scroll-gradient,
    $kendo-image-editor-option-preview-padding-y: $kendo-image-editor-option-preview-padding-y,
    $kendo-image-editor-option-preview-padding-x: $kendo-image-editor-option-preview-padding-x,
    $kendo-image-editor-option-preview-border-radius: $kendo-image-editor-option-preview-border-radius,
    $kendo-image-editor-option-preview-width: $kendo-image-editor-option-preview-width,
    $kendo-image-editor-option-label-font-size: $kendo-image-editor-option-label-font-size,
    $kendo-image-editor-frame-border-width: $kendo-image-editor-frame-border-width,
    $kendo-image-editor-frame-border-style: $kendo-image-editor-frame-border-style,
    $kendo-image-editor-handle-margin-x: $kendo-image-editor-handle-margin-x,
    $kendo-image-editor-handle-margin-y: $kendo-image-editor-handle-margin-y,
    $kendo-image-editor-handle-border-width: $kendo-image-editor-handle-border-width,
    $kendo-image-editor-handle-size: $kendo-image-editor-handle-size,
    $kendo-image-editor-handle-thickness: $kendo-image-editor-handle-thickness,
    $kendo-image-editor-handle-border-radius: $kendo-image-editor-handle-border-radius,
    $kendo-image-editor-scale-handle-size: $kendo-image-editor-scale-handle-size,
    $kendo-image-editor-bg: $kendo-image-editor-bg,
    $kendo-image-editor-text: $kendo-image-editor-text,
    $kendo-image-editor-border: $kendo-image-editor-border,
    $kendo-image-editor-content-bg: $kendo-image-editor-content-bg,
    $kendo-image-editor-content-text: $kendo-image-editor-content-text,
    $kendo-image-editor-content-border: $kendo-image-editor-content-border,
    $kendo-image-editor-action-pane-bg: $kendo-image-editor-action-pane-bg,
    $kendo-image-editor-action-pane-text: $kendo-image-editor-action-pane-text,
    $kendo-image-editor-action-pane-border: $kendo-image-editor-action-pane-border,
    $kendo-image-editor-pane-title-text: $kendo-image-editor-pane-title-text,
    $kendo-image-editor-option-preview-bg: $kendo-image-editor-option-preview-bg,
    $kendo-image-editor-option-preview-text: $kendo-image-editor-option-preview-text,
    $kendo-image-editor-option-preview-border: $kendo-image-editor-option-preview-border,
    $kendo-image-editor-option-preview-hover-bg: $kendo-image-editor-option-preview-hover-bg,
    $kendo-image-editor-option-preview-hover-text: $kendo-image-editor-option-preview-hover-text,
    $kendo-image-editor-option-preview-focus-shadow: $kendo-image-editor-option-preview-focus-shadow,
    $kendo-image-editor-option-preview-selected-shadow: $kendo-image-editor-option-preview-selected-shadow,
    $kendo-image-editor-option-preview-selected-border: $kendo-image-editor-option-preview-selected-border,
    $kendo-image-editor-option-preview-selected-text: $kendo-image-editor-option-preview-selected-text,
    $kendo-image-editor-option-preview-selected-font-weight: $kendo-image-editor-option-preview-selected-font-weight,
    $kendo-image-editor-frame-bg: $kendo-image-editor-frame-bg,
    $kendo-image-editor-frame-text: $kendo-image-editor-frame-text,
    $kendo-image-editor-frame-border: $kendo-image-editor-frame-border,
    $kendo-image-editor-crop-overlay-bg: $kendo-image-editor-crop-overlay-bg,
    $kendo-image-editor-crop-overlay-accent-bg: $kendo-image-editor-crop-overlay-accent-bg,
    $kendo-image-editor-grid-line-color: $kendo-image-editor-grid-line-color,
    $kendo-image-editor-handle-bg: $kendo-image-editor-handle-bg,
    $kendo-image-editor-handle-border: $kendo-image-editor-handle-border
);