@use '../../tokens/index.scss' as tokens;
@use '../../mixins/index.scss' as mixins;

$textarea-color: tokens.$text !default;
$textarea-background-color: tokens.$body-background !default;
$textarea-border-color: tokens.$control-border !default;
$textarea-border-bottom-color: tokens.$control-border-bottom !default;
$textarea-placeholder-color: tokens.$text-subtle !default;

$textarea-hover-color: tokens.$text !default;
$textarea-hover-border-color: tokens.$default-hover !default;
$textarea-focus-border-color: tokens.$primary !default;

$textarea-disabled-color: tokens.$text-subtle !default;
$textarea-disabled-background-color: tokens.$body-background-medium !default;
$textarea-disabled-border-color: tokens.$table-border-dark !default;

$textarea-danger-border-color: tokens.$danger !default;
$textarea-success-border-color: tokens.$success !default;

$textarea-focus-box-shadow-size: 0 0.125rem 0 0 !default;

$textarea-margin-spacing: tokens.$layout-1 !default;

.textarea {
	@include mixins.control;

	display: block;
	width: 100%;
	max-width: 100%;
	resize: vertical;
	transition: box-shadow 300ms linear;
	border-color: $textarea-border-color;
	border-block-end-color: $textarea-border-bottom-color;
	background-color: $textarea-background-color;
	color: $textarea-color !important;

	&[rows] {
		height: initial;
	}

	&:not([rows]) {
		min-height: 100px;
		max-height: 600px;
	}

	&::placeholder {
		color: $textarea-placeholder-color;
	}

	&:hover {
		border-color: $textarea-hover-border-color;
		border-block-end-color: $textarea-border-bottom-color;
	}

	&[disabled] {
		border-color: $textarea-disabled-border-color;
		background-color: $textarea-disabled-background-color;
		color: $textarea-disabled-color;
	}

	@include mixins.focus-visible {
		@extend %focus;

		border-block-end-color: $textarea-focus-border-color;
		outline-color: transparent;
		outline-offset: 0;
		outline-style: solid;
		box-shadow: $textarea-focus-box-shadow-size $textarea-focus-border-color;
	}

	&.textarea-fixed-height {
		resize: none;
	}

	&.textarea-danger {
		border-color: $textarea-danger-border-color;

		@include mixins.focus-visible() {
			border-color: $textarea-border-color;
			border-block-end-color: $textarea-danger-border-color;
			box-shadow: $textarea-focus-box-shadow-size $textarea-danger-border-color;
		}
	}

	&.textarea-success {
		border-color: $textarea-success-border-color;

		@include mixins.focus-visible() {
			border-color: $textarea-border-color;
			border-block-end-color: $textarea-success-border-color;
			box-shadow: $textarea-focus-box-shadow-size $textarea-success-border-color;
		}
	}
}

$textarea-form-gap: 0.25em !default;
$textarea-divider-radius: 0.5rem !default;

.textarea-form {
	display: grid;
	gap: $textarea-form-gap;
	padding-block: mixins.$control-padding-vertical;
	padding-inline: mixins.$control-padding-horizontal;
	transition: box-shadow 300ms linear;
	border-width: mixins.$control-border-width;
	border-style: solid;
	border-radius: tokens.$border-radius;
	border-color: $textarea-border-color;
	background-color: $textarea-background-color;
	font-size: mixins.$control-font-size;
	border-block-end-color: $textarea-border-bottom-color;

	@include mixins.prefers-reduced-motion {
		animation-duration: 0s;
	}

	&:has(.textarea:focus-visible),
	&:has(.textarea:hover) {
		border-block-end-color: $textarea-focus-border-color;
		outline-color: transparent;
		outline-offset: 0;
		outline-style: solid;
		box-shadow: $textarea-focus-box-shadow-size $textarea-focus-border-color;
	}

	.textarea {
		resize: none;
		border: none;
		box-shadow: none;
	}

	.textarea-form-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		outline-color: currentColor;
		margin-inline-start: $textarea-margin-spacing;
	}

	.textarea-form-footer-divider {
		height: 70%;
		border: 1px solid tokens.$control-border;
		border-radius: $textarea-divider-radius;
	}

	.textarea-form-footer-left,
	.textarea-form-footer-right {
		display: flex;
		align-items: center;
		gap: $textarea-form-gap;
		height: 100%;
	}

	.textarea-form-help {
		margin-inline-start: $textarea-margin-spacing;

		.help {
			display: flex;
			align-items: center;
			gap: 0.375em;
		}
	}
}