@use "sass:map";
// common mixins imported from this file
@import "./../../mixins/scss/mixins";
@import "./f-text-area-variables";

:host {
	.f-text-area-wrapper {
		position: relative;
		width: 100%;
		.f-text-area-maxlength {
			position: absolute;
			right: 0%;
			transform: translateY(-28px);
		}
		.f-text-area {
			@include base();
			width: 100%;
			padding: var(--form-textarea-padding-tp-btm) var(--form-textarea-padding-lt-rt);
			box-sizing: border-box;
			border-radius: 4px;
			font-size: 12px;
			font-style: normal;
			font-weight: 325;
			line-height: 18px;
			color: var(--color-text-default);
			resize: none;
			max-height: 100%;
			scroll-padding-block: var(--form-textarea-padding-tp-btm);
			&[resizable] {
				resize: vertical;
			}
			@each $size, $value in $sizes {
				&[size="#{$size}"] {
					padding: map.get($value, "padding-top-bottom") map.get($value, "padding-left-right");
				}
			}
			&::placeholder {
				/* Modern browsers */
				/* Chrome, Firefox, Opera, Safari 10.1+ */
				font-style: normal;
				font-weight: 325;
				font-size: 12px;
				line-height: 18px;
				color: var(--color-text-subtle);
			}
			@each $category, $value in $categories {
				&[category="#{$category}"] {
					background-color: map.get($value, "background");
					&:hover {
						background-color: map.get($value, "hover") !important;
					}
				}
			}
			@each $state, $value in $states {
				&[state="#{$state}"] {
					&[category="fill"] {
						border: 1px solid map.get($value, "input");
						&:focus {
							outline: none;
							border: 1px solid map.get($value, "focus");
						}
					}
					&[category="transparent"] {
						border-bottom: 1px solid map.get($value, "border");
						border-top: none;
						border-left: none;
						border-right: none;
						&:focus {
							outline: none;
							border-bottom: 1px solid map.get($value, "focus");
						}
					}
					&[category="outline"] {
						border: 1px solid map.get($value, "border");
						&:focus {
							outline: none;
							border: 1px solid map.get($value, "focus");
						}
					}
				}
			}
		}
		.f-text-area-clear-icon {
			position: absolute;
			right: 7px;
			bottom: 0%;
			top: 10px;
		}
		.textarea-limit {
			transform: translateY(-0.075em);
		}
	}
	f-div.f-text-area-root[disabled] {
		@include disabled();
		pointer-events: none;
		opacity: 1;
	}
}