/* PreviewTextInput */
.wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;

	background-color: light-dark(var(--mantine-color-background-0), var(--mantine-color-background-4));
	border-bottom: light-dark(1px solid var(--mantine-color-border-0), 1px solid var(--mantine-color-border-1));
	border-left: light-dark(1px solid var(--mantine-color-border-0), 1px solid var(--mantine-color-border-1));
	border-right: light-dark(1px solid var(--mantine-color-border-0), 1px solid var(--mantine-color-border-1));

	&:focus-within {
		border-bottom-color: var(--mantine-color-purple);
	}

	@media (--lt-md) {
		border-right: none;
	}

	@media (--lt-sm) {
		display: none;
	}
}

.button {
	padding: 2px 16px;
	height: 40px;

	font-weight: 400;

	color: light-dark(var(--mantine-color-text-1), var(--mantine-color-text-0));
	background-color: light-dark(var(--mantine-color-background-0), var(--mantine-color-background-4));

	&:hover {
		color: light-dark(var(--mantine-color-text-1), var(--mantine-color-text-0));
		background-color: light-dark(var(--mantine-color-purple-hover), var(--mantine-color-background-6));
	}
}

.separator {
	box-sizing: border-box;
	text-align: left;
	width: 100%;
	padding: 0 2px;
}

.separator-label {
	color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
}
