/**
 * Pizzapatrullen
 *
 * Rating Badge
 *
 * Foundation UI 3.2
 */


/*
|--------------------------------------------------------------------------
| Stor badge – recensionens huvudsida
|--------------------------------------------------------------------------
*/

.pp-rating-badge--hero {

	position: absolute;
	top: 22px;
	right: 22px;

	display: inline-flex;
	align-items: center;
	gap: 5px;

	padding: 8px 14px;

	background: #ffffff;

	border: 2px solid rgba(0,0,0,.08);

	border-radius: 999px;

	box-shadow: 0 8px 18px rgba(0,0,0,.18);

	white-space: nowrap;

	overflow: hidden;

	z-index: 20;

	transition:
		transform .20s ease,
		box-shadow .20s ease;
}


/*
|--------------------------------------------------------------------------
| Hover – stor badge
|--------------------------------------------------------------------------
*/

.pp-rating-badge--hero:hover {

	transform: translateY(-2px);

	box-shadow: 0 12px 24px rgba(0,0,0,.22);
}


/*
|--------------------------------------------------------------------------
| Ikon – stor badge
|--------------------------------------------------------------------------
*/

.pp-rating-badge--hero img {

	width: 28px !important;
	height: 28px !important;

	min-width: 28px;
	min-height: 28px;

	max-width: 28px !important;
	max-height: 28px !important;

	display: block;

	object-fit: contain;

	flex: 0 0 28px;
}


/*
|--------------------------------------------------------------------------
| Text – stor badge
|--------------------------------------------------------------------------
*/

.pp-rating-badge__value {

	font-size: 17px;

	font-weight: 700;

	line-height: 1;

	color: #222;

	letter-spacing: -.02em;
}


/*
|--------------------------------------------------------------------------
| Liten badge – listningar
|--------------------------------------------------------------------------
|
| Används för exempelvis:
| Ceris – Posts Listing Grid A
|
*/

.pp-rating-badge--listing {

	position: absolute;

	top: 10px;
	right: 10px;

	display: inline-flex;

	align-items: center;

	gap: 4px;

	margin: 0;

	padding: 4px 8px;

	background: #ffffff;

	border: 1px solid rgba(0,0,0,.10);

	border-radius: 999px;

	box-shadow: 0 3px 8px rgba(0,0,0,.14);

	white-space: nowrap;

	line-height: 1;

	z-index: 20;
}


/*
|--------------------------------------------------------------------------
| Ikon – liten badge
|--------------------------------------------------------------------------
*/

.pp-rating-badge--listing img {

	width: 18px !important;
	height: 18px !important;

	min-width: 18px;
	min-height: 18px;

	max-width: 18px !important;
	max-height: 18px !important;

	display: block;

	object-fit: contain;

	flex: 0 0 18px;
}


/*
|--------------------------------------------------------------------------
| Text – liten badge
|--------------------------------------------------------------------------
*/

.pp-rating-badge--listing .pp-rating-badge__value {

	font-size: 13px;

	font-weight: 700;

	line-height: 1;

	color: #333;

	letter-spacing: -.01em;
}