:root {
	/* Colors */
	--white: #fff;
	--gray-lightest: #fafafa;
	--gray-lighter: #f5f5f5;
	--gray-opaque-light: rgba(0, 0, 0, 0.05);
	--gray-opaque: rgba(0, 0, 0, 0.1);
	--gray-light: #e5e5e5;
	--gray: #ccc;
	--gray-dark: #959595;
	--gray-darkest: #595959;
	--black: #333;
	--black-dark: #262626;

	--blue-300: #004172;
	--blue-200: #005799;
	--blue-100: #0076bc;
	--blue-80: #1d8ec6;
	--blue-60: #4aa8d2;
	--blue-40: #7cc3e0;
	--blue-20: #addbee;
	--blue-10: #dbeff8;
	--blue-5: #f2fafc;
	--dark-blue: #3f5564;
	--dark-blue-light: #e3e8e9;
	--dark-blue-lightest: #f5f7f8;

	--action-green-dark: #004d38;
	--action-green: #00664a;
	--green: #008767;
	--green-light: #dbede2;
	--green-lightest: #f0f9f3;

	--yellow: #ffcd37;
	--action-yellow: #ffd23c;
	--action-yellow-dark: #ddb42a;
	--yellow-light: #fff2b0;
	--yellow-lightest: #fffcef;

	--action-red-dark: #83161c;
	--action-red: #ad1d24;
	--red: #d24723;
	--red-light: #fde3d6;
	--red-lightest: #fef5f1;

	--pink: #d53878;
	--pink-light: #fbe1ec;
	--pink-lightest: #fdf4f8;

	--purple: #674a99;
	--purple-light: #ece2f1;
	--purple-lightest: #f6f1f9;

	--turquoise: #008391;
	--turquoise-light: #d6ebed;
	--turquoise-lightest: #f2f9fa;

	--focus-outline: 0.1875rem dotted var(--black);
	--focus-outline-white: 0.1875rem dotted var(--white);
	--overlay: rgba(255, 255, 255, 0.85);

	/* SVG checkmark clip-path (used in checkboxes & cookie banner) */
	--check-clip: polygon(78.5% 38.5%, 46.5% 70.5%, 46.5% 70.5%, 46.172% 70.799%, 45.792% 71.092%, 45.371% 71.373%, 44.916% 71.636%, 44.438% 71.875%, 43.944% 72.084%, 43.445% 72.257%, 42.948% 72.388%, 42.464% 72.471%, 42% 72.5%, 42% 72.5%, 41.537% 72.485%, 41.052% 72.436%, 40.556% 72.352%, 40.056% 72.228%, 39.563% 72.063%, 39.084% 71.852%, 38.63% 71.594%, 38.208% 71.284%, 37.829% 70.921%, 37.5% 70.5%, 21.5% 54.5%, 21.5% 54.5%, 20.825% 53.708%, 20.3% 52.844%, 19.925% 51.926%, 19.7% 50.972%, 19.625% 50%, 19.7% 49.028%, 19.925% 48.074%, 20.3% 47.156%, 20.825% 46.292%, 21.5% 45.5%, 21.5% 45.5%, 22.292% 44.825%, 23.156% 44.3%, 24.074% 43.925%, 25.028% 43.7%, 26% 43.625%, 26.972% 43.7%, 27.926% 43.925%, 28.844% 44.3%, 29.708% 44.825%, 30.5% 45.5%, 42% 57%, 69.5% 29.5%, 69.5% 29.5%, 70.292% 28.825%, 71.156% 28.3%, 72.074% 27.925%, 73.028% 27.7%, 74% 27.625%, 74.972% 27.7%, 75.926% 27.925%, 76.844% 28.3%, 77.708% 28.825%, 78.5% 29.5%, 78.5% 29.5%, 78.5% 29.5%, 78.5% 29.5%, 78.5% 29.5%, 78.5% 29.5%, 78.5% 29.5%, 78.5% 29.5%, 78.5% 29.5%, 78.5% 29.5%, 78.5% 29.5%, 78.5% 29.5%, 78.5% 29.5%, 79.175% 30.292%, 79.7% 31.156%, 80.075% 32.074%, 80.3% 33.028%, 80.375% 34%, 80.3% 34.972%, 80.075% 35.926%, 79.7% 36.844%, 79.175% 37.708%, 78.5% 38.5%);


	--sm: 40rem;
	--md: 48rem;
	--lg: 64rem;
	--xl: 80rem;
	--xxl: 96rem;
}

/* Global reset & typography */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

@font-face {
	font-family: "Open Sans";
	src: local("Open Sans"), url("./assets/fonts/OpenSans.ttf") format("truetype");
	font-weight: 100 900;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		interpolate-size: allow-keywords;
	}
}

html {
	scroll-behavior: smooth;
	font-size: 16px;
	font-family: "Open Sans", sans-serif;
	color: var(--black);
}

body {
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	color: inherit;
	font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}


ul {
	list-style-type: none;
	padding-inline-start: 0;
}

/* Typography */
h1 {
	font-size: 2rem;
	line-height: 2.5rem;
	font-weight: 800;

	@media (width >=64rem) {
		font-size: 3rem;
		line-height: 3.5rem;

		.hero & {
			font-size: 3rem;
			line-height: 3.5rem;
		}
	}
}

h2 {
	font-size: 1.5rem;
	line-height: 2rem;
}

h3 {
	font-size: 1.125rem;
	line-height: 1.75rem;
}

/* Link */
a {
	text-decoration: none;
	color: inherit;

	&:focus-visible {
		outline: var(--focus-outline);
	}
}

a.link,
.breadcrumbs a,
.menu a,
.cookie-dialog a {
	color: var(--blue-100);
	text-decoration: underline;
	text-underline-offset: 0.25rem;

	&:hover {
		color: var(--blue-200);
		text-decoration: underline;
	}

	&:active {
		color: var(--blue-300);
	}

	&:focus-visible {
		outline: var(--focus-outline);
	}
}

