@import "./../../mixins/scss/mixins";
@import "./f-text-variables-dynamic";
@import "./f-text-variables";

:host {
	mark {
		background-color: transparent;
		color: var(--color-highlight-default);
		display: contents;
	}
	.f-text-editable {
		position: relative;
		display: flex;
		flex-direction: row;
		width: 100%;
	}
	.f-text-editable[data-hover] {
		&:hover {
			background-color: var(--color-surface-default-hover);
		}
	}
	.pseudo-submit-text {
		position: absolute;
		top: 5px;
		right: 6px;
	}
	.textarea-wrapper {
		display: flex;
		width: 100%;
	}
	.non-editable-slot {
		padding: 3px 6px;
	}
	.textarea {
		display: block;
		width: 100%;
		overflow: hidden;
		min-height: 15px;
		border: 1px solid var(--color-border-default);
		border-radius: 4px;
		font-family: inherit;
		font-size: inherit;
		padding: 3px 6px;
		resize: none;
		.slot-text {
			width: calc(100% - 16px);
		}

		@each $variant, $valmap in $variants {
			&[variant="#{$variant}"] {
				@each $size, $sizemap in $valmap {
					&[size="#{$size}"] {
						font-size: map-get($sizemap, "fontSize");
						line-height: map-get($sizemap, "lineHeight");
						@each $weight, $val in map-get($sizemap, "weight") {
							&[weight="#{$weight}"] {
								font-weight: $val;
							}
						}
						font-family: map-get($sizemap, "fontFamily") !important;
					}
				}
			}
		}

		&:focus {
			outline: none;
			border: 1px solid var(--color-primary-default);
		}
	}

	.textarea[data-is-empty="true"]::before {
		@include base();
		font-size: 12px;
		content: attr(data-placeholder);
		color: var(--color-text-secondary);
	}
}