/**
 * Compact 4-cell pad used in box border / border-radius popovers.
 * Frame: ~150×64 rectangle with 28×28 square toggles.
 * --corners: TL / TR / BL / BR at frame corners
 * --edges:   T / L / R / B at frame mid-edges
 */

.bm-box-sides-pad {
	position: relative;
	box-sizing: border-box;
	width: 150px;
	height: 84px;
	margin: 0 auto;
	padding: 0;
	border: 1px solid var(--bm-f-outline-variant, rgba(119, 117, 135, 0.4));
	border-radius: 6px;
	background: var(--bm-f-surface-low, #f2f3ff);
}

.bm-box-sides-pad__cell {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	z-index: 1;
	box-sizing: border-box;
	/* Beat wp-admin / app button resets (height:auto !important, min-height). */
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	min-height: 28px !important;
	max-width: 28px !important;
	max-height: 28px !important;
	aspect-ratio: 1 / 1;
	flex: 0 0 28px;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--bm-f-outline-variant, rgba(119, 117, 135, 0.45));
	border-radius: 4px;
	background: var(--bm-f-surface, #fff);
	color: var(--bm-f-on-surface-variant, #646970);
	font-size: 9px !important;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1 !important;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		border-color 0.12s ease,
		background 0.12s ease,
		color 0.12s ease;
}

.bm-box-sides-pad__cell:hover {
	border-color: color-mix(in srgb, var(--bm-f-primary, #3525cd) 55%, transparent);
	color: var(--bm-f-primary, #3525cd);
}

.bm-box-sides-pad__cell.is-on {
	border-color: var(--bm-f-primary, #3525cd);
	background: color-mix(in srgb, var(--bm-f-primary, #3525cd) 10%, transparent);
	color: var(--bm-f-primary, #3525cd);
}

.bm-box-sides-pad__preview {
	position: absolute;
	inset: 0;
	z-index: 0;
	box-sizing: border-box;
	pointer-events: none;
	background: color-mix(in srgb, var(--bm-f-surface-low, #f2f3ff) 70%, #fff);
	border: 0;
}

/* Corners: TL TR / BL BR */
.bm-box-sides-pad--corners .bm-box-sides-pad__cell--topLeft {
	top: 4px;
	left: 4px;
}

.bm-box-sides-pad--corners .bm-box-sides-pad__cell--topRight {
	top: 4px;
	right: 4px;
}

.bm-box-sides-pad--corners .bm-box-sides-pad__cell--bottomLeft {
	bottom: 4px;
	left: 4px;
}

.bm-box-sides-pad--corners .bm-box-sides-pad__cell--bottomRight {
	bottom: 4px;
	right: 4px;
}

/* Edges: T / L ■ R / B */
.bm-box-sides-pad--edges .bm-box-sides-pad__cell--top {
	top: 4px;
	left: 50%;
	transform: translateX(-50%);
}

.bm-box-sides-pad--edges .bm-box-sides-pad__cell--left {
	top: 50%;
	left: 4px;
	transform: translateY(-50%);
}

.bm-box-sides-pad--edges .bm-box-sides-pad__cell--right {
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
}

.bm-box-sides-pad--edges .bm-box-sides-pad__cell--bottom {
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
}

.bm-box-sides-pad--edges .bm-box-sides-pad__preview {
	inset: 10px 36px;
	border-radius: 3px;
	border: 1px solid var(--bm-f-outline-variant, rgba(119, 117, 135, 0.35));
	background: var(--bm-f-surface, #fff);
}
