@use 'exports' as *;

.richTextField {
	@layer components {
		@include vars;
		@include component;
	}

	@layer mods {
		&:has(.richTextField-content:focus-visible) {
			@include focusVisible;
		}

		&:hover {
			@include hover;
		}

		&:has(.richTextField-content[aria-invalid='true']) {
			@include error;

			&:hover {
				@include errorHover;
			}
		}

		&.is-disabled {
			@include disabled;
		}

		&.mod-autoResize {
			@include autoResize;
		}
	}
}

@layer mods {
	.richTextField-toolbar-button.button.mod-onlyIcon {
		&[aria-pressed='true'] {
			@include buttonPressed;

			&:hover {
				@include buttonPressedHover;
			}

			&:active {
				@include buttonPressedActive;
			}

			&:focus-visible {
				@include buttonPressedFocusVisible;
			}

			&:disabled {
				@include buttonPressedDisabled;
			}
		}
	}
}