/*
 * Rankly kategori-meny.
 *
 * Lägg klassen "rankly-category-menu" på huvudmenyposten som innehåller
 * kategoriernas undermeny. Kategoriernas slug-klasser skapas automatiskt i PHP.
 */

/* Hela rutan som öppnas. Rundningen styrs under Utseende > Kategorimeny. */
.rankly-category-menu > ul.sub-menu {
	border-radius: var(--rankly-menu-radius, 12px) !important;
	overflow: hidden !important;
}

.rankly-category-menu > ul.sub-menu > li.rankly-category-item > a {
	display: flex !important;
	align-items: center !important;
	gap: 15px !important;
	transition: background-color 0.3s ease, color 0.3s ease !important;
}

.rankly-category-menu > ul.sub-menu > li.rankly-category-item > a:hover,
.rankly-category-menu > ul.sub-menu > li.rankly-category-item:hover > a {
	background-color: var(--rankly-category-hover, #eeeeee) !important;
	color: #000000 !important;
}

.rankly-category-menu > ul.sub-menu > li.rankly-category-item.rankly-has-icon > a::before {
	content: "";
	display: inline-block !important;
	width: 30px !important;
	height: 30px !important;
	flex: 0 0 30px !important;
	background-image: var(--rankly-category-icon, none) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	transform: scale(1) !important;
	transform-origin: center center !important;
	transition: transform 0.25s ease !important;
}

.rankly-category-menu > ul.sub-menu > li.rankly-category-item.rankly-has-icon > a:hover::before,
.rankly-category-menu > ul.sub-menu > li.rankly-category-item.rankly-has-icon:hover > a::before {
	transform: scale(1.1) !important;
}

@media (min-width: 769px) {
	.rankly-category-menu > ul.sub-menu {
		min-width: 220px !important;
		max-width: min(300px, calc(100vw - 24px)) !important;
	}
}