@use "../mixins" as *;
@use "./mixins" as *;
@use "../textEditor/mixins" as *;

// adduse

.dx-dropdowneditor {
  position: relative;

  &.dx-dropdowneditor-field-clickable {
    cursor: pointer;

    .dx-texteditor-input {
      cursor: pointer;
    }

    .dx-texteditor-buttons-container {
      .dx-state-disabled {
        &.dx-button,
        .dx-button {
          pointer-events: auto;
        }
      }
    }
  }
}

.dx-dropdowneditor-input-wrapper {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow: hidden;
  height: 100%;
  display: flex;

  .dx-texteditor {
    border: none;
    margin: 0;
    display: flex;
    flex-grow: 1;
  }

  .dx-texteditor-input {
    text-overflow: ellipsis;
  }
}

.dx-dropdowneditor-field-template-wrapper {
  @include dx-editor-content-wrapper();

  > * {
    flex-grow: 1;
  }
}

.dx-dropdowneditor-field-before-template-wrapper,
.dx-dropdowneditor-field-after-template-wrapper {
  display: flex;
  flex-grow: 1;
  align-items: center;
}

.dx-dropdowneditor-active {
  .dx-dropdowneditor-icon {
    opacity: 0.35;
  }
}

.dx-dropdowneditor-button {
  position: relative;
  display: inline-flex;
  float: right;
  height: 100%;
  cursor: pointer;

  .dx-button-content {
    text-align: center;
    white-space: nowrap;
  }

  @at-root #{selector-append(".dx-rtl", &)},
  .dx-rtl & {
    float: left;
  }
}

.dx-dropdowneditor-button.dx-dropdowneditor-readonly {
  cursor: default;
}

.dx-dropdowneditor-icon {
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.dx-state-disabled {
  .dx-dropdowneditor,
  &.dx-dropdowneditor {
    cursor: default;
  }

  .dx-dropdowneditor-button {
    cursor: inherit;
  }
}