:host {
  display: block;
}

.biel-input-container {
  display: flex;
  align-items: center;
  padding: 10px;
}

.biel-input__textarea {
  width: 100%;
  max-height: var(--biel-input-textarea-max-height);
  min-height: var(--biel-input-textarea-min-height);
  height: var(--biel-input-textarea-min-height);
  padding: 10px;
  background-color: var(--biel-bot-content-bg-color);
  color: var(--biel-input-color);
  border: 1px solid var(--biel-input-border-color);
  border-radius: var(--biel-input-border-radius);
  margin-right: 10px;
  font-family: var(--biel-input-font-family);
  font-size: var(--biel-text-font-size);
  resize: none;
  overflow-y: hidden;
}

.biel-input__textarea::-webkit-scrollbar {
  width: 8px;
}

.biel-input__textarea::-webkit-scrollbar-thumb {
  background-color: var(--biel-chat-scrollbar-color);
  border-radius: 10px;
  border: 3px solid transparent;
}

.biel-input__textarea::-webkit-scrollbar-thumb:hover {
  background-color: var(--biel-chat-scrollbar-hover-color);
  cursor: auto;
}

.biel-input__textarea:disabled {
  cursor: not-allowed;
}

.biel-input__button {
  padding: 12px 16px;
  background-color: var(--biel-input-button-bg-color);
  color: var(--biel-input-button-color);
  border: 1px solid var(--biel-input-button-bg-color);
  border-radius: var(--biel-input-border-radius);
  cursor: pointer;
  font-family: var(--biel-input-font-family);
}

.biel-input__button:hover {
  background-color: var(--biel-input-button-hover-bg-color);
  color: var(--biel-input-button-hover-color);
  border-color: var(--biel-input-button-hover-border-color);
}

.biel-input__button:disabled {
  background-color: var(--biel-input-button-hover-bg-color);
  cursor: not-allowed;
}

.biel-input__textarea:focus {
  outline: none;
  border-color: var(--biel-input-border-focus-color);
}