.filter-button {
	&.is-active {
		> svg {
			fill: var( --jp-white );
		}
	}
}

.filters-section {
	background-color: var( --jp-gray-0 );

	.checkbox-container:last-child {
		margin-bottom: 0;
	}
}

.checkbox-container {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	cursor: pointer;
	height: 20px;
	line-height: 20px;
	margin-bottom: var( --spacing-base );

	.checkbox[type="checkbox"] {
		border: 1px solid var( --jp-green-40 );
		padding: 0 !important;
		margin-right: 10px;
		&:checked::before {
			background: var( --jp-green-40 );
		}

		&:not(:checked) + .checkbox-checkmark {
			display: none;
		}
	}

	.checkbox-checkmark {
		position: absolute;
		top: -1px;
		left: -1px;
		height: 20px;
		width: 20px;
		box-sizing: border-box;
		&::after {
			position: absolute;
			left: 8px;
			top: 3px;
			width: 5px;
			height: 11px;
			border: solid var( --jp-white );
			border-width: 0 1.5px 1.5px 0;
			transform: rotate( 37deg );
			content: "";
		}
	}
}
