/*
 * PureCSS.com
 * https://purecss.com/examples/character-count/
 * Input border changes color based on validity using :user-invalid/:user-valid with minlength/maxlength.
 */

.demo-character-count .cc-wrap {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		max-width: 400px;
		margin: 0 auto;
	}

.demo-character-count .cc-field {
		display: flex;
		flex-direction: column;
		gap: .4rem;
	}

.demo-character-count label {
		font-size: .85rem;
		color: var(--text-muted);
		font-weight: 500;
	}

.demo-character-count input,.demo-character-count textarea {
		width: 100%;
		padding: .75rem 1rem;
		background: var(--surface-2);
		border: 2px solid var(--border);
		border-radius: var(--radius);
		color: var(--text);
		font-family: var(--font-sans);
		font-size: .95rem;
		transition: border-color .2s;
		outline: none;
	}

:is(.demo-character-count input,.demo-character-count textarea):focus {
			border-color: var(--accent);
		}

:is(.demo-character-count input,.demo-character-count textarea):user-valid {
			border-color: var(--teal);
		}

:is(.demo-character-count input,.demo-character-count textarea):user-invalid {
			border-color: var(--coral);
		}

.demo-character-count textarea {
		resize: vertical;
		min-height: 80px;
	}

.demo-character-count .cc-meta {
		display: flex;
		justify-content: space-between;
		font-size: .75rem;
		color: var(--text-muted);
	}

.demo-character-count input:user-valid ~ .cc-meta,.demo-character-count textarea:user-valid ~ .cc-meta {
		color: var(--teal);
	}

.demo-character-count input:user-invalid ~ .cc-meta,.demo-character-count textarea:user-invalid ~ .cc-meta {
		color: var(--coral);
	}