@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: $material-colorbox-preview-width;
    }

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

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

.dx-colorbox-color-result-preview {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 17px;
  height: 17px;
  margin-top: -8.5px;
  inset-inline-start: 13px;
  border: 1px solid;
  border-color: $colorview-border-color;
  left: $material-colorbox-preview-left;

  .dx-icon-colordismiss {
    font-size: 17px;
    color: $colorbox-preview-icon-color;
  }
}

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

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

  padding: 0;
}