.button {
	display: flex;
	align-items: center;
	gap: var(--component-spacing-sm);
	width: 100%;
	height: var(--size-control-medium);
	border: none;
	border-radius: var(--component-radii-md);
	padding: var(--component-spacing-sm);
	min-width: var(--size-control-medium);
	line-height: 1;
	cursor: pointer;
	background-color: transparent;
}

	.button:hover {
		background-color: var(--color-neutral-surface-minimal-hover-bg);
	}

.button-fit-content {
	width: -moz-fit-content;
	width: fit-content;
}

[data-sidebar-collapsed] .title,
[data-sidebar-collapsed] .subtext,
[data-sidebar-collapsed] .icon {
	opacity: 0;
}

.content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex-grow: 1;
	flex-shrink: 0;
	min-width: 0;
}

.title {
	color: var(--fg);
	transition: opacity 0.2s ease-in-out;
	font: var(--font-label-sm);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	flex-shrink: 0;
}

.subtext {
	color: var(--fg-subtle);
	font: var(--font-body-xs-default);
	transition: opacity 0.2s ease-in-out;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	flex-shrink: 0;
}

.avatar {
	flex-shrink: 0;
}

.icon {
	flex-shrink: 0;
	transition: opacity 0.2s ease-in-out;
}