@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";

.team-list {
	.hosting-dashboard-layout__body {
		margin-block-end: 16px;

		@include break-medium {
			padding-block-start: 32px;
		}
	}

	.dataviews__view-actions {
		display: none;
	}

	.hosting-dashboard-layout__navigation-wrapper {
		margin-block-end: 16px;
		max-width: 100%;

		@include break-medium {
			margin-block-end: 0;
		}
	}

	.dataviews-view-table__row td:last-child {
		text-align: right;
		padding: 16px 48px;

	}
}


.team-list__member-column {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;

	.team-list__status-badge {
		margin-block-start: 4px;
		text-align: center;
	}
}

.team-list__member-column-gravatar {
	border-radius: 4px;
}

.team-list__member-column-details {
	display: flex;
	flex-direction: column;
}

.team-list__member-column-details-name {
	@include heading-medium;
}

.team-list__member-column-details-email {
	@include body-small;
	color: var(--color-neutral-70);
}

.team-list__status-badge {
	@include body-small;

	&.badge--warning {
		color: var(--color-warning-50);
		background-color: var(--color-warning-0);
	}

	&.badge--error {
		color: var(--color-error-50);
		background-color: var(--color-error-0);
	}
}

.team-list__actions-column {
	display: flex;
	align-items: flex-end;
}

.team-list__action-menu-item.is-danger {
	color: var(--color-error);
}

.team-list__action-button {
	padding: 0;
}
