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

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


.dx-colorbox {
  &.dx-state-focused .dx-colorbox-input {
    padding-left: 40px;
  }

  .dx-placeholder {
    left: 32px;
  }
}

.dx-colorbox-input-container {
  &.dx-colorbox-color-is-not-defined {
    .dx-colorbox-color-result-preview {
      background: $colorbox-preview-empty-bg no-repeat 0 0;
    }
  }
}

.dx-colorbox-color-result-preview {
  border-color: $colorview-border-color;
}

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

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

  padding: 0;
}

.dx-rtl {
  &.dx-colorbox,
  .dx-colorbox {
    &.dx-state-focused .dx-colorbox-input {
      padding-right: 40px;
    }
  }

  .dx-colorbox-overlay {
    .dx-toolbar-item:first-child {
      padding-left: 10px;
      padding-right: 0;
    }
  }
}