.button {
	--box-shadow-inside: inset 0 -1px 2px rgba(0,0,0,0.08);
	--box-shadow-outside: 0 0 0 transparent;

	border: 1px solid rgba(0,0,0,0.15); border-radius: 4px;
	box-shadow: var(--box-shadow-inside), var(--box-shadow-outside);
	color: #000; background: #fff;

	position: relative;

	margin: 0; padding: 0.3em 0.5em;

	font-family: inherit; font-size: inherit; text-decoration: none;
}

.button_position_start { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: -1px; }
.button_position_middle { border-radius: 0; margin-right: -1px; }
.button_position_end { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.button:hover {
	--box-shadow-inside: inset 0 -1px 2px rgba(0,0,0,0.12);
	border-color: rgba(0,0,0,0.33);
	z-index: 3;
}
.button:focus {
	--box-shadow-inside: inset 0 -1px 2px rgba(0,0,0,0.08);
	--box-shadow-outside: 0 0 0 2px rgba(3,102,214,0.3);
	border-color: #2188ff;
	outline: 0;
	z-index: 4;
}
.button::-moz-focus-inner { border: 0; }

.button:focus:not(:focus-visible) {
	--box-shadow-outside: 0 0 0 transparent;
	border-color: rgba(0,0,0,0.33);
}

.button:active {
	--box-shadow-inside: inset 0 1px 3px rgba(27,31,35,0.3);
}

.button[aria-expanded=true],
.button[aria-pressed=true] { 
	background: rgba(0,0,0,0.16); 
	--box-shadow-inside: inset 0 1px 3px rgba(27,31,35,0.3); 
	z-index: 2;
}