.treeselect-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d7dde4;
  border-radius: 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 2px 4px;
  padding-right: 40px;
  position: relative;
  min-height: 37px;
  background-color: #ffffff;
  cursor: text;
}

.treeselect-input--unsearchable {
  cursor: default;
}

.treeselect-input--unsearchable .treeselect-input__edit {
  caret-color: transparent;
  cursor: default;
}

.treeselect-input--unsearchable .treeselect-input__edit:focus {
  position: absolute;
  z-index: -1;
  left: 0;
  min-width: 0;
  width: 0;
}

.treeselect-input--value-not-selected .treeselect-input__edit,
.treeselect-input--value-not-selected.treeselect-input--unsearchable .treeselect-input__edit:focus {
  z-index: auto;
  position: static;
  width: 100%;
  max-width: 100%;
}

.treeselect-input--value-not-selected .treeselect-input__tags {
  gap: 0;
}

/* rtl */
[dir='rtl'] .treeselect-input {
  padding-right: 4px;
  padding-left: 40px;
}

[dir='rtl'] .treeselect-input__operators {
  right: unset;
  left: 2px;
}
/* rtl end */

.treeselect-input__tags {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.treeselect-input__tags-element {
  display: inline-flex;
  align-items: center;
  background-color: #d7dde4;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 2px;
  font-size: 14px;
  max-width: 100%;
  box-sizing: border-box;
}

.treeselect-input__tags-element:hover {
  background-color: #c5c7cb;
}

.treeselect-input__tags-element:hover .treeselect-input__tags-cross svg {
  stroke: #eb4c42;
}

.treeselect-input__tags-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.treeselect-input__tags-cross {
  display: flex;
  margin-left: 2px;
}

.treeselect-input__tags-cross svg {
  width: 12px;
  height: 12px;
}

.treeselect-input__tags-count {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.treeselect-input__edit {
  flex: 1;
  border: none;
  font-size: 14px;
  text-overflow: ellipsis;

  width: 100%;
  max-width: calc(100% - 45px);
  padding: 0;

  /* Hide input for user */
  position: absolute;
  z-index: -1;
  min-width: 0;
}

.treeselect-input__edit:focus {
  outline: none;
  min-width: 30px;
  max-width: 100%;

  /* Show input for user */
  z-index: auto;
  position: static;
}

.treeselect-input__operators {
  display: flex;
  max-width: 40px;
  position: absolute;
  right: 2px;
}

.treeselect-input__clear {
  display: flex;
  cursor: pointer;
}

.treeselect-input__clear svg {
  stroke: #c5c7cb;
  width: 17px;
  min-width: 17px;
  height: 20px;
}

.treeselect-input__clear:hover svg {
  stroke: #838790;
}

.treeselect-input__arrow {
  display: flex;
  cursor: pointer;
}

.treeselect-input__arrow svg {
  stroke: #c5c7cb;
  width: 20px;
  min-width: 20px;
  height: 20px;
}

.treeselect-input__arrow:hover svg {
  stroke: #838790;
}
