@import "../_colors";

.p-autocomplete-chip {
  background-color: #ccc !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  color: $primary-dark-text-color !important;
  font-size: 12px !important;
  min-height: 20px;
  max-width: 200px;
  vertical-align: top !important;
  display: flex;
  align-items: center;
  gap: 8px !important;

  .p-chip-label {
    padding-left: 8px;
  }

  &:hover {
    background-color: #e5eaea !important;
    cursor: pointer;
  }

  .p-chip-remove-icon {
    align-self: stretch;
    display: flex;
    padding-right: 8px;
  }

  .p-autocomplete-token-icon,
  .p-chips-token-icon {
    font-size: 14px !important;
    margin-left: 10px;
  }

  .p-iconwrapper {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .p-autocomplete-chip-icon {
    svg {
      width: 10px;
      height: 10px;
    }
  }
}
body .p-chip-token {
  background-color: #ccc !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  color: $primary-dark-text-color !important;
  font-size: 12px !important;
  min-height: 20px;
  max-width: 200px;
  vertical-align: top !important;
  display: flex !important;
  align-items: center;
  gap: 8px !important;

  .p-chip-label {
    padding-left: 8px;
  }

  &:hover {
    background-color: #e5eaea !important;
    cursor: pointer;
  }

  .p-chip-remove-icon {
    align-self: stretch;
    display: flex;
    padding-right: 8px;
  }

  .p-chips-token-icon,
  .p-autocomplete-token-icon {
    font-size: 14px !important;
    margin-left: 10px;
  }

  .p-iconwrapper {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .p-autocomplete-chip-icon {
    svg {
      width: 10px;
      height: 10px;
    }
  }
}

.p-chips-token {
  &-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.p-chips-input-token,
.p-autocomplete-input-token {
  padding: 0 !important;

  input {
    font-size: 14px !important;
  }
}