/* Breakdance Photo Credits — badge + tooltip. */

.pc-host {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	font-size: 0;
}

.pc-badge {
	position: absolute;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--pc-size, 22px);
	height: var(--pc-size, 22px);
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: var(--pc-radius, 50%);
	background: var(--pc-bg, rgba(0, 0, 0, 0.6));
	color: var(--pc-color, #fff);
	opacity: var(--pc-opacity, 1);
	font-family: inherit;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.15s ease;
	box-sizing: border-box;
}

.pc-badge:hover,
.pc-badge:focus-visible {
	opacity: 1;
	transform: scale(1.08);
}

.pc-icon {
	font-size: calc(var(--pc-size, 22px) * 0.6);
	pointer-events: none;
}

/* Corner placement driven by data-pos. */
.pc-badge[data-pos="bottom-right"] {
	bottom: var(--pc-inset-y, 10px);
	right: var(--pc-inset-x, 10px);
}
.pc-badge[data-pos="bottom-left"] {
	bottom: var(--pc-inset-y, 10px);
	left: var(--pc-inset-x, 10px);
}
.pc-badge[data-pos="top-right"] {
	top: var(--pc-inset-y, 10px);
	right: var(--pc-inset-x, 10px);
}
.pc-badge[data-pos="top-left"] {
	top: var(--pc-inset-y, 10px);
	left: var(--pc-inset-x, 10px);
}

/* Tooltip. */
.pc-tip {
	position: absolute;
	z-index: 21;
	max-width: 240px;
	width: max-content;
	padding: 6px 9px;
	border-radius: 4px;
	background: var(--pc-tip-bg, rgba(0, 0, 0, 0.85));
	color: var(--pc-tip-color, #fff);
	font-family: inherit;
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.35;
	white-space: normal;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

/* Anchor the tooltip away from the nearest edges based on corner. */
.pc-badge[data-pos="bottom-right"] .pc-tip,
.pc-badge[data-pos="top-right"] .pc-tip {
	right: 0;
}
.pc-badge[data-pos="bottom-left"] .pc-tip,
.pc-badge[data-pos="top-left"] .pc-tip {
	left: 0;
}
.pc-badge[data-pos="bottom-right"] .pc-tip,
.pc-badge[data-pos="bottom-left"] .pc-tip {
	bottom: calc(100% + 8px);
}
.pc-badge[data-pos="top-right"] .pc-tip,
.pc-badge[data-pos="top-left"] .pc-tip {
	top: calc(100% + 8px);
}

.pc-badge:hover .pc-tip,
.pc-badge:focus-within .pc-tip,
.pc-badge.pc-open .pc-tip {
	opacity: 1;
	visibility: visible;
}