.chat-heading {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.5em;

	h1 {
		margin: 0 0 0.25em;
	}

	p {
		margin: 0;
	}

	&-actions {
		display: inline-flex;
		align-items: center;
		gap: 0.25em;
	}
}

.chat-heading-button {
	display: inline-flex;
	box-shadow: none;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	cursor: pointer;
	color: inherit;
	padding: 0.25em;
	border-radius: 999px;
	transition:
		color var(--chat--transition-duration, 0.15s) ease,
		background-color var(--chat--transition-duration, 0.15s) ease;

	&:focus-visible {
		outline-offset: 2px;
	}
}

.chat-new-button {
	@extend .chat-heading-button;
	color: var(--chat--new-button--color, var(--chat--color-light));
	background-color: var(--chat--new-button--background, transparent);

	&:hover {
		color: var(--chat--new-button--color-hover, var(--chat--color-white));
		background-color: var(
			--chat--new-button--background-hover,
			rgba(255, 255, 255, 0.2)
		);
	}

	&:focus-visible {
		outline: 2px solid
			var(--chat--new-button--color-hover, var(--chat--color-white));
	}
}

.chat-close-button {
	@extend .chat-heading-button;
	color: var(--chat--close--button--color, inherit);

	&:hover {
		color: var(
			--chat--close--button--color-hover,
			var(--chat--color-white)
		);
		background-color: var(
			--chat--close--button--background-hover,
			rgba(255, 255, 255, 0.1)
		);
	}

	&:focus-visible {
		outline: 2px solid
			var(--chat--close--button--color-hover, var(--chat--color--primary));
	}
}