/**
 * Post Traits Rating – frontend styles.
 *
 * Neutral defaults; adjust via the custom properties on .ptr-rating in your theme.
 */

.ptr-rating {
	--ptr-gap: 0.5rem;
	--ptr-radius: 999px;
	--ptr-font-size: 0.9375rem;
	--ptr-text: inherit;
	--ptr-bg: transparent;
	--ptr-border: rgba(110, 110, 110, 0.5);
	--ptr-selected-bg: rgba(110, 110, 110, 0.14);
	--ptr-positive: #1a7f37;
	--ptr-negative: #b42318;
	--ptr-focus: #1d4ed8;
	--ptr-transition: 200ms ease;

	margin: 2em 0;
	color: var(--ptr-text);
	font-size: var(--ptr-font-size);
}

.ptr-rating[hidden] {
	display: none;
}

.ptr-rating__heading {
	margin: 0 0 0.75em;
	font-size: 1.15em;
	line-height: 1.3;
}

/*
 * The groups are always stacked: positive traits in the first row, negative
 * traits in the second, separated by a horizontal divider. A fixed layout keeps
 * the box from reflowing once the counts appear after rating.
 */
.ptr-rating__groups {
	display: flex;
	flex-direction: column;
	gap: calc(var(--ptr-gap) * 3);
}

.ptr-rating__group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ptr-gap);
	min-width: 0;
}

.ptr-rating__group--negative {
	position: relative;
}

.ptr-rating__group--positive + .ptr-rating__group--negative::before {
	content: "";
	position: absolute;
	top: calc(var(--ptr-gap) * -1.5);
	right: 0;
	left: 0;
	border-top: 1px solid var(--ptr-border);
}

.ptr-rating__group-label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ptr-rating__button {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	padding: 0.45em 0.95em;
	border: 1px solid var(--ptr-border);
	border-radius: var(--ptr-radius);
	background: var(--ptr-bg);
	color: inherit;
	font: inherit;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition:
		background-color var(--ptr-transition),
		border-color var(--ptr-transition),
		box-shadow var(--ptr-transition),
		transform var(--ptr-transition);
}

.ptr-rating__button:hover:not(:disabled) {
	border-color: currentcolor;
}

.ptr-rating__button:focus-visible {
	outline: 2px solid var(--ptr-focus);
	outline-offset: 2px;
}

.ptr-rating__button:disabled {
	cursor: default;
	opacity: 0.6;
}

.ptr-rating__button.is-selected {
	background: var(--ptr-selected-bg);
}

.ptr-rating__group--positive .ptr-rating__button.is-selected {
	border-color: var(--ptr-positive);
	background: color-mix(in srgb, var(--ptr-positive) 14%, var(--ptr-selected-bg));
	box-shadow: inset 0 0 0 1px var(--ptr-positive);
}

.ptr-rating__group--negative .ptr-rating__button.is-selected {
	border-color: var(--ptr-negative);
	background: color-mix(in srgb, var(--ptr-negative) 14%, var(--ptr-selected-bg));
	box-shadow: inset 0 0 0 1px var(--ptr-negative);
}

.ptr-rating__button.is-deselecting {
	animation: ptr-deselect 450ms ease;
}

@keyframes ptr-deselect {

	0% {
		transform: scale(1);
	}

	35% {
		transform: scale(0.9);
		opacity: 0.55;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.ptr-rating__icon {
	line-height: 1;
}

.ptr-rating__count {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ptr-rating__count::before {
	content: "·";
	margin-right: 0.4em;
	font-weight: 400;
}

.ptr-rating__count[hidden] {
	display: none;
}

.ptr-rating__total,
.ptr-rating__hint {
	margin: 0;
	font-size: 0.9em;
}

.ptr-rating__total:not(:empty) {
	margin-top: 0.75em;
}

.ptr-rating__hint:not(:empty) {
	margin-top: 0.5em;
	font-style: italic;
}

.ptr-rating__hint.is-visible {
	animation: ptr-fade-in var(--ptr-transition);
}

@keyframes ptr-fade-in {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {

	.ptr-rating__button {
		transition: none;
	}

	.ptr-rating__button.is-deselecting,
	.ptr-rating__hint.is-visible {
		animation: none;
	}
}