@use './variables' as *;

.s-textarea {
	textarea {
		align-self: stretch;
		flex: 1 1 auto;
		line-height: $textarea-line-height;
		max-width: 100%;
		min-height: $textarea-min-height;
		outline: none;
		padding: $textarea-padding;
		width: 100%;
		margin-top: 4px;
	}

	.s-text-field__wrapper {
		& > {
			[slot='prepend'],
			[slot='append'] {
				align-self: flex-start;
				margin-top: $textarea-icon-margin-top;
			}
		}

		&.filled {
			[slot='prepend'],
			[slot='append'] {
				margin-top: $textarea-filled-icon-margin-top;
			}
		}

		&.outlined {
			[slot='prepend'],
			[slot='append'] {
				margin-top: $textarea-outlined-icon-margin-top + 2;
			}

			textarea {
				margin-top: $textarea-outlined-icon-margin-top;
			}
		}

		&.solo {
			[slot='prepend'],
			[slot='append'] {
				margin-top: $textarea-solo-icon-margin-top;
			}

			textarea {
				margin-top: $textarea-solo-icon-margin-top;
			}
		}

		&.autogrow {
			textarea {
				overflow: hidden;
			}
		}

		&.no-resize {
			textarea {
				resize: none;
			}
		}
	}
}