/* .loading-screen {
	position: absolute;
	top: 0;
	left: 0;
	width: 100dvw;
	height: 100dvh;
	background: rgba(0, 0, 0, 0.1);
} */

.product-filter form {
	max-height: 0px;
	overflow-y: auto;
	margin-bottom: 20px;
	transition: max-height 150ms ease-in-out;
}

.product-filter form.expanded {
	max-height: 290px;
}

.product-filter form.filter-applied:not(.expanded) {
	overflow-y: hidden;
}

.product-filter form input[type='checkbox'] {
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	align-content: center;
	justify-content: center;
}

/* #color-filter.expanded {
	padding: 3px;
} */

/* standard form checkboxes */
.product-filter form input[type='checkbox']:before {
	content: '';
	width: 18px;
	height: 18px;
	border: 1px solid rgba(117, 117, 117, 1);
}

/* color form checkboxes */
/* .product-filter form input[type='checkbox'].color-filter__checkbox:before {
	content: '';
	width: 18px;
	height: 18px;
	border-radius: 50%;
} */

/* standard checkbox background */
.product-filter form input[type='checkbox']:checked {
	accent-color: #007d7a;
	background: #007d7a;
}

/* color checkbox outlines */
/* .product-filter form input[type='checkbox'].color-filter__checkbox:checked {
	outline: 3px solid #007d7a;
	border-radius: 50%;
} */

/* check for checkboxes */
.product-filter form input[type='checkbox']:checked:before {
	clip-path: polygon(28% 38%, 41% 53%, 75% 24%, 86% 38%, 40% 78%, 15% 50%);
	background: white;
	transform: scale(1);
}

.product-filter .ingredient-filter__item {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* hides inputs not selected when filter is closed */
form.filter-applied:not(.expanded)
	.ingredient-filter__item:has(> input:not(.checked)) {
	display: none;
}

.product-filter .ingredient-filter__item:not(:last-child) {
	margin-bottom: 10px;
}

.product-filter__heading {
	display: flex;
	justify-content: space-between;
	border-top: 2px solid rgba(104, 104, 104, 1);
	border-bottom: 2px solid rgba(104, 104, 104, 1);
	padding: 9px 0;
	margin-bottom: 20px;
}

.product-filter__heading p {
	font-family: 'DM Sans';
	font-weight: 500;
	font-size: 1rem;
	margin: 0;
}

.ingredient-filter__item label {
	font-size: 0.8rem;
}

/* accordion button */

.product-filter__heading .product-filter__accordion-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	background: transparent;
	padding: 0;
	border: none;
	width: 20px;
	height: 20px;
	transform: rotate(90deg);
	transition: transform 150ms ease-in-out;
}

.product-filter__heading .product-filter__accordion-btn:focus {
	outline: none;
}

.product-filter__heading:has(+ form.expanded) > .product-filter__accordion-btn {
	transform: rotate(180deg);

	& .product-filter__icon div:nth-of-type(2) {
		opacity: 0;
	}
}

.product-filter__accordion-btn .product-filter__icon {
	position: relative;
}

.product-filter__accordion-btn .product-filter__icon div:nth-of-type(1) {
	width: 16px;
	height: 2px;
	background: #000;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.product-filter__accordion-btn .product-filter__icon div:nth-of-type(2) {
	width: 2px;
	height: 16px;
	background: #000;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 1;
	transition: opacity 150ms ease-in-out;
}

#black_checkbox:before {
	/* background: rgba(0, 0, 0, 1); */
}

/* "blue" from design */
#blue_checkbox:before {
	/* background: rgba(49, 100, 231, 1); */
}

/* "pale peach" from the figma file  */
#blush_peach_checkbox:before {
	/* background: rgba(255, 185, 152, 1); */
}

/* found a swatch online */
#coral_salmon_checkbox:before {
	/* background: rgba(242, 132, 117, 1); */
}

#gray_checkbox:before {
	/* background: lightgray; */
}

/* "fresh green" from design */
#green_checkbox:before {
	/* background: rgba(67, 150, 119, 1); */
}

#mixed_checkbox:before {
	/* background: rgba(255, 255, 255, 1);
	outline: 1px solid #000;
	outline-offset: -1px; */
}

/* "bright orange" from design */
#orange_checkbox:before {
	/* background: rgba(255, 139, 43, 1); */
}

/* "soft pink" from design */
#pink_checkbox:before {
	/* background: rgba(253, 177, 191, 1); */
}

/* "true purple" from design */
#purple_checkbox:before {
	/* background: rgba(107, 22, 127, 1); */
}

/* "burgundy" from design */
#red_burgundy_checkbox:before {
	/* background: rgba(115, 25, 52, 1); */
}

/* "brown" from design */
#tan_brown_checkbox:before {
	/* background: rgba(105, 75, 61, 1); */
}

/* "cream/ivory" from design */
#white_cream_checkbox:before {
	/* background: rgba(255, 246, 233, 1); */
}

/* "bright yellow" from design */
#yellow_checkbox:before {
	/* background: rgba(255, 229, 91, 1); */
}