/* Header */
header {
	display: flex;
	align-items: center;
	padding-left: 1rem;
	border-bottom: 0.0625rem solid var(--gray-light);
	height: 4.5rem;


	.logo {
		height: 2.5rem;
	}
}

/* Breadcrumbs */
.breadcrumbs {

	:is([snippet="ResourceSearch"], [snippet="OrganisationSearch"]) & {
		display: none;
		/* Hide breadcrumbs on search pages on mobile */

		@media (width >=64rem) {
			display: block;
		}
	}

	ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		row-gap: 0.25rem;
		column-gap: 1rem;
		padding: 1rem 1rem 0 1rem;

		@media (width >=64rem) {
			padding: 1rem;
		}
	}

	li:last-child {
		color: var(--gray-darkest);
	}

	a {
		text-decoration: none;
		font-size: 0.875rem;
	}

	.icon {
		height: 0.625rem;
	}
}

/* Main content */
main {
	min-height: calc(100dvh - 38rem);
	max-width: 77rem;
	margin: 0 auto;

	&.narrow {
		max-width: 50rem;
	}
}

.narrow {

	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 2rem 0 0.5rem 0;

		&:first-child {
			margin-top: 0;
		}
	}

	p {
		margin-bottom: 1rem;
		line-height: 1.5rem;

		&:last-child {
			margin-bottom: 0;
		}
	}

	ul {
		list-style: unset;
		padding-inline-start: 2rem;
		margin: 1rem 0;
	}

	li {
		margin-bottom: 0.5rem;
	}
}

/* Section */
section {
	padding: 2rem 1rem;
}


/* Footer */
footer {
	margin-top: 3rem;
	background-color: var(--black-dark);
	color: var(--white);

	:is([snippet="ResourceSearch"], [snippet="OrganisationSearch"]) & {
		display: none;
		/* Hide footer on search pages on mobile */

		@media (width >=64rem) {
			display: block;
		}
	}

	section:last-child {
		border-top: 1px solid var(--black);

		div {
			width: 100%;
			max-width: 75rem;
			margin: 0 auto;
		}
	}

	h2 {
		padding-bottom: 0.25rem;
	}

	a {
		display: flex;
		align-items: center;
		min-height: 2.75rem;
		color: var(--white);
		text-decoration: underline;
		text-underline-offset: 0.25rem;
		overflow-wrap: anywhere;

		&:hover {
			color: var(--blue-5);
		}

		&:active {
			color: var(--blue-10);
		}

		&:focus-visible {
			outline: var(--focus-outline-white);
		}
	}

	img {
		margin: 0 0 1rem 0;
		height: 2.5rem;
	}
}

.footer-col {
	width: 100%;
	max-width: 75rem;
	margin: 0 auto;
}

/* Generic class, we should remove */
.row {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 1rem;
}

/*Split 50/50 section */
.section-group {
	display: flex;
	flex-direction: column;
	gap: 5rem;
	flex-wrap: wrap;

	@media (width >=64rem) {
		display: grid;
		gap: 1rem;
		grid-template-columns: 1fr 1fr;
	}
}

.section-sub {
	display: flex;
	flex-direction: column;
}

.map-single-location {
	border-radius: 1rem;
	border: 0.0625rem solid var(--gray-light);
	width: 100%;
	height: 24rem;
	overflow: hidden;

	#organisationmap,
	#resourcemap {
		width: 100%;
		height: 100%;
	}
}

/* Header for sections */
.section-header {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 1rem;
	padding-bottom: 1rem;

	h2,
	a {
		overflow-wrap: anywhere;
	}

	a {
		margin-left: auto;
		text-align: right;

		@media (width >=64rem) {
			margin-left: 0;
			text-align: left;
		}
	}
}

/* Buttons */
.cta {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.5rem;
	gap: 0.5rem;
	flex: 1;
	padding: 1rem 2rem 1rem 1rem;
	border-radius: 0.5rem;
	text-decoration: none;
	background-color: var(--blue-100);
	color: var(--white);
	font-weight: 600;
	white-space: nowrap;

	&:hover {
		background-color: var(--blue-200);
	}

	&:active {
		background-color: var(--blue-300);
	}

	.icon {
		height: 1.5rem;
		width: 1.5rem;
		min-width: 1.5rem;
	}
}

/* Homepage hero */
.hero {
	text-align: left;
	padding-top: 4rem;


	@media (width >=64rem) {
		text-align: center;
		padding-top: 5rem;
	}

	.row {
		flex-wrap: wrap;
		gap: 0.5rem;
		max-width: 38rem;
		margin: 0 auto;

		@media (width >=64rem) {
			padding: 0 0.5rem;
		}
	}

}

a:has(.map-preview) {
	&:hover {
		opacity: 0.75;
	}

	&:active {
		opacity: 0.5;
	}

	&:focus-visible .map-preview {
		outline: var(--focus-outline);
	}
}

.map-preview {
	border-radius: 1rem;
	min-height: 20rem;
	width: 100%;
	object-fit: cover;
	object-position: center;

	@media (width >=64rem) {
		min-height: unset;
		max-height: 22rem;
		width: 100%;
	}
}

.hgroup {

	:is(p, h1, h2, h3, h4, h5, h6, div, span):empty {
		display: none;
	}

	p {
		font-size: 1rem;
		line-height: 1.5rem;
		margin: 0;

		@media (width >=64rem) {
			font-size: 1.25rem;
			line-height: 2rem;
		}
	}

	.hero & {
		padding-bottom: 1rem;
		max-width: 38rem;
		margin: 0 auto;

		p {
			padding-top: 1rem;
			margin: 0;
		}
	}

	.hero-sub-page & {
		h1 {
			margin-bottom: 0.5rem;
		}
	}
}

.btn-group {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: center;
	padding-top: 1rem;
	max-width: 38rem;
	margin: 0 auto;
}

