/* DB Store Directory v1.1.0
 * The look comes from the global .store-directory and .store-directory-sub-menu rules
 * in styles.css (already tokenized). .view-small hides it at 768px and up.
 * This file makes the toggle button look like the old text row and adds a focus ring.
 */

/* Button styled like the old "Store Directory" text row */
.db-store-directory .db-store-directory__toggle {
	position: relative;
	display: block;
	width: 100%;
	min-height: 24px;
	margin: 0;
	padding: 0 30px 0 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.db-store-directory .db-store-directory__toggle:focus { outline: none; }
.db-store-directory .db-store-directory__toggle:focus-visible {
	outline: 2px solid var(--color-focus, #c32b2a);
	outline-offset: 4px;
}

/* +/- icon on the right of the row, centered at any text size */
.db-store-directory .db-store-directory__icon {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}