@zeix/ui-element/docs-src/components/rating-feedback/rating-feedback.css

UIElement - minimal reactive framework based on Web Components

rating-feedback {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	gap: var(--space-m);
	width: 80%;
	text-align: left;

	header {
		display: flex;
		flex-direction: row-reverse;
		gap: var(--space-s);
		margin-block: var(--space-l);
	}

	.hide {
		position: relative;
		display: block;
		box-sizing: border-box;
		top: 0;
		right: 0;
		border: 0;
		border-radius: var(--space-xs);
		color: var(--color-text);
		background: transparent;
		height: var(--input-height);
		font-size: var(--font-size-l);

		&:hover,
		&:focus {
			background: rgba(0, 0, 0, 0.05);
		}

		&:active {
			background: rgba(0, 0, 0, 0.1);
		}
	}

	p {
		margin: 0;
	}

	form {
		display: flex;
		flex-direction: column;
	}

	fieldset {
		border: 0;
		padding: 0;
		margin: 0;
	}

	.feedback label {
		display: block;
		margin-bottom: var(--space-xxs);
	}

	textarea {
		resize: vertical;
        width: 100%;
		display: inline-block;
		box-sizing: border-box;
		background: var(--color-input);
		color: var(--color-text);
		border: 1px solid var(--color-border);
		padding: var(--space-xs) var(--space-xxs);
		font-size: var(--font-size-m);
        line-height: var(--line-height-m);
		margin-bottom: var(--space-xs);
	}
}