.buttonGroup {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	gap: 10px;
}

/* Gemeinsame Stile für icon-button und viewButtonContainer button */
.icon-button,
.viewButtonContainer button {
	display: flex;
	align-items: center;
	padding: 2px;
	transition: background-color 0.125s ease-in-out;
	border: none;
	background-color: var(--background-color);
	color: var(--app-font-color);
}

.icon-button:hover,
.viewButtonContainer button:hover {
	cursor: pointer;
	background-color: var(--gray-tertiary);
}

.icon-button:disabled,
.viewButtonContainer button:disabled {
	cursor: not-allowed;
	opacity: 0.5;
	color: var(--gray-primary) !important;
}

.viewButtonContainer {
	z-index: 3;
	border: 2px hidden;
	box-shadow: 0 1px 4px var(--gray-secondary);
	background-color: var(--background-color);
	justify-content: center;
	align-items: center;
	height: 32px;
	font-size: 14px;
	display: flex;
	gap: 2px;
	pointer-events: all;
	border-radius: 5px;
	transition: opacity 0.125s ease-in-out;

	& button {
		height: 32px;
		width: 32px;
		justify-content: center;
		border-radius: 5px;
	}

	& .switch {
		padding: 8px;
		gap: 8px;
		height: 100%;
		color: var(--app-font-color);
		width: 100%;
	}
}