// ============================================================
// Osmo — Basic Filter Setup
// data-* must not be renamed. Visual overrides live in
// blocks/_block-formulas.scss.
// ============================================================

.filter-btn {
	-webkit-appearance: none;
	appearance: none;
	background-color: #efeeec;
	border-radius: 10em;
	padding: 0.65em 1.25em;
	transition: color 0.6s cubic-bezier(0.625, 0.05, 0, 1),
		background-color 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.filter-btn[data-filter-status='active'] {
	background-color: #131313;
	color: #efeeec;
}

.filter-list {
	flex-flow: wrap;
	width: 100%;
	display: flex;
}

.filter-list__item {
	width: 25%;
	padding: 0.75em;
}

.filter-list__item[data-filter-status='active'] {
	transition: opacity 0.6s cubic-bezier(0.625, 0.05, 0, 1),
		transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
	transform: scale(1) rotate(0.001deg);
	opacity: 1;
	visibility: visible;
	position: relative;
}

.filter-list__item[data-filter-status='transition-out'] {
	transition: opacity 0.45s cubic-bezier(0.625, 0.05, 0, 1),
		transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);
	transform: scale(0.9) rotate(0.001deg);
	opacity: 0;
	visibility: visible;
}

.filter-list__item[data-filter-status='not-active'] {
	transform: scale(0.9) rotate(0.001deg);
	opacity: 0;
	visibility: hidden;
	position: absolute;
}
