.reader-join-conversation-dialog__overlay.dialog__backdrop {
	// Ensure z-index value is greater than gravatar hovercards, since their subscribe button can
	// trigger this.
	z-index: z-index('root', '.reader-join-conversation-dialog__overlay');
}

.reader-join-conversation-dialog {
	border-radius: 6px; /* stylelint-disable scales/radii */
	width: 321px;

	.dialog__action-buttons-close {
		padding: 24px;
	}

	.dialog__content {
		padding: 24px 32px;
	}
}

.reader-join-conversation-dialog__content {
	width: 257px;
	display: flex;
	flex-direction: column;
	align-items: center;

	h1 {
		color: var(--color-neutral-70);
		font-size: 1.25rem;
		font-weight: 600;
		margin-bottom: 9px;
	}

	p {
		font-size: 1rem;
		text-align: center;
	}

	svg.wordpress-logo {
		fill: var(--color-neutral-70);
	}

	button.components-button.is-primary {
		background-color: var(--studio-blue-50);
		border-color: var(--studio-blue-50);

		&:active:not(:disabled),
		&:hover:not(:disabled),
		&:focus:not(:disabled) {
			background-color: var(--studio-blue-60);
			border-color: var(--studio-blue-60);
		}
	}

	button.components-button.is-link {
		padding: 20px 0 6px 0;
		color: var(--studio-blue-90);

		&:hover:not(:disabled) {
			color: var(--studio-blue-50);
		}
	}

	hr.spinner-line {
		width: 80%;
		margin: 12px 0;
		height: 12px;
		border-radius: 3px;
	}
}

@media only screen and (max-width: 600px) {
	.reader-join-conversation-dialog__content {
		width: 100%;
	}
}

.dialog__backdrop,
.dialog__backdrop.card {
	background-color: color-mix(in srgb, var(--color-neutral-70) 80%, transparent) !important;
}
