.textarea {
	border-radius: var(--rounded-lg);
	box-sizing: border-box;
	width: 100%;
	outline: none;
	background: var(--blackSecondary);
	border: 0.3rem solid transparent;
	transition: 0.3s ease-in-out all;
	-webkit-appearance: textfield;
}

.textarea:focus {
	border-color: var(--white);
}

.textarea::placeholder {
	color: var(--blackTernary);
}

.textarea-outline {
	background: transparent;
	border-color: var(--blackTernary);
}

@each $color in black, blackSecondary, white, cyan, green, orange, pink, purple, 
  red, yellow
{
  .textarea-outline.textarea-$(color),
  .textarea-outline.textarea-$(color):focus,
  .textarea.textarea-$(color):focus {
	border-color: var(--$(color));
  }
}

.textarea.textarea-sm {
	padding: 0 var(--spacing-3);
	height: var(--spacing-12);
	font-size: var(--font-sm);
}

.textarea {
	padding: 0 var(--spacing-4);
	height: var(--spacing-32);
	font-size: var(--font-md);
}

.textarea.textarea-lg {
	padding: 0 var(--spacing-6);
	height: var(--spacing-64);
	font-size: var(--font-lg);
}

.textarea.textarea-border-sm {
	border-width: 0.1rem;
}

.textarea.textarea-border-md {
	border-width: 0.2rem;
}

.textarea.textarea-border-lg {
	border-width: 0.3rem;
}
