.activitypub-follow-me-block-wrapper {
	width: 100%;

	// extra side padding for border/background colors
	&.has-border-color, &.has-background {
		.activitypub-profile {
			padding-left: 1rem;
			padding-right: 1rem;
		}
	}

	.activitypub-profile {

		display: flex;
		align-items: center;
		// right/left padding overridden above for border/background colors
		padding: 1rem 0;

		.activitypub-profile__avatar {
			height: 75px;
			width: 75px;
			margin-right: 1rem;
			border-radius: 50%;
		}
		.activitypub-profile__content {
			flex: 1;
			min-width: 0;
		}
		.activitypub-profile__name, .activitypub-profile__handle {
			margin: 0;
			line-height: 1.2;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.activitypub-profile__name {
			font-size: 1.25em;
		}
		.activitypub-profile__follow {
			margin-left: 1rem;
			align-self: center;
			background-color: var(--wp--preset--color--black);
			color: var(--wp--preset--color--white);
		}
	}
}

.activitypub-profile__confirm.components-modal__frame {
	// @todo: play more nicely with dark background themes. the dialog is hardcoded to white bg in core, we go #eee here.
	color: #333;
	background-color: #f7f7f7;
	.components-modal__header-heading, h4 {
		color: #333;
		// resets against potential theme weirdness
		letter-spacing: inherit;
		word-spacing: inherit;
	}
}

.activitypub-follow-me__dialog {
	max-width: 30em;
	h4 {
		line-height: 1;
		margin: 0;
	}
	.apmfd__section {
		margin-bottom: 2em;
	}
	.apfmd-description {
		font-size: var( --wp--preset--font-size--normal, .75rem );
		margin: 0.33em 0 1em;
	}
	.apfmd__button-group {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;

		svg {
			margin-right: .5em;
			height: 21px;
			width: 21px;
		}

		input {
			flex: 1;
			padding: 6px 12px;
			background-color: var( --wp--preset--color--white );
			color: var( --wp--preset--color--black );
			border: 1px solid var( --wp--preset--color--black );
		}

	}
}