.gallery ul {
	position: relative;
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: safe center;
	overflow: auto;
	padding: 3rem 1rem 0 1rem;
	margin-left: -1rem;
	width: calc(100% + 2rem);
	z-index: 0;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;

	&::-webkit-scrollbar {
		display: none;
	}

	img {
		border-radius: 1rem;
		object-fit: cover;
		object-position: center;
		background-color: var(--gray-light);
		min-width: 10rem;

		@media (width >=64rem) {
			min-width: 14rem;
		}

	}

	li {

		&:nth-child(1) {
			z-index: 0;
		}

		&:nth-child(2) {
			z-index: 1;
		}

		&:nth-child(3) {
			z-index: 2;
		}

		&:nth-child(4) {
			z-index: 1;
		}

		&:nth-child(5) {
			z-index: 0;
		}

		@media (prefers-reduced-motion: no-preference) {
			img {
				animation: gallery-3 3s ease forwards;
			}
		}

		@media (prefers-reduced-motion: no-preference) and (width >=64rem) {
			img {
				animation: gallery-1 3s ease forwards;
			}

			&:nth-child(1) img {
				transform: translateX(200%) scale(0.5);
				transform-origin: left;
				animation-name: gallery-1;
			}

			&:nth-child(2) img {
				transform: translateX(125%) scale(0.5);
				transform-origin: left;
				animation-name: gallery-2;
			}

			&:nth-child(3) img {
				transform: scale(0.75);
				transform-origin: center;
				animation-name: gallery-3;
			}

			&:nth-child(4) img {
				transform: translateX(-125%) scale(0.5);
				transform-origin: right;
				animation-name: gallery-4;
			}

			&:nth-child(5) img {
				transform: translateX(-200%) scale(0.5);
				transform-origin: right;
				animation-name: gallery-5;
			}
		}
	}

	a:active {
		opacity: 0.8;
	}
}

@keyframes gallery-1 {
	from {
		transform: translateX(200%) scale(0.5);
	}

	to {
		transform: translateX(0) scale(1);
	}
}

@keyframes gallery-2 {
	from {
		transform: translateX(125%) scale(0.5);
	}

	to {
		transform: translateX(0) scale(1);
	}
}

@keyframes gallery-3 {
	from {
		transform: scale(0.75);
	}

	to {
		transform: scale(1);
	}
}

@keyframes gallery-4 {
	from {
		transform: translateX(-125%) scale(0.5);
	}

	to {
		transform: translateX(0) scale(1);
	}
}

@keyframes gallery-5 {
	from {
		transform: translateX(-200%) scale(0.5);
	}

	to {
		transform: translateX(0) scale(1);
	}
}

/* Subpage hero */
.hero-sub-page {
	padding: 1rem;
}

/* Cards component */
.cards {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	padding: 0 1rem;
	overflow-x: auto;
	margin-left: -1rem;
	width: calc(100% + 2rem);
	scroll-snap-type: x mandatory;

	&::-webkit-scrollbar {
		display: none;
	}

	@media (width >=64rem) {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		overflow: unset;
	}

	h1 {
		overflow-wrap: anywhere;
	}

	li {
		scroll-snap-align: center;

		&:first-child {
			scroll-snap-align: left;
		}

		&:last-child {
			scroll-snap-align: right;
		}
	}

	article {
		display: flex;
		height: 100%;
	}
}

.cards {

	li:only-child,
	li:only-child a {
		width: 100%;
	}

	a {
		display: flex;
		flex-direction: column;
		border: 0.0625rem solid var(--gray-light);
		border-radius: 1rem;
		text-decoration: none;
		color: var(--black);
		width: calc(100dvw - 6rem);
		outline-offset: -0.125rem;

		@media (width >=64rem) {
			width: 100%;
		}

		&:hover {
			color: var(--blue-100);
			border-color: var(--blue-100);
			background-color: var(--blue-5);
		}

		&:active {
			color: var(--blue-200);
			border-color: var(--blue-200);
			background-color: var(--blue-10);
		}

		&:focus-visible {
			outline: var(--focus-outline);
		}
	}

	img {
		object-fit: cover;
		object-position: center;
		background-color: var(--gray-lightest);
		overflow: hidden;
		position: relative;

		&[src$="imageid=D"]::after,
		&[src$="imageid=F"]::after,
		&[src$="imageid=O"]::after,
		&[src$="imageid=R"]::after {
			content: '';
			height: calc(100% + 0.25rem);
			width: calc(100% + 0.25rem);
			position: absolute;
			inset: -0.125rem;
			background-color: var(--gray-lightest);
			background-repeat: no-repeat;
			background-position: center;
		}

		.org & {
			width: 3rem;
			height: 3rem;
			min-width: 3rem;
			min-height: 3rem;
			border-radius: 99rem;
			margin: 1rem 0 0 1rem;
			border: 0.0625rem solid var(--gray-light);

			&.placeholder {
				object-fit: none;
			}

			&::after {
				background-image: url(./assets/icons/shield-halved-gray.svg);
				background-size: 2rem 2rem;
			}
		}

		.resource & {
			width: 100%;
			min-height: 9rem;
			height: 9rem;
			border-radius: 1rem 1rem 0 0;
			border-bottom: 0.0625rem solid var(--gray-light);

			&.placeholder {
				object-fit: contain;
			}

			&::after {
				background-image: url(./assets/icons/court-sport-gray.svg);
				background-size: 3rem 3rem;
			}
		}
	}

	h1 {
		font-size: 1rem;
		line-height: 1rem;
		font-weight: 600;
		margin-bottom: 0.25rem;
	}

	p {
		font-size: 0.75rem;
		line-height: 1rem;
		color: var(--gray-darkest);
	}
}

