/*
 * Olejki.app - badge produktowe.
 *
 * Wszystkie klasy mają przedrostek `olbg-`, bo Flatsome ma własne `.badge`,
 * `.box` i `.label`. Kolor i rozmiar pojedynczego badge idą stylem w atrybucie,
 * tutaj są tylko reguły wspólne.
 */

.olbg-warstwa {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 20;
	pointer-events: none;
	overflow: hidden;
	--olbg-odstep: var(--olbg-odstep-baza, 8px);
	--olbg-skala: 1;
}

/* Rodzic dostaje tę klasę ze skryptu, gdy sam nie ma ustawionego position. */
.olbg-rodzic {
	position: relative;
}

.olbg-grupa {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: calc(100% - 2 * var(--olbg-odstep));
}

.olbg-grupa--gora-lewo {
	top: var(--olbg-odstep);
	left: var(--olbg-odstep);
	align-items: flex-start;
}

.olbg-grupa--gora-prawo {
	top: var(--olbg-odstep);
	right: var(--olbg-odstep);
	align-items: flex-end;
}

.olbg-grupa--dol-lewo {
	bottom: var(--olbg-odstep);
	left: var(--olbg-odstep);
	align-items: flex-start;
}

.olbg-grupa--dol-prawo {
	bottom: var(--olbg-odstep);
	right: var(--olbg-odstep);
	align-items: flex-end;
}

/* Przy dolnych rogach kolejność w kolumnie liczy się od dołu, */
/* żeby pierwszy badge zawsze leżał najbliżej krawędzi zdjęcia. */
.olbg-grupa--dol-lewo,
.olbg-grupa--dol-prawo {
	flex-direction: column-reverse;
}

.olbg-pigulka {
	display: inline-block;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.28em 0.75em;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: calc(var(--olbg-rozmiar, 12px) * var(--olbg-skala));
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-align: center;
	text-transform: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}

.olbg-pigulka--obramowanie,
.olbg-pigulka--obramowanie-biale {
	border-width: 1.5px;
	font-weight: 700;
}

/* Na telefonie badge schodzi do ustawionego procentu, żeby nie zasłonił zdjęcia. */
@media (max-width: 549px) {
	.olbg-warstwa {
		--olbg-skala: var(--olbg-skala-telefon, 0.85);
		--olbg-odstep: calc(var(--olbg-odstep-baza, 8px) * 0.75);
	}

	.olbg-grupa {
		gap: 3px;
	}
}