@use "sass:math";
@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../colorView/colors" as *;
@use "../textEditor/sizes" as *;
@use "../../base/colorBox";
@use "../../base/colorBox/mixins" as *;

// adduse
@use "../colorView";
@use "../dropDownEditor";


.dx-colorbox {
  .dx-colorbox-input-container {
    .dx-placeholder::before,
    .dx-colorbox-input {
      padding-inline-start: $fluent-colorbox-preview-width;
    }

    &::after {
      left: $fluent-colorbox-preview-padding + 1;
    }
  }

  &.dx-texteditor {
    .dx-texteditor-label {
      .dx-label-before {
        min-width: $fluent-colorbox-preview-width;
      }
    }
  }
}

.dx-colorbox-color-result-preview {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: $fluent-colorbox-preview-icon-size;
  height: $fluent-colorbox-preview-icon-size;
  margin-top: math.div(-$fluent-colorbox-preview-icon-size, 2);
  inset-inline-start: $fluent-colorbox-preview-padding;
  border: 1px solid;
  border-color: $colorview-border-color;

  .dx-icon-colordismiss {
    color: $colorbox-preview-icon-color;
  }

  .dx-state-disabled & {
    .dx-icon-colordismiss {
      color: $base-foreground-disabled;
    }
  }
}

.dx-colorbox-overlay {
  &.dx-overlay-content {
    background-color: $colorbox-overlay-bg;
  }

  .dx-popup-content {
    padding: $fluent-colorbox-overlay-padding;
  }

  padding: 0;
}