.pillbuttongroup {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1;
}

.pillbuttongroup button {
	appearance: none;
	background: var(--background-secondary);
	border: 2px solid var(--background-secondary);
	border-radius: 2rem;
	color: var(--color-default);
	font-size: var(--size-default);
	line-height: 1.75;
	margin-bottom: var(--spacing-half);
	margin-left: var(--spacing-half);
}

.pillbuttongroup.medium button {
	padding: 0 calc(var(--spacing-default) * .75);
}

.pillbuttongroup.large button {
	font-size: calc(var(--size-default) + 1px);
	padding: 2px calc(var(--spacing-default) * 1.5);
}

.pillbuttongroup button:first-child {
	margin-left: 0;
}

.pillbuttongroup button:hover:not([disabled]) {
	cursor: pointer;
}

.pillbuttongroup button:hover:is([disabled]) {
	cursor: not-allowed;
}

.pillbuttongroup button:focus {
	border: 2px solid var(--color-blue);
	outline: none;
}

.pillbuttongroup button.active {
	background: var(--color-blue);
	border-color: var(--color-blue);
	color: var(--color-alt);
}

.pillbuttongroup button[disabled] {
	background: var(--background-quaternary);
	border-color: var(--background-quaternary);
	color: var(--color-alt);
}

:global(.dark-mode) .pillbuttongroup button[disabled] {
	background: var(--background-secondary);
	border-color: var(--background-secondary);
	color: var(--color-disabled);
}

@media (max-width: 768px) {
	.pillbuttongroup.lg button {
		font-size: calc(var(--size-default));
		padding: 2px calc(var(--spacing-default) * 1.25);
	}	
}