/*Individual card for map*/
.card {
	display: flex;
	flex-direction: column;
	border: 0.0625rem solid var(--gray-light);
	border-radius: 1rem 1rem 0 0;
	text-decoration: none;
	color: var(--black);
	width: calc(100dvw - 3rem);
	outline-offset: -0.125rem;
	background-color: var(--white);
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 1rem 1rem var(--gray-opaque);

	@media (width >=27rem) {
		width: 22rem;
	}

	&:hover {
		color: var(--blue-100);
		border-color: var(--blue-100);
		background-color: var(--blue-5);
	}

	&:active {
		color: var(--blue-200);
		border-color: var(--blue-200);
		background-color: var(--blue-10);
	}

	&:focus-visible {
		outline: var(--focus-outline);
	}

	img {
		object-fit: cover;
		object-position: center;
		background-color: var(--gray-lightest);
		overflow: hidden;
		position: relative;

		&.placeholder::after,
		&[src$="imageid=D"]::after,
		&[src$="imageid=F"]::after,
		&[src$="imageid=O"]::after,
		&[src$="imageid=R"]::after {
			content: '';
			height: calc(100% + 0.25rem);
			width: calc(100% + 0.25rem);
			position: absolute;
			inset: -0.125rem;
			background-color: var(--gray-lightest);
			background-repeat: no-repeat;
			background-position: center;
		}
	}

	h1 {
		font-size: 1rem;
		line-height: 1rem;
		font-weight: 600;
		margin-bottom: 0.25rem;
	}

	p {
		font-size: 0.75rem;
		line-height: 1rem;
		color: var(--gray-darkest);
	}
}


.card.organisation img,
.card.org img {
	width: 3rem;
	height: 3rem;
	border-radius: 99rem;
	margin: 1rem 0 0 1rem;
	border: 0.0625rem solid var(--gray-light);

	&.placeholder {
		padding: 0.5rem;
	}

	&::after {
		background-image: url(./assets/icons/shield-halved-gray.svg);
		background-size: 2rem 2rem;
	}
}

.card.resource img {
	width: 100%;
	height: 8rem;
	border-radius: 1rem 1rem 0 0;
	border-bottom: 0.0625rem solid var(--gray-light);

	&.placeholder {
		padding: 2rem;
		object-fit: contain;
	}

	&::after {
		background-image: url(./assets/icons/court-sport-gray.svg);
		background-size: 3rem 3rem;
	}
}


.card-body {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1rem;
}

.pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.825rem;
	padding: 0.5rem;
	background-color: var(--white);
	border: 0.0625rem solid var(--gray-light);
	border-top: none;
	border-radius: 0 0 1rem 1rem;

	button {
		display: flex;
		align-items: center;
		justify-content: center;
		appearance: none;
		padding: 0;
		margin: 0;
		background-color: transparent;
		border: none;
		width: 2rem;
		height: 2rem;

		&:disabled {
			cursor: not-allowed;
		}

		.icon {
			width: 1rem;
			height: 1rem;
		}
	}
}

/*Map, list and filter layout*/
.search-layout {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-template-rows: auto;
	padding: 0 1rem;

	@media (width >=64rem) {
		gap: 1rem;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: auto;
	}
}

/* Numbers of org/resource hits */
.count {
	padding: 1rem;
	grid-column: -1 / 1;
	grid-row: 2;
	position: relative;
	overflow: hidden;
	margin-left: -1rem;
	width: calc(100% + 2rem);

	@media (width >=64rem) {
		margin-left: 0;
		width: 100%;
		padding: 1rem 0;
		grid-column: 1 / 9;
		grid-row: 2;
	}

	&::before,
	&::after {
		content: '';
		height: 0;
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: var(--blue-10);
		transition: ease height .2s;
	}

	&::after {
		background-color: var(--blue-100);
		border-radius: 0.125rem;
		transform: translateX(-150%);
	}

	/*To indicate that the list and map is loading*/
	&.loading {

		&::before,
		&::after {
			height: 0.25rem;
		}

		&::after {
			animation: loading 1s linear infinite;
		}
	}
}


/* Empty state if org/resource hits are 0 */
.empty-state {
	display: none;
	padding-top: 1rem;

	.empty & {
		display: block;
	}
}

/* List component */
.list {
	display: flex;
	flex-direction: column;
	grid-column: -1 / 1;
	grid-row: 3;
	position: relative;
	margin-left: -1rem;
	width: calc(100% + 2rem);
	overflow: hidden;

	@media (width >=64rem) {
		grid-column: 1 / 9;
		grid-row: 3;
		margin-left: 0;
		width: 100%;
	}

	li {
		animation: shown 1s ease;
	}

	li:last-child a {
		border-bottom: none;
	}

	a {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 1rem;
		border-bottom: 0.0625rem solid var(--gray-light);
		text-decoration: none;
		color: var(--black);
		padding: 0.5rem 1rem;
		min-height: 3rem;

		@media (width >=64rem) {
			padding: 0.5rem;
		}

		&:hover {
			color: var(--blue-100);
			background-color: var(--blue-5);

			p {
				color: inherit;
			}
		}

		&:active {
			color: var(--blue-200);
			background-color: var(--blue-10);

			p {
				color: inherit;
			}
		}

		&:focus-visible {
			outline-offset: -0.125rem;
		}
	}

	img {
		width: 3rem;
		min-width: 3rem;
		height: 3rem;
		min-height: 3rem;
		border-radius: 99rem;
		border: 0.0625rem solid var(--gray-light);
		object-fit: cover;
		object-position: center;

		&.placeholder {
			padding: 0.5rem;
			object-fit: none;
			background-color: var(--gray-lighter);
		}
	}

	.item-body {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
		flex-shrink: 1;
		min-width: 0.125rem;
	}

	h1 {
		font-size: 1rem;
		line-height: 1.25rem;
		font-weight: 600;
		overflow-wrap: anywhere;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	p {
		font-size: 0.75rem;
		line-height: 1rem;
		color: var(--gray-darkest);
		overflow-wrap: anywhere;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}


@media (prefers-reduced-motion: no-preference) {
	@keyframes loading {
		0% {
			transform: translateX(-150%);
		}

		75% {
			opacity: 1;
		}

		100% {
			opacity: 0;
			transform: translateX(150%);
		}
	}

	@keyframes shown {

		0%,
		100% {
			background-color: transparent;
		}

		50% {
			background-color: var(--blue-5);
		}
	}
}

/* Filter */
aside {
	grid-column: -1 / 1;

	h2 {
		display: none;
	}

	@media (width >=64rem) {
		padding: 1rem;
		border: var(--gray) 0.0625rem solid;
		background-color: var(--gray-lightest);
		border-radius: 1rem;
		grid-column: 9 / 13;
		position: sticky;
		top: 1rem;

		h2 {
			display: block;
		}
	}
}

/* Filter checkboxes */
.checkbox-filter-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 0.75rem;
	border-top: 0.0625rem solid var(--gray);
}

.checkbox-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;

	label {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		outline: 0.0625rem solid var(--gray);
		outline-offset: -1px;
		min-height: 2rem;
		padding: 0.5rem 0.75rem;
		white-space: nowrap;
		background-color: var(--white);
		border-radius: 0.375rem;
		font-weight: 600;
		font-size: 0.875rem;
		line-height: 1rem;

		&:hover {
			outline-color: var(--blue-100);
		}

		&:active {
			outline-color: var(--blue-200);
		}

		&:has(:checked) {
			background-color: var(--blue-5);
			outline-width: 0.125rem;
			outline-offset: -2px;
			outline-color: var(--blue-100);
			color: var(--blue-100);
		}
	}

	input {
		appearance: none;
		position: absolute;
		inset: 0;
		cursor: pointer;

		&:focus-visible {
			outline: var(--focus-outline);
			outline-offset: -0.125rem;
		}
	}
}

