/**
 * Front end counter.
 *
 * The configurable values arrive as custom properties that the script sets on
 * the counter element. They are validated on the server and again in the
 * script, so nothing here has to guard against them.
 */

.flf-counter {
	display: inline-block;
	box-sizing: border-box;
	padding: 0 0.55em;
	border-radius: 3px;
	font-size: var( --flf-size, 13px );
	line-height: 1.7;
	font-variant-numeric: tabular-nums;
	color: var( --flf-color, #50575e );
	background-color: var( --flf-bg, #f0f0f1 );
	transition: color 120ms ease, background-color 120ms ease;
}

.flf-counter.is-over {
	color: var( --flf-warning-color, #8a2424 );
	background-color: var( --flf-warning-bg, #f6d171 );
}

@media ( prefers-reduced-motion: reduce ) {
	.flf-counter {
		transition: none;
	}
}

/* Beside the label. */

.flf-counter--label-left {
	margin-left: 0.5em;
}

.flf-counter--label-right {
	float: right;
	margin-left: 0.5em;
}

.flf-counter--standalone {
	margin-top: 0.25em;
}

/* Inside the field. */

.flf-wrap {
	display: block;
	position: relative;
}

.flf-counter--inside {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	pointer-events: none;
	background-color: transparent;
	padding: 0 0.35em;
}

.flf-wrap--left > .flf-counter--inside {
	left: 0.4em;
}

.flf-wrap--right > .flf-counter--inside {
	right: 0.4em;
}

/*
 * Room for the counter. A fixed reserve is used on purpose: the original
 * measured the counter and rewrote the field padding on every keystroke, which
 * made the text jump sideways as the number of digits changed.
 */

.flf-wrap--left > input {
	padding-left: 4.5em;
}

.flf-wrap--right > input {
	padding-right: 4.5em;
}

/*
 * A textarea has no vertical middle to sit in, so the counter goes to the foot
 * and the room is made below the text rather than beside it. Only the one
 * padding side this plugin needs is touched, so whatever the theme sets for the
 * other three stays as it is.
 */

.flf-wrap--multiline > .flf-counter--inside {
	top: auto;
	bottom: 0.4em;
	transform: none;
}

.flf-wrap--multiline > textarea {
	padding-bottom: 2em;
}

/*
 * Defined here rather than relying on the theme: not every theme ships the
 * class, and the live region has to stay out of sight in all of them.
 */

.flf-status {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}