@use "../core/_index.scss" as *;

// Imageeditor
/// The vertical margin of the ImageEditor.
/// @group image-editor
$kendo-image-editor-margin-y: null !default;
/// The horizontal margin of the ImageEditor.
/// @group image-editor
$kendo-image-editor-margin-x: null !default;
/// The vertical padding of the ImageEditor.
/// @group image-editor
$kendo-image-editor-padding-y: null !default;
/// The horizontal padding of the ImageEditor.
/// @group image-editor
$kendo-image-editor-padding-x: null !default;

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

/// The width of the border around the ImageEditor content.
/// @group image-editor
$kendo-image-editor-content-border-width: 1px !default;

/// The vertical padding of the ImageEditor action pane.
/// @group image-editor
$kendo-image-editor-action-pane-padding-y: k-spacing(8) !default;
/// The horizontal padding of the ImageEditor action pane.
/// @group image-editor
$kendo-image-editor-action-pane-padding-x: k-spacing(4) !default;
/// The width of the ImageEditor action pane.
/// @group image-editor
$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == null, 320px, calc( 320px + #{$kendo-image-editor-content-border-width} ) ) !default;

/// The vertical padding of the ImageEditor pane header.
/// @group image-editor
$kendo-image-editor-pane-header-padding-y: k-spacing(4) !default;
/// The horizontal padding of the ImageEditor pane header.
/// @group image-editor
$kendo-image-editor-pane-header-padding-x: k-spacing(4) !default;
/// The gap between the title and the actions of the ImageEditor pane header.
/// @group image-editor
$kendo-image-editor-pane-header-gap: k-spacing(2) !default;

/// The top padding of the ImageEditor pane content.
/// @group image-editor
$kendo-image-editor-pane-content-padding-top: k-spacing(2) !default;
/// The bottom padding of the ImageEditor pane content.
/// @group image-editor
$kendo-image-editor-pane-content-padding-bottom: k-spacing(4) !default;
/// The horizontal padding of the ImageEditor pane content.
/// @group image-editor
$kendo-image-editor-pane-content-padding-x: k-spacing(4) !default;
/// The gap between the fields of the ImageEditor pane content.
/// @group image-editor
$kendo-image-editor-pane-content-gap: k-spacing(4) !default;

/// The gap between the slider and the numeric input of an ImageEditor adjustment row.
/// @group image-editor
$kendo-image-editor-adjustment-row-gap: k-spacing(4) !default;

/// The vertical padding of the ImageEditor pane footer.
/// @group image-editor
$kendo-image-editor-pane-footer-padding-y: k-spacing(4) !default;
/// The horizontal padding of the ImageEditor pane footer.
/// @group image-editor
$kendo-image-editor-pane-footer-padding-x: k-spacing(4) !default;

/// The gap between the ImageEditor option list items.
/// @group image-editor
$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: rgba(255, 255, 255, 0) 0%, k-color(surface-alt) 100% !default;
/// The vertical padding of an ImageEditor option preview.
/// @group image-editor
$kendo-image-editor-option-preview-padding-y: k-spacing(1) !default;
/// The horizontal padding of an ImageEditor option preview.
/// @group image-editor
$kendo-image-editor-option-preview-padding-x: k-spacing(2) !default;
/// The border radius of an ImageEditor option preview.
/// @group image-editor
$kendo-image-editor-option-preview-border-radius: k-border-radius(sm) !default;
/// The width of an ImageEditor option preview.
/// @group image-editor
$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-font-size-sm) !default;

/// The width of the border around the ImageEditor overlay frame.
/// @group image-editor
$kendo-image-editor-frame-border-width: 2px !default;
/// The style of the border around the ImageEditor overlay frame.
/// @group image-editor
$kendo-image-editor-frame-border-style: solid !default;

/// The horizontal margin of the ImageEditor handle.
/// @group image-editor
$kendo-image-editor-handle-margin-x: 0 !default;
/// The vertical margin of the ImageEditor handle.
/// @group image-editor
$kendo-image-editor-handle-margin-y: 0 !default;
/// The width of the border around the ImageEditor handle.
/// @group image-editor
$kendo-image-editor-handle-border-width: 2px !default;
/// The size of the ImageEditor handle.
/// @group image-editor
$kendo-image-editor-handle-size: 24px !default;
/// The thickness of the ImageEditor handle.
/// @group image-editor
$kendo-image-editor-handle-thickness: 12px !default;
/// The border radius of the ImageEditor handle.
/// @group image-editor
$kendo-image-editor-handle-border-radius: k-border-radius(full) !default;

