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

// ImageEditor
$kendo-image-editor-margin-y: null !default;
$kendo-image-editor-margin-x: null !default;
$kendo-image-editor-padding-y: null !default;
$kendo-image-editor-padding-x: null !default;

$kendo-image-editor-border-width: 1px !default;
$kendo-image-editor-border-radius: null !default;
$kendo-image-editor-font-size: var(--kendo-font-size) !default;
$kendo-image-editor-line-height: var(--kendo-line-height) !default;
$kendo-image-editor-font-family: var(--kendo-font-family) !default;

$kendo-image-editor-content-border-width: 1px !default;

$kendo-image-editor-action-pane-padding-y: k-spacing(8) !default;
$kendo-image-editor-action-pane-padding-x: k-spacing(4) !default;
$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == null, 320px, calc(320px + #{$kendo-image-editor-content-border-width}) ) !default;

$kendo-image-editor-pane-header-padding-y: k-spacing(4) !default;
$kendo-image-editor-pane-header-padding-x: k-spacing(4) !default;
$kendo-image-editor-pane-header-gap: k-spacing(2) !default;

$kendo-image-editor-pane-content-padding-top: k-spacing(2) !default;
$kendo-image-editor-pane-content-padding-bottom: k-spacing(4) !default;
$kendo-image-editor-pane-content-padding-x: k-spacing(4) !default;
$kendo-image-editor-pane-content-gap: k-spacing(4) !default;

$kendo-image-editor-adjustment-row-gap: k-spacing(4) !default;

$kendo-image-editor-pane-footer-padding-y: k-spacing(4) !default;
$kendo-image-editor-pane-footer-padding-x: k-spacing(4) !default;

$kendo-image-editor-option-list-gap: k-spacing(2) !default;
$kendo-image-editor-option-list-scroll-gradient: rgba(255, 255, 255, 0) 0%, k-color(surface) 100% !default;
$kendo-image-editor-option-preview-padding-y: k-spacing(1) !default;
$kendo-image-editor-option-preview-padding-x: k-spacing(2) !default;
$kendo-image-editor-option-preview-border-radius: k-border-radius(md) !default;
$kendo-image-editor-option-preview-width: 88px !default;

$kendo-image-editor-option-label-font-size: var(--kendo-font-size-sm) !default;

$kendo-image-editor-frame-border-width: 2px !default;
$kendo-image-editor-frame-border-style: solid !default;

$kendo-image-editor-handle-margin-x: 0 !default;
$kendo-image-editor-handle-margin-y: 0 !default;
$kendo-image-editor-handle-border-width: 2px !default;
$kendo-image-editor-handle-size: 24px !default;
$kendo-image-editor-handle-thickness: 12px !default;
$kendo-image-editor-handle-border-radius: k-border-radius(full) !default;

$kendo-image-editor-scale-handle-size: 12px !default;
$kendo-image-editor-rotate-handle-offset: 24px !default;
$kendo-image-editor-rotate-handle-padding: k-spacing(0.5) !default;

$kendo-image-editor-bg: k-color(surface-alt) !default;
$kendo-image-editor-text: k-color(on-app-surface) !default;
$kendo-image-editor-border: k-color(border) !default;

$kendo-image-editor-content-bg: k-color(surface) !default;
$kendo-image-editor-content-text: null !default;
$kendo-image-editor-content-border: null !default;

$kendo-image-editor-action-pane-bg: k-color(surface) !default;
$kendo-image-editor-action-pane-text: null !default;
$kendo-image-editor-action-pane-border: null !default;

$kendo-image-editor-pane-title-text: k-color(on-app-surface) !default;

$kendo-image-editor-option-preview-bg: null !default;
$kendo-image-editor-option-preview-text: k-color(on-app-surface) !default;
$kendo-image-editor-option-preview-border: k-color(border) !default;
$kendo-image-editor-option-preview-hover-bg: color-mix(in srgb, k-color(on-app-surface) 6%, transparent) !default;
$kendo-image-editor-option-preview-hover-text: null !default;
$kendo-image-editor-option-preview-focus-shadow: inset 0 0 0 2px k-color(border-alt) !default;
$kendo-image-editor-option-preview-selected-shadow: none !default;
$kendo-image-editor-option-preview-selected-border: k-color(primary-emphasis) !default;
$kendo-image-editor-option-preview-selected-text: null !default;
$kendo-image-editor-option-preview-selected-font-weight: var(--kendo-font-weight-bold) !default;

$kendo-image-editor-frame-bg: null !default;
$kendo-image-editor-frame-text: null !default;
$kendo-image-editor-frame-border: k-color(primary) !default;

$kendo-image-editor-crop-overlay-bg: rgba(black, .2) !default;
$kendo-image-editor-crop-overlay-accent-bg: color-mix(in srgb, k-color(primary) 25%, transparent) !default;

$kendo-image-editor-grid-line-color: k-color(primary) !default;

$kendo-image-editor-handle-bg: k-color(primary-subtle) !default;
$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-rotate-handle-offset: $kendo-image-editor-rotate-handle-offset,
    $kendo-image-editor-rotate-handle-padding: $kendo-image-editor-rotate-handle-padding,
    $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
);