/* Toggles filter visibility on mobile */
.filter-toggle {
	appearance: none;
	background-color: transparent;
	border: none;
	color: var(--gray-darkest);
	height: 2.25rem;
	width: 2.25rem;
	border-radius: 0.25rem;
	position: absolute;
	right: 0.25rem;
	top: 0.25rem;
	cursor: pointer;

	&:hover {
		color: var(--blue-100);
		background-color: var(--blue-5);
	}

	&:active {
		color: var(--blue-200);
		background-color: var(--blue-10);
	}

	&[aria-expanded="true"] {
		color: var(--blue-300);
		background-color: var(--blue-20);
	}

	@media (width >=64rem) {
		/* Hide on desktop */
		display: none;
	}

}

/* Filter inputs*/
.dropdown-checkbox-wrapper {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	visibility: hidden;
	height: 0;
	overflow: hidden;
	transition: ease visibility .2s, ease height .2s;

	&.open {
		visibility: visible;
		height: auto;
	}

	@media (width >=64rem) {
		/* Always show on desktop */
		visibility: visible;
		height: auto;
		overflow: unset;
	}
}

.search-input {
	position: relative;

	.icon {
		height: 1.5rem;
		width: 1.5rem;
	}

	.search {
		position: absolute;
		left: 0.75rem;
		top: 0.625rem;
		pointer-events: none;
	}
}

.search,
.activity {
	display: flex;
	flex-direction: column;
	width: 100%;
	position: relative;

	input,
	select {
		appearance: none;
		height: 2.75rem;
		width: 100%;
		border: 0.0625rem solid var(--gray);
		background-color: var(--white);
		padding: 0 3rem 0 1rem;
		border-radius: 0.5rem;

		&:focus-visible {
			outline: var(--focus-outline);
			border-color: var(--blue-100);
			box-shadow: 0 0 0 0.25rem var(--blue-5);
		}
	}

	select {
		cursor: pointer;
		background-image:
			linear-gradient(45deg, transparent 50%, var(--gray-darkest) 50%),
			linear-gradient(135deg, var(--gray-darkest) 50%, transparent 50%);
		background-position:
			calc(100% - 20px) calc(1em + 0.125rem),
			calc(100% - 15px) calc(1em + 0.125rem),
			calc(100% - 2.5em) 0.5em;
		background-size:
			5px 5px,
			5px 5px,
			1px 1.5em;
		background-repeat: no-repeat;

		&:not(:has(option[value="all"]:checked)) {
			border-width: 0.125rem;
			border-color: var(--blue-100);
		}
	}
}

.search {
	label {
		@media (width <=64rem) {
			/* Hide label on desktop */
			display: none;
		}
	}

	input {
		padding: 0 3rem;

		@media (width >=64rem) {
			padding: 0 0.5rem 0 3rem;
		}
	}
}

label {
	padding-top: 1rem;
	font-size: 0.875rem;
	line-height: 1rem;
	font-weight: 600;
	padding-bottom: 0.5rem;
	color: var(--black);
}

/*Toggles between map and list*/
.toggle-map-list {
	display: flex;
	flex-direction: row;
	height: 2.75rem;
	width: 100%;
	margin-top: 1rem;
	z-index: 0;


	.map-white,
	.bars-white {
		display: none;
	}

	label {
		display: flex;
		gap: 0.5rem;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background-color: var(--white);
		position: relative;
		border: 0.0625rem solid var(--gray);
		padding: 1rem;
		margin: 0;

		&:hover {
			background-color: var(--blue-5);
			border-color: var(--blue-100);
		}

		&:active {
			background-color: var(--blue-10);
			border-color: var(--blue-200);
		}

		&:focus-visible {
			outline: var(--focus-outline);
			outline-offset: 0.25rem;
		}

		&:has(:checked) {
			background-color: var(--blue-100);
			color: var(--white);
			border-color: transparent;
			z-index: 1;

			.icon.map-white,
			.icon.bars-white {
				display: block;
			}

			.icon.map,
			.icon.bars {
				display: none;
			}
		}

		&:first-child {
			border-top-left-radius: 0.5rem;
			border-bottom-left-radius: 0.5rem;
		}

		&:last-child {
			border-top-right-radius: 0.5rem;
			border-bottom-right-radius: 0.5rem;
		}
	}

	input {
		appearance: none;
		position: absolute;
		inset: 0;
		cursor: pointer;

		&:focus-visible {
			outline: var(--focus-outline);
			outline-offset: -0.125rem;
		}
	}

	@media (width >=64rem) {
		/*Hide on desktop*/
		display: none;
	}
}

