// adduse

$colorbox-input-left-padding: 40px;

.dx-colorbox-input-container {
  &.dx-colorbox-color-is-not-defined {
    .dx-colorbox-color-result-preview {
      border: none;
    }
  }

  .dx-placeholder {
    max-width: calc(100% - 25px);
  }
}

.dx-colorbox {
  .dx-texteditor-input-container {
    &::before {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      z-index: 1;
      width: 15px;
      height: 15px;
      margin-top: -7.5px;
      left: 14px;
    }
  }

  .dx-colorbox-color-is-not-defined {
    .dx-texteditor-input-container {
      &::before {
        background: none;
      }
    }
  }

  &.dx-editor-outlined,
  &.dx-editor-underlined,
  &.dx-editor-filled {
    .dx-texteditor-label {
      .dx-label-before {
        min-width: $colorbox-input-left-padding;
      }
    }
  }
}

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

.dx-colorbox-input-container .dx-colorbox-input.dx-texteditor-input {
  -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
  padding-left: $colorbox-input-left-padding;
}

.dx-colorbox-overlay {
  padding: 20px;

  .dx-popup-content {
    overflow: hidden;
    padding: 0;
  }

  .dx-popup-bottom {
    .dx-toolbar-item:first-child {
      padding-right: 10px;
    }
  }

  .dx-colorview-buttons-container {
    .dx-button {
      margin: 0;
    }
  }
}

.dx-rtl {
  .dx-colorbox,
  &.dx-colorbox {
    .dx-placeholder {
      right: 32px;
    }

    &.dx-dropdowneditor {
      .dx-colorbox-input.dx-texteditor-input {
        direction: ltr;
        text-align: end;
        padding-right: $colorbox-input-left-padding;
      }

      .dx-colorbox-color-result-preview {
        left: auto;
        right: 13px;
      }

      .dx-colorbox-input-container::before {
        left: auto;
        right: 14px;
      }
    }
  }
}