/* Textarea Styles */
.text-container {
  position: relative;
  width: 100%;
}

.text-container textarea {
  position: relative;
  z-index: 2;
  background: transparent;
  width: 100%;
  padding: 1rem 1rem;
  font-size: 1rem;
  color: var(--bold);
  border: 1px solid var(--color);
  border-radius: 8px;
  background: var(--background);
  outline: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  resize: vertical;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Label Styles */
.textarea label {
  position: absolute;
  top: 25px;
  left: 10px;
  font-size: 1rem;
  color: var(--accent);
  padding: 0 5px;
  transition: all 0.2s ease-in-out;
  z-index: 2;
  pointer-events: none;
}

/* Label Animation: Focused or Filled */
.text-container textarea:focus+label,
.text-container textarea:not(:placeholder-shown)+label {
  top: -12px;
  font-size: 0.8rem;
  color: var(--bold);
  z-index: 3;
}

/* Focus State */
.text-container textarea:focus {
  border-color: var(--color) !important;
  box-shadow: 0 0 0 1px var(--color), 0 0 0 1px var(--color) inset !important;
}

/* White State */
.text-container.white textarea {
  border-color: var(--white-color) !important;
  box-shadow: none;
  color: var(--white-color) !important;
}

.text-container.white textarea:focus {
  box-shadow: 0 0 0 1px var(--white-color), 0 0 0 1px var(--white-color) inset !important;
}

.text-container.white label {
  color: var(--white-color) !important;
}

/* Black State */
.text-container.black textarea {
  border-color: var(--black-color) !important;
  box-shadow: none;
  color: var(--black-color) !important;
}

.text-container.black textarea:focus {
  box-shadow: 0 0 0 1px var(--black-color), 0 0 0 1px var(--black-color) inset !important;
}

.text-container.black label {
  color: var(--black-color) !important;
}

/* Error State */
.text-container.error textarea {
  border-color: var(--error-color) !important;
  box-shadow: none;
}

.text-container.error textarea:focus {
  box-shadow: 0 0 0 1px var(--error-color), 0 0 0 1px var(--error-color) inset !important;
}

.text-container.error label {
  color: var(--error-color) !important;
}

/* Success State */
.text-container.success textarea {
  border-color: var(--success-color) !important;
  box-shadow: none;
}

.text-container.success textarea:focus {
  box-shadow: 0 0 0 1px var(--success-color), 0 0 0 1px var(--success-color) inset !important;
}

.text-container.success label {
  color: var(--success-color) !important;
}

/* Warning State */
.text-container.warning textarea {
  border-color: var(--warning-color) !important;
  box-shadow: none;
}

.text-container.warning textarea:focus {
  box-shadow: 0 0 0 1px var(--warning-color), 0 0 0 1px var(--warning-color) inset !important;
}

.text-container.warning label {
  color: var(--warning-color) !important;
}

/* Disabled State */
.text-container.disabled textarea {
  background: var(--foreground);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: none;
  cursor: not-allowed;
}

.text-container.disabled label {
  color: var(--accent);
}