@media (width <=64rem) {

	main:has(input[value="1"]:checked) .list {
		display: none;
	}

	main:has(input[value="2"]:checked) .map:not(.icon) {
		display: none;
	}
}

/*Prevent zoom on pages with map*/
html:has(.map:not(.icon)) {
	touch-action: pan-x pan-y;
}


/*Map*/
.map:not(.icon) {
	display: flex;
	position: relative;
	width: calc(100% + 2rem);
	margin-left: -1rem;
	min-height: max(40dvh, calc(100dvh - 22.375rem));
	grid-column: -1 / 1;
	grid-row: 3;


	.empty & {
		opacity: 0.5;
		filter: grayscale(1);
	}

	@media (width >=64rem) {
		min-height: 24rem;
		border-radius: 1rem;
		border: 0.0625rem solid var(--gray);
		width: 100%;
		margin-left: 0;
		overflow: hidden;
		grid-column: 1 / 9;
		grid-row: auto;
	}

	#organisationmap,
	#resourcemap {
		width: 100%;
	}
}

#marker-popup {
	position: fixed;
	inset: auto auto 1rem 1rem;
	z-index: 1;

	@media (width >=64rem) {
		position: absolute;
	}
}

.custom-pin,
.custom-cluster {
	border-radius: 99rem;
	border: 0.125rem solid var(--white);
	background-color: var(--blue-100);
	color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0.125rem 0.125rem 0.125rem var(--gray-opaque);
	transition: height 0.2s ease, width 0.2s ease;

	.small & {
		height: 0.75rem;
		width: 0.75rem;
		color: transparent;
	}

	.medium & {
		height: 1.5rem;
		width: 1.5rem;
		color: var(--white);
	}

	.large & {
		height: 2rem;
		width: 2rem;
		color: var(--white);
	}

	&:hover {
		background-color: var(--blue-200);
	}

	&:active {
		background-color: var(--blue-300);
	}
}

/*Anläggnings- och föreningsinformation*/
dl {
	@media (width >=64rem) {
		padding: 1rem;
		border: var(--blue-20) 0.0625rem solid;
		background-color: var(--blue-5);
		border-radius: 1rem;
		height: 100%;
	}
}

dt {
	color: var(--gray-darkest);
	font-size: 0.75rem;
	line-height: 1rem;

	&:not(:first-child) {
		padding-top: 1rem;
	}
}

dd {
	font-size: 1rem;
	line-height: 1.25rem;
}

.td {
	display: flex;
	gap: 0.5rem;
	padding-top: 0.25rem;
}

/* FAQ component */
.narrow details {
	display: flex;
	flex-direction: column;
	width: 100%;
	position: relative;
	min-height: 2.75rem;
	border-width: 0.0625rem;
	border-color: var(--gray-light);
	border-bottom-style: solid;
	width: calc(100% + 2rem);
	margin-left: -1rem;

	@media (width >=64rem) {
		border-right-style: solid;
		border-left-style: solid;
		width: 100%;
		margin-left: 0;

		h2+& {
			border-top-style: solid;
			border-top-right-radius: 1rem;
			border-top-left-radius: 1rem;
		}

		&:first-of-type {
			border-top-style: solid;
			border-top-right-radius: 1rem;
			border-top-left-radius: 1rem;
		}

		&:last-of-type {
			border-bottom-right-radius: 1rem;
			border-bottom-left-radius: 1rem;
		}
	}

	summary {
		font-weight: 600;
		cursor: pointer;
		padding: 1rem;
		min-height: 3.5rem;

		&:hover {
			color: var(--blue-100);
		}

		&:active {
			color: var(--blue-200);
		}

		&:focus-visible {
			outline: var(--focus-outline);
		}
	}

	ul {
		list-style: unset;
		padding-inline-start: 3.5rem;
		margin: -1rem 0 1rem 0;
	}

	p {
		padding: 0 1rem 1rem 2rem;
	}
}


/*Menu*/
.menu {
	display: flex;
	align-items: center;
	margin-left: auto;

	.btn {
		/*Toggles menu dropdown visibility*/
		appearance: none;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 4.5rem;
		width: 4.5rem;
		border: none;
		border-left: 0.0625rem solid var(--gray-light);
		background-color: transparent;
		cursor: pointer;

		&:hover {
			background-color: var(--blue-5);
			color: var(--blue-100);
		}

		&:active {
			background-color: var(--blue-10);
			color: var(--blue-200);
		}

		&:focus-visible {
			outline: var(--focus-outline);
			outline-offset: -0.125rem;
		}

		&[aria-expanded="true"] {
			background-color: var(--blue-5);
			color: var(--blue-100);

			.xmark {
				display: block;
			}

			.bars {
				display: none;
			}
		}


		.xmark {
			/*Hides the xmark icon when menu is inactive*/
			display: none;
		}
	}
}

.menu-main {
	display: flex;
	gap: 0.5rem;
	padding: 0 1.5rem;

	@media (width <=64rem) {
		/* Hide on mobile */
		display: none;
	}

	a {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.5rem;
		height: 2.75rem;
	}
}

/* Dropdown menu */
.menu-extra {
	display: none;
	flex-direction: column;
	position: absolute;
	top: calc(4.5rem - 0.0625rem);
	right: 0;
	border: 0.0625rem solid var(--gray-lighter);
	background-color: var(--white);
	border-radius: 1rem;
	box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.1);
	padding: 1rem 0;
	z-index: 999;

	&.open {
		display: flex;
	}

	a {
		display: flex;
		align-items: center;
		padding: 0.5rem 1.5rem;
		min-height: 2.75rem;
		overflow-wrap: anywhere;
	}
}

/* Hides menu items on desktop */
.hidden {
	@media (width >=64rem) {
		display: none;
	}
}

