:root {
	--wj-reak-accent: #0f766e;
	--wj-reak-accent-soft: rgba(15, 118, 110, .12);
	--wj-reak-surface: rgba(15, 23, 42, .04);
	--wj-reak-surface-strong: rgba(15, 23, 42, .08);
	--wj-reak-text: inherit;
	--wj-reak-radius: 999px;
	--wj-reak-gap: .55rem;
}

html[data-color-scheme="dark"] {
	--wj-reak-accent: #2dd4bf;
	--wj-reak-accent-soft: rgba(45, 212, 191, .16);
	--wj-reak-surface: rgba(255, 255, 255, .06);
	--wj-reak-surface-strong: rgba(255, 255, 255, .1);
}

.wjReaktionenProfile {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: .25rem;
}

.wjReaktionenTopTabs {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.wjReaktionenTopTab {
	appearance: none;
	border: 0;
	background: transparent;
	color: inherit;
	opacity: .65;
	font: inherit;
	font-weight: 600;
	padding: .45rem .9rem;
	border-radius: var(--wj-reak-radius);
	cursor: pointer;
	transition: background .15s ease, opacity .15s ease, color .15s ease;
}

.wjReaktionenTopTab:hover {
	opacity: 1;
	background: var(--wj-reak-surface);
}

.wjReaktionenTopTab.isActive {
	opacity: 1;
	background: var(--wj-reak-accent-soft);
	color: var(--wj-reak-accent);
}

.wjReaktionenCount {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.35rem;
	padding: 0 .35rem;
	margin-left: .2rem;
	border-radius: var(--wj-reak-radius);
	background: var(--wj-reak-surface-strong);
	font-size: .8em;
	font-weight: 700;
}

.wjReaktionenToolbar {
	list-style: none;
	margin: 0 0 .25rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .85rem;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

.wjReaktionenSegment {
	display: inline-flex;
	align-items: center;
	padding: .2rem;
	gap: .15rem;
	border-radius: var(--wj-reak-radius);
	background: var(--wj-reak-surface);
	width: fit-content;
	max-width: 100%;
}

.wjReaktionenProfile .wjReaktionenSegmentBtn.button,
.wjReaktionenProfile #likeType .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: .45rem 1rem !important;
	border: 0 !important;
	border-radius: var(--wj-reak-radius) !important;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
	font-weight: 600;
	line-height: 1.2;
	opacity: .7;
	min-height: 0 !important;
}

.wjReaktionenProfile .wjReaktionenSegmentBtn.button:hover,
.wjReaktionenProfile #likeType .button:hover {
	opacity: 1;
	background: var(--wj-reak-surface-strong) !important;
}

.wjReaktionenProfile .wjReaktionenSegmentBtn.button.active,
.wjReaktionenProfile #likeType .button.active {
	opacity: 1;
	background: var(--wj-reak-accent) !important;
	color: #fff !important;
}

.wjReaktionenChips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wj-reak-gap);
}

.wjReaktionenProfile .wjReaktionenChip.button,
.wjReaktionenProfile #reactionType .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid transparent !important;
	border-radius: 1rem !important;
	background: var(--wj-reak-surface) !important;
	box-shadow: none !important;
	min-height: 0 !important;
	transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.wjReaktionenProfile .wjReaktionenChip.button:hover,
.wjReaktionenProfile #reactionType .button:hover {
	background: var(--wj-reak-surface-strong) !important;
	transform: translateY(-1px);
}

.wjReaktionenProfile .wjReaktionenChip.button.active,
.wjReaktionenProfile #reactionType .button.active {
	background: var(--wj-reak-accent-soft) !important;
	border-color: color-mix(in srgb, var(--wj-reak-accent) 45%, transparent) !important;
	box-shadow: 0 0 0 3px var(--wj-reak-accent-soft) !important;
}

.wjReaktionenChipIcon,
.wjReaktionenProfile #reactionType .reactionType,
.wjReaktionenProfile #reactionType img {
	width: 1.55rem !important;
	height: 1.55rem !important;
	display: block;
	object-fit: contain;
}

.wjReaktionenLikeList {
	margin: 0;
	padding: 0;
}

.wjReaktionenLikeList > li.wjReaktionenToolbar + li,
.wjReaktionenLikeList > li:not(.wjReaktionenToolbar):not(.likeListMore):not(.showMore) {
	padding: .85rem 0;
	border-bottom: 1px solid var(--wj-reak-surface-strong);
}

.wjReaktionenLikeList > li:not(.wjReaktionenToolbar):not(.likeListMore):not(.showMore):last-of-type {
	border-bottom: none;
}

.wjReaktionenList {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.wjReaktionenItem {
	padding: 0;
	border: 0;
}

.wjReaktionenCard {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .75rem .9rem;
	border-radius: 1rem;
	background: var(--wj-reak-surface);
}

.wjReaktionenBody {
	min-width: 0;
	flex: 1;
}

.wjReaktionenHeadline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem .45rem;
	font-weight: 600;
}

.wjReaktionenMeta {
	font-weight: 500;
	opacity: .75;
}

.wjReaktionenTime {
	display: block;
	margin-top: .2rem;
	opacity: .65;
}

.wjReaktionenIcon {
	display: inline-flex;
	align-items: center;
	color: #e11d48;
}

.wjReaktionenProfile .likeListMore,
.wjReaktionenProfile .showMore {
	display: flex;
	justify-content: center;
	padding: 1rem 0 .25rem;
	border: 0 !important;
	background: none !important;
}

.wjReaktionenProfile .likeListMore .button,
.wjReaktionenProfile .showMore .button {
	border-radius: var(--wj-reak-radius) !important;
	padding: .55rem 1.2rem !important;
	border: 0 !important;
	background: var(--wj-reak-surface) !important;
	box-shadow: none !important;
	font-weight: 600;
}

.wjReaktionenProfile .likeListMore .button:hover,
.wjReaktionenProfile .showMore .button:hover {
	background: var(--wj-reak-surface-strong) !important;
}

/* Kill nested gray button-group chrome from the core styles */
.wjReaktionenProfile .containerListButtonGroup,
.wjReaktionenProfile .buttonGroupNavigation,
.wjReaktionenProfile .wjReaktionenToolbar .buttonGroup {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

@media (max-width: 500px) {
	.wjReaktionenSegment {
		width: 100%;
	}

	.wjReaktionenProfile .wjReaktionenSegmentBtn.button,
	.wjReaktionenProfile #likeType .button {
		flex: 1;
	}
}