/* We don't use 2xl, 3xl, 4xl map keys because in some Intellij configurations, these keys are reformatted */
:host {
  --textarea-invalid-color: var(--joy-color-error-50);
  --textarea-invalid-color-hover: var(--joy-color-error-90);
  display: block;
}

.joy-textarea {
  position: relative;
  padding: 0;
  border-radius: var(--joy-core-radius-3);
}
.joy-textarea_wrapper:hover label {
  color: var(--joy-color-state-hover);
}
.joy-textarea textarea {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  color: var(--joy-color-neutral-60);
  max-width: 100%;
  border-radius: var(--joy-core-radius-3);
  border: var(--joy-form-border-width) solid var(--joy-color-neutral-30);
  padding: var(--joy-core-spacing-4);
  transition: none;
  font-weight: var(--joy-font-weight-normal);
  font-size: var(--joy-font-size-primary-400);
  line-height: var(--joy-line-height-large);
  font-family: var(--joy-font-family-base);
  overflow-y: auto;
  outline: none;
  height: 100%;
  z-index: 1;
  margin: 0;
}
.joy-textarea textarea {
  transition: border-color var(--joy-transition-duration-default) var(--joy-transition-timing-function);
}
.joy-textarea textarea:hover {
  border-color: var(--joy-color-state-hover);
}
.joy-textarea textarea {
  transition: border-color var(--joy-transition-duration-default) var(--joy-transition-timing-function);
}
.joy-textarea textarea:focus {
  border-color: var(--joy-color-state-focus);
  outline: none;
}
.joy-textarea:focus-within .joy-textarea_label {
  color: var(--joy-color-secondary-50);
  outline: none;
}
.joy-textarea_label {
  position: absolute;
  left: 10px;
  color: var(--joy-color-neutral-40);
  top: -13px;
  background-color: white;
  z-index: 2;
  padding: 0 5px;
  transition: top 150ms ease;
  user-select: none;
}
.joy-textarea_helpers {
  display: flex;
  justify-content: space-between;
  margin-top: var(--joy-core-spacing-3);
  margin-bottom: var(--joy-core-spacing-6);
}
.joy-textarea_helpers p {
  font-weight: var(--joy-font-weight-normal);
  font-size: var(--joy-font-size-primary-300);
  line-height: var(--joy-line-height-large);
  font-family: var(--joy-font-family-base);
  margin: 0;
  padding: 0;
  color: var(--joy-color-neutral-50);
}
.joy-textarea_helpers p.joy-textarea-min {
  display: flex;
  align-items: flex-end;
  /*
                  &-invalid {
                      color: var(--joy-color-neutral-40);
                  }*/
}
.joy-textarea_helpers p.joy-textarea-min joy-icon {
  margin-right: var(--joy-core-spacing-2);
}

.joy-textarea_autogrow textarea {
  resize: none;
  overflow-y: hidden;
}

.joy-textarea_invalid textarea {
  border-color: var(--textarea-invalid-color);
}
.joy-textarea_invalid .joy-textarea_label {
  color: var(--textarea-invalid-color);
}
.joy-textarea_invalid:hover textarea {
  border-color: var(--textarea-invalid-color-hover);
}
.joy-textarea_invalid:hover .joy-textarea_label {
  color: var(--textarea-invalid-color-hover);
}

.joy-textarea_helpers .joy-textarea-count-invalid {
  color: var(--textarea-invalid-color);
}

.joy-textarea_disabled {
  cursor: not-allowed;
}
.joy-textarea_disabled textarea, .joy-textarea_disabled textarea:hover {
  cursor: not-allowed;
  border-color: var(--joy-color-state-disabled-border);
  background-color: var(--joy-color-neutral-10);
}
.joy-textarea_disabled textarea::placeholder, .joy-textarea_disabled textarea:hover::placeholder {
  color: var(--joy-color-text-disabled);
}
.joy-textarea_disabled .joy-textarea_label, .joy-textarea_disabled .joy-textarea_helpers p {
  color: var(--joy-color-text-disabled);
}
.joy-textarea_disabled:hover textarea {
  border-color: var(--joy-color-neutral-30);
}
.joy-textarea_disabled:hover .joy-textarea_label, .joy-textarea_disabled:hover .joy-textarea_helpers p {
  color: var(--joy-color-text-disabled);
}