/* Mini cards component */
.mini-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	width: 100%;

	@media (width >=40rem) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	@media (width >=64rem) {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	li {
		height: 100%;
		min-width: 0;
	}

	article {
		height: 100%;

		.row {
			height: 100%;
		}
	}

	a {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		width: 100%;
		height: 100%;
		padding: 0.75rem 1rem 0.75rem 0.75rem;
		background-color: var(--blue-5);
		border: 0.0625rem solid var(--blue-10);
		border-radius: 0.5rem;
		font-weight: 600;
		text-decoration: none;
		font-size: 0.875rem;
		letter-spacing: -0.2px;
		min-width: 0;

		span {
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			display: block;
		}

		&:hover {
			background-color: var(--blue-10);
			border-color: var(--blue-100);
		}

		&:active {
			background-color: var(--blue-20);
			border-color: var(--blue-100);
		}

		&:focus-visible {
			outline: var(--focus-outline);
		}
	}

	.alt a {
		background-color: var(--yellow-lightest);
		border: 0.0625rem solid var(--yellow-light);

		&:hover {
			background-color: var(--yellow-light);
			border-color: var(--yellow);
		}

		&:active {
			background-color: var(--yellow-light);
			border-color: var(--action-yellow-dark);
		}
	}

	img {
		height: 2rem;
		min-width: 2rem;
		border-radius: 99rem;
		fill: var(--blue-100);
		background-color: var(--white);
		border: 0.0625rem solid var(--blue-10);
		object-fit: scale-down;
	}

	.alt img {
		border-color: var(--yellow-light);
	}
}

/*Pill component*/
.pill-group {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
	flex-wrap: wrap;

	&:empty {
		display: none;
	}

	.cards &,
	.card & {
		margin-top: auto;
	}

	.list & {
		margin-left: auto;
		justify-content: flex-end;
	}

	.cover.resource+& {
		margin-top: 2rem;
	}
}

.pill {
	display: flex;
	align-items: center;
	justify-content: center;
	appearance: none;
	border: none;
	height: 1.75rem;
	font-size: 0.75rem;
	line-height: 0.75rem;
	font-weight: 600;
	width: fit-content;
	border-radius: 99rem;
	padding: 0 0.75rem;
	background-color: var(--gray-lighter);
	color: var(--black);

	&:is(:hover, :focus, :active) {
		color: var(--black);
		background-color: var(--gray-lighter);
	}

	.cards &,
	.card & {
		margin-top: 0.5rem;
	}

	&.pill-extra:not(.visible) {
		display: none;
	}

	&.pill-btn {
		color: var(--blue-100);
		border: 0.0625rem solid var(--blue-100);
		background-color: var(--blue-5);
		cursor: pointer;
		user-select: none;

		&:hover {
			color: var(--blue-200);
			border-color: var(--blue-200);
			background-color: var(--blue-10);
		}

		&:active {
			color: var(--blue-300);
			border-color: var(--blue-300);
			background-color: var(--blue-20);
		}

		&:focus-visible {
			outline: var(--focus-outline);
		}
	}
}

/*Details page*/
.hero-detail {

	.hgroup {
		display: flex;
		flex-direction: column;
		gap: 1rem;

		.org & {
			padding-top: 2rem;

			@media (width >=64rem) {
				margin: -5rem auto 0 auto;
				max-width: 50rem;
			}
		}

		.resource & {
			padding-top: 2rem;
		}
	}

	.cover:is([src$="imageid=D"], [src$="imageid=F"], [src$="imageid=O"], [src$="imageid=R"])+.hgroup {
		margin: 0 auto 0 auto;
	}

	.logo {
		position: relative;
		overflow: hidden;
		width: 5rem;
		min-width: 5rem;
		height: 5rem;
		border-radius: 99rem;
		border: 0.0625rem solid var(--gray-light);
		background-color: var(--gray-lightest);
		object-fit: cover;
		object-position: center;

		&.placeholder::after,
		&[src$="imageid=D"]::after,
		&[src$="imageid=F"]::after,
		&[src$="imageid=O"]::after,
		&[src$="imageid=R"]::after {
			content: '';
			position: absolute;
			inset: 0;
			height: 100%;
			width: 100%;
			background-image: url(./assets/icons/shield-halved-gray.svg);
			background-color: var(--gray-lightest);
			background-size: 3rem 3rem;
			background-repeat: no-repeat;
			background-position: center;
			object-fit: cover;
			object-position: center;
		}


		@media (width >=64rem) {
			width: 7.5rem;
			min-width: 7.5rem;
			height: 7.5rem;
			border: 0.125rem solid var(--white);
		}
	}
}

.cover {
	width: calc(100% + 2rem);
	max-height: 20rem;
	max-width: none;
	margin-left: -1rem;
	object-fit: cover;
	object-position: center;
	background-color: var(--gray-lighter);

	&.placeholder,
	&[src$="imageid=D"],
	&[src$="imageid=F"],
	&[src$="imageid=O"],
	&[src$="imageid=R"] {
		display: none;
	}

	@media (width >=64rem) {
		width: 100%;
		min-height: 30rem;
		height: 30rem;
		max-height: 30rem;
		margin: 0;
		border-radius: 2rem;
	}
}

.detail-header {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;

	h1 {
		overflow-wrap: anywhere;
	}

	@media (width >=32rem) {
		flex-wrap: nowrap;
	}

	@media (width >=64rem) {
		flex-direction: column;
		align-items: start;
	}
}

.link-back {
	display: flex;
	gap: 0.5rem;
	top: 0;
	position: sticky;
	z-index: 1;
	padding: 0.5rem 1rem;
	margin-top: 0.5rem;
	background-color: var(--white);
	overflow-wrap: anywhere;
	color: var(--blue-100);

	&:hover {
		color: var(--blue-200);
		text-decoration: underline;
		text-underline-offset: 0.25rem;
	}

	&:active {
		color: var(--blue-300);
	}

	@media (width >=64rem) {
		margin-top: 0;
	}
}

/*Skip over content link*/
.link-skip {
	opacity: 0;
	top: -100%;
	left: -100%;
	position: absolute;
	background-color: var(--black-dark);
	color: var(--white);
	overflow: hidden;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;

	&:hover,
	&:focus-visible {
		opacity: 1;
		top: 1rem;
		left: 50%;
		transform: translate(-50%, 0);
	}

	&:hover {
		background-color: var(--black);
	}

	&:active {
		background-color: var(--gray-darkest);
	}

	&:focus-visible {
		outline: var(--focus-outline);
	}
}