/// The size of the ImageEditor scale handle.
/// @group image-editor
$kendo-image-editor-scale-handle-size: 12px !default;

/// The background color of the ImageEditor.
/// @group image-editor
$kendo-image-editor-bg: k-color(surface-alt) !default;
/// The text color of the ImageEditor.
/// @group image-editor
$kendo-image-editor-text: k-color(on-app-surface) !default;
/// The border color of the ImageEditor.
/// @group image-editor
$kendo-image-editor-border: k-color(border) !default;

/// The background color of the ImageEditor content.
/// @group image-editor
$kendo-image-editor-content-bg: k-color(surface) !default;
/// The text color of the ImageEditor content.
/// @group image-editor
$kendo-image-editor-content-text: null !default;
/// The border color of the ImageEditor content.
/// @group image-editor
$kendo-image-editor-content-border: null !default;

/// The background color of the ImageEditor action pane.
/// @group image-editor
$kendo-image-editor-action-pane-bg: k-color(surface-alt) !default;
/// The text color of the ImageEditor action pane.
/// @group image-editor
$kendo-image-editor-action-pane-text: null !default;
/// The border color of the ImageEditor action pane.
/// @group image-editor
$kendo-image-editor-action-pane-border: null !default;

/// The text color of the ImageEditor pane title.
/// @group image-editor
$kendo-image-editor-pane-title-text: k-color(on-app-surface) !default;

/// The background color of an ImageEditor option preview.
/// @group image-editor
$kendo-image-editor-option-preview-bg: null !default;
/// The text color of an ImageEditor option preview.
/// @group image-editor
$kendo-image-editor-option-preview-text: k-color(on-app-surface) !default;
/// The border color of an ImageEditor option preview.
/// @group image-editor
$kendo-image-editor-option-preview-border: k-color(border) !default;
/// The background color of a hovered ImageEditor option preview.
/// @group image-editor
$kendo-image-editor-option-preview-hover-bg: k-color(base-subtle-hover) !default;
/// The text color of a hovered ImageEditor option preview.
/// @group image-editor
$kendo-image-editor-option-preview-hover-text: null !default;
/// The box shadow of a focused ImageEditor option preview.
/// @group image-editor
$kendo-image-editor-option-preview-focus-shadow: inset 0 0 0 3px color-mix(in srgb, k-color(on-app-surface) 15%, transparent) !default;
/// The box shadow of a selected ImageEditor option preview.
/// @group image-editor
$kendo-image-editor-option-preview-selected-shadow: none !default;
/// The border color of a selected ImageEditor option preview.
/// @group image-editor
$kendo-image-editor-option-preview-selected-border: k-color(primary-emphasis) !default;
/// The text color of a selected ImageEditor option preview.
/// @group image-editor
$kendo-image-editor-option-preview-selected-text: null !default;
/// The font weight of a selected ImageEditor option preview.
/// @group image-editor
$kendo-image-editor-option-preview-selected-font-weight: var(--kendo-font-weight-bold) !default;

/// The background color of the ImageEditor overlay frame.
/// @group image-editor
$kendo-image-editor-frame-bg: null !default;
/// The text color of the ImageEditor overlay frame.
/// @group image-editor
$kendo-image-editor-frame-text: null !default;
/// The border color of the ImageEditor overlay frame.
/// @group image-editor
$kendo-image-editor-frame-border: k-color(primary) !default;

/// The background color of the ImageEditor crop overlay.
/// @group image-editor
$kendo-image-editor-crop-overlay-bg: rgba(black, .2) !default;
/// The accent-tinted overlay color of the ImageEditor crop overlay, layered above the background.
/// @group image-editor
$kendo-image-editor-crop-overlay-accent-bg: color-mix(in srgb, k-color(primary) 25%, transparent) !default;

/// The color of the ImageEditor rule-of-thirds grid lines.
/// @group image-editor
$kendo-image-editor-grid-line-color: k-color(primary) !default;

/// The background color of the ImageEditor handle.
/// @group image-editor
$kendo-image-editor-handle-bg: k-color(primary-subtle) !default;
/// The border color of the ImageEditor handle.
/// @group image-editor
$kendo-image-editor-handle-border: k-color(primary) !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
);