@use "sass:color";
@use "../sizes" as *;
@use "../colors" as *;

// adduse

/**
* $name 10. Text color
* $type color
*/
$texteditor-color: null !default;

/**
* $name 20. Placeholder text color
* $type color
*/
$texteditor-placeholder-color: null !default;

/**
* $name 30. Outlined background color
* $type color
*/
$texteditor-outlined-bg: $base-element-bg !default;

/**
* $name 31. Outlined hovered background color
* $type color
*/
$texteditor-outlined-bg-hover: $texteditor-outlined-bg !default;

/**
* $name 32. Outlined focused background color
* $type color
*/
$texteditor-outlined-bg-focused: $texteditor-outlined-bg !default;

/**
* $name 40. Filled background color
* $type color
*/
$texteditor-filled-bg: null !default;

/**
* $name 50. Underlined background color
* $type color
*/
$texteditor-underlined-bg: transparent !default;

/**
* $name 51. Underlined hovered background color
* $type color
*/
$texteditor-underlined-bg-hover: $texteditor-underlined-bg !default;

/**
* $name 52. Underlined focused background color
* $type color
*/
$texteditor-underlined-bg-focused: $texteditor-underlined-bg !default;

/**
* $name 60. Border color
* $type color
*/
$texteditor-border-color: $base-border-color !default;
$texteditor-border-color-hover: $base-border-color-hover !default;
$texteditor-border-color-focused: $base-border-color-focused !default;

/**
* $name 70. Bottom border color
* $type color
*/
$texteditor-border-bottom-color: $base-border-color-accessible !default;
$texteditor-border-bottom-color-hover: null !default;
$texteditor-border-bottom-color-focused: null !default;

/**
* $name 80. Focused state indicator color
* $type color
*/
$texteditor-indicator-border-color: $base-accent !default;

$texteditor-button-clear-icon-color: $base-icon-color !default;
$texteditor-invalid-focused-border-color: $base-invalid-color-hover !default;
$texteditor-invalid-faded-border-color: $base-invalid-color !default;
$texteditor-border-color-disabled: $base-border-color-disabled !default;
$texteditor-disabled-text-color: $base-foreground-disabled !default;
$texteditor-input-border-radius: $base-border-radius !default;
$texteditor-label-transition:
  font-size 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms,
  transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms,
  top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms;

@if $mode == "light" {
  @if $color == "blue" {
    $texteditor-color: $base-text-color !default;
    $texteditor-placeholder-color: color.adjust($base-text-color, $lightness: 29.80%, $space: hsl) !default;
    $texteditor-outlined-bg: $base-element-bg !default;
    $texteditor-filled-bg: color.adjust($base-element-bg, $lightness: -3.9%, $space: hsl) !default;
  }

  @if $color == "saas" {
    $texteditor-color: rgba(66, 81, 118, 1) !default;
    $texteditor-placeholder-color: rgba(144, 158, 192, 1) !default;
    $texteditor-outlined-bg: $base-element-bg !default;
    $texteditor-filled-bg: rgba(243, 245, 248, 1) !default;
  }

  $texteditor-border-color-hover: color.adjust($texteditor-border-color, $lightness: -9.8%, $space: hsl) !default;
  $texteditor-border-color-focused: color.adjust($texteditor-border-color, $lightness: -17.65%, $space: hsl) !default;
  $texteditor-border-bottom-color-hover: color.adjust($texteditor-border-bottom-color, $lightness: -3.92%, $space: hsl) !default;
  $texteditor-border-bottom-color-focused: color.adjust($texteditor-border-bottom-color-hover, $lightness: -3.92%, $space: hsl) !default;
}


@if $mode == "dark" {
  @if $color == "blue" {
    $texteditor-outlined-bg: $base-element-bg !default;
    $texteditor-filled-bg: color.adjust($base-element-bg, $lightness: -8.2%, $space: hsl) !default;
  }

  @if $color == "saas" {
    $texteditor-outlined-bg: rgba(20, 30, 40, 1) !default;
    $texteditor-filled-bg: rgba(50, 60, 75, 1) !default;
  }

  $texteditor-color: $base-text-color !default;
  $texteditor-placeholder-color: color.adjust($base-text-color, $lightness: -40.00%, $space: hsl) !default;
  $texteditor-border-color-hover: color.adjust($texteditor-border-color, $lightness: 7.84%, $space: hsl) !default;
  $texteditor-border-color-focused: color.adjust($texteditor-border-color, $lightness: 3.92%, $space: hsl) !default;
  $texteditor-border-bottom-color-hover: color.adjust($texteditor-border-bottom-color, $lightness: 6.27%, $space: hsl) !default;
  $texteditor-border-bottom-color-focused: color.adjust($texteditor-border-bottom-color-hover, $lightness: 3.92%, $space: hsl) !default;
}

/**
* $name 41. Filled hovered background color
* $type color
*/
$texteditor-filled-bg-hover: $texteditor-filled-bg !default;

/**
* $name 42. Filled focused background color
* $type color
*/
$texteditor-filled-bg-focused: $texteditor-filled-bg !default;

$texteditor-label-color: $texteditor-placeholder-color;
$texteditor-label-color-focused: $base-accent;

:root {
  --dx-texteditor-color-text: #{$texteditor-color};
  --dx-texteditor-color-label: #{$texteditor-label-color};
}