/* ========================================
   Generic button + panel dropdown.
   Pairs with assets/js/frontend/bc-dropdown.js.

   Usage:
     <div class="bc-dropdown" data-dropdown>
       <button type="button" class="bc-dropdown__trigger" data-dropdown-trigger>Label</button>
       <div class="bc-dropdown__panel" data-dropdown-panel hidden>
         <a data-dropdown-option href="...">Option A</a>
       </div>
     </div>
======================================== */

.bc-dropdown {
	position: relative;
}

.bc-dropdown__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.bc-dropdown__trigger::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.25em;
	font-weight: 550;
	line-height: 1;
}

.bc-dropdown.is-open > .bc-dropdown__trigger::after {
	content: "\2212";
}

.bc-dropdown__panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	min-width: 100%;
	margin-top: 8px;
	padding: 12px;
	background: var(--body-background-color);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	box-shadow: var(--box-shadow);
}