/*Cookie banner*/
.cookie-dialog {
	position: fixed;
	width: 100%;
	height: fit-content;
	max-height: 90dvh;
	bottom: 0;
	border-top: 0.0625rem solid var(--gray-light);
	z-index: 99;
	padding: 1.25rem 1rem;
	background-color: var(--white);
	box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.02),
		0 -4px 4px rgba(0, 0, 0, 0.04),
		0 -8px 6px rgba(0, 0, 0, 0.06),
		0 -12px 8px rgba(0, 0, 0, 0.08);

	h3 {
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 2rem;
		max-width: 75rem;
		margin: 0 auto;
	}

	p {
		max-width: 75rem;
		margin: 0 auto;
	}

	&.dialog-hidden {
		display: none;
	}
}

.cookie-form {
	padding-top: 1rem;
	max-width: 75rem;
	margin: 0 auto;
}

.cookie-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;

	&:has(:enabled) {
		cursor: pointer;
	}

	&:has(:disabled) {
		cursor: not-allowed;
	}

	input {
		appearance: none;
		position: relative;
		height: 1.25rem;
		min-width: 1.25rem;
		width: 1.25rem;
		border-radius: 0.375rem;
		background-color: var(--white);
		border: 0.125rem solid var(--gray);

		&:enabled {
			cursor: pointer;

			&:focus-visible {
				outline: var(--focus-outline);
			}
		}

		&:disabled {
			cursor: not-allowed;
		}

		&::after {
			content: '';
			height: 100%;
			width: 100%;
			background-color: var(--white);
			position: absolute;
			clip-path: var(--check-clip);
			transform: translate(-50%, -50%) scale(0);
			top: 50%;
			left: 50%;
		}

		&:enabled:not(:checked) {
			&:hover {
				background-color: var(--blue-10);
				border-color: var(--blue-100);
			}

			&:active {
				background-color: var(--blue-20);
				border-color: var(--blue-200);
			}
		}

		&:checked {
			background-color: var(--blue-100);
			border-color: transparent;

			&::after {
				transform: translate(-50%, -50%) scale(1);
			}

			&:disabled {
				background-color: var(--gray-dark);

				&::after {
					background-color: var(--gray-light);
				}
			}
		}
	}

}

.cookie-action-group {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	width: fit-content;
	margin-top: 2rem;

	.btn {
		appearance: none;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 2.5rem;
		flex: 1;
		padding: 1rem;
		border-radius: 0.5rem;
		text-decoration: none;
		font-weight: 600;
		white-space: nowrap;

		&:enabled {
			cursor: pointer;

			&:focus-visible {
				outline: var(--focus-outline);
			}

			&.primary {
				background-color: var(--blue-100);
				color: var(--white);
				border: none;
				min-width: 10.375rem;
				/*Same width as secondary button*/

				&:hover {
					background-color: var(--blue-200);
				}

				&:active {
					background-color: var(--blue-300);
				}
			}


			&.secondary {
				background-color: var(--gray-lightest);
				color: var(--black);
				border: 1px solid var(--gray-light);

				&:hover {
					color: var(--blue-100);
					background-color: var(--blue-5);
					border-color: var(--blue-100);
				}

				&:active {
					color: var(--blue-200);
					background-color: var(--blue-10);
					border-color: var(--blue-200);
				}
			}
		}

		&:disabled {
			cursor: not-allowed;
			border: none;

			&.primary {
				background-color: var(--blue-10);
				color: var(--white);
				min-width: 10.375rem;
				/*Same width as secondary button*/
			}

			&.secondary {
				background-color: var(--gray-lightest);
				color: var(--gray);
			}
		}
	}
}

/*Cookie table*/
.cookie-table-wrapper {
	width: 100%;
	overflow: auto;
}

.cookie-table {
	border-spacing: 0;
	width: 100%;
	border-collapse: collapse;

	caption {
		position: absolute;
		width: 0;
		height: 0;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}

	th {
		text-align: left;
	}

	td,
	th {
		border-bottom: 1px solid var(--gray-light);
		height: 2rem;
		padding: 0.25rem 1rem 0.25rem 0;
		font-size: 0.875rem;
		line-height: 1rem;

		&:last-child {
			padding-right: 0;
		}
	}

	tr {
		&:hover {
			background-color: var(--gray-lightest);
		}

		&:last-child td {
			border-bottom: none;
		}
	}
}

.cookie-confirm-text {
	max-width: calc(100% - 2rem);
	padding: 1rem 1.25rem 1rem 3rem;
	min-height: 3.5rem;
	border-radius: 1rem;
	position: fixed;
	bottom: 1rem;
	left: 50%;
	transform: translate(-50%, 0%);
	background-color: var(--black);
	color: var(--white);
	overflow-wrap: anywhere;

	&::before,
	&::after {
		content: '';
		height: 1.5rem;
		width: 1.5rem;
		border-radius: 99rem;
		position: absolute;
		left: 1rem;
		top: 1rem;
		background-color: var(--green);
		animation: grow 0.3s ease forwards;
		transform: scale(0);
		transition: ease transform 0.2s;
	}

	&::after {
		background-color: var(--white);
		clip-path: var(--check-clip);
	}
}

@keyframes grow {
	from {
		transform: scale(0);
	}

	to {
		transform: scale(1);
		box-shadow: none;
	}
}

/*Shimmer for loading images*/
.shimmer:not([src$="imageid=D"], [src$="imageid=F"], [src$="imageid=O"], [src$="imageid=R"], .placeholder) {
	background: var(--gray-light);
	background: linear-gradient(110deg, var(--gray-light) 8%, var(--gray-lightest) 18%, var(--gray-light) 33%);
	background-size: 200% 100%;
	animation: 1.5s shimmer linear infinite;
}

@keyframes shimmer {
	to {
		background-position-x: -200%;
	}
}