.people-list-item.card.is-compact {
	border-bottom: 1px solid var(--color-neutral-0);
	box-shadow: none;
	display: flex;
	overflow: hidden;
	position: relative;

	@include breakpoint-deprecated( ">480px" ) {
		padding: 24px;
	}

	&:last-of-type {
		border-bottom: none;
	}

	&:focus {
		outline: 2px solid var(--color-primary-light);
		z-index: z-index("root", ".people-list-item.card.is-compact:focus");
	}
}

.people-list-item__profile-container {
	display: block;
	flex-grow: 1;
	overflow: hidden;
}

.people-list-item__actions {
	align-self: center;
	display: block;
	flex-grow: 0;
	flex-shrink: 0;
}

.people-list-item .card__link-indicator {
	z-index: z-index("root", ".people-list-item .card__link-indicator");
}

.people-list-item.is-invite .people-profile__username {
	@include breakpoint-deprecated( ">480px" ) {
		font-size: $font-title-small;
	}
}

.people-list-item.is-invite-details {
	// Make extra space for invite status on small screens
	@include breakpoint-deprecated( "<480px" ) {
		padding-bottom: 34px;
	}
}

.people-list-item__invite-status {
	align-self: center;
	flex-shrink: 0;
	position: relative;

	&:not(.is-invite-details) {
		// Get out of the way of the link to the invite details page
		margin-right: 30px;

		// Hide on small screens
		@include breakpoint-deprecated( "<480px" ) {
			display: none;
		}
	}

	&.is-invite-details {
		// Show below the name and role on small screens
		@include breakpoint-deprecated( "<480px" ) {
			bottom: 4px;
			margin-left: 80px;
		}
	}

	color: var(--color-success);

	&.is-pending {
		color: var(--color-text-subtle);
		margin-left: 0;
	}

	.gridicon {
		vertical-align: text-bottom;
		margin-right: 4px;
	}
}

.people-list-item__invite-resend.button,
.people-list-item__invite-revoke.button {
	vertical-align: baseline;

	&.is-success {
		background-color: var(--color-neutral-0);
		border: 0;
		color: var(--color-neutral-70);
		cursor: default;
	}
}

.people-list-item__invite-resend.button {
	margin-right: 0.75rem;
}
