@import "./variables";

.post-likes {
	font-size: $font-body-small;

	.post-likes__item {
		display: inline-block;
		vertical-align: top;
		text-decoration: none;
		padding: $post-like-padding;

		.gravatar {
			display: block;
		}
	}

	&.has-display-names {
		max-height: 340px;
		overflow-y: auto;

		.post-likes__item {
			display: flex;
			align-items: center;
			justify-content: start;
			position: relative;
			padding: 4px 8px;
			border-bottom: 1px solid var(--color-neutral-0);

			&:last-child {
				border-bottom-width: 0;
			}
		}

		.post-likes__display-name {
			display: block;
			line-height: 24px;
			padding-left: 4px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.post-likes__count:not(.is-loading) {
			margin: 12px 16px 12px 32px;
		}
	}

	.post-likes__count {
		vertical-align: top;
		margin: 6px 8px 4px 4px;
		line-height: 14px;
		border-radius: 12px; /* stylelint-disable-line scales/radii */
		display: inline-block;
		border: solid 1px var(--color-neutral-light);
		color: var(--color-text-subtle);
		padding: 1px 6px;
		font-weight: 600;
		font-size: $font-body-extra-small;

		&.is-loading {
			border-color: transparent;
			@include placeholder();
			margin: 5px;
		}
	}
}
