.multibutton {
	display: flex;
	flex-direction: column;
	gap: 0;
/* 	padding: .75rem 1rem; */
	
	.label, .dropdown {
		font-size: inherit;
		line-height: 1.3;
		margin: 0;
	}
	.label, .dropdown a {
		padding: 1rem 1.25rem;
	}
	.label {
		padding-inline-start: 0;
	}
	
	.dropdown {
		position: relative;
	}
	
	.button {
		display: block;
		background-color: var( --clarku-color-yellow, #f7d144 );
		width: fit-content;
	}
	.button::after {
		content: "▾";
		display: inline-block;
		height: 1.3em;
		transition: transform .2s ease;
		text-align: center;
		width: 1.3em;
	}
	.button[aria-expanded="true"]::after {
		transform: rotateX(180deg);
	}
	
	.button, a {
		color: var( --clarku-color-true-black, #000 );
		text-decoration: none;
	}
	
	.options {
		background-color: var( --clarku-color-background, #fafafa );
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 0;
		left: 0;
		width: fit-content;
		a {
			display: block;
			text-wrap: nowrap;
			transition: background-color .2s ease;
		}
		a + a {
			border-block-start: 1px solid var( --clarku-color-gray-200, #d8d8d8 );
		}
		a:hover,
		a.selected {
			background-color: var( --clarku-color-yellow, #f7d144 );
		}
	}
	.options {
		display: none;
	}
	.options.shown {
		display: flex;
		z-index: 11;
	}
}

@media all and (min-width: 380px) {
	.multibutton {
		flex-direction: row;
		.button {
			width: calc( 100% + 3rem );
		}
		.button::after {
			float: right;
		}
	}
}