main {
	display: flex;
	gap: 20px;
	max-width: 1500px;
}

main > div {
	flex: 1;
}

#filters-section {
	width: max-content;
	background: transparent;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.checkbox-label {
	display: flex block;
	padding: 14px;
	cursor: pointer;
	align-items: center;
	width: max-content;

	&::after {
		content: "";
		margin-left: 10px;
		display: inline-block;
		width: 20px;
		height: 20px;
		background-color: #222;
		background-position: center center;
		background-size: 95% 95%;
		background-repeat: no-repeat;
		border-radius: 4px;
		transition: background 0.2s ease;
	}
}

input:checked + .checkbox-label::after {
	background-color: var(--accent-color-dark);
	background-image: url("../assets/check.svg");
}

#filters-section > div {
	background-color: #2a2a2a;
	border-radius: 14px;
}

#filters-section > .filter.closed {
	& button > svg {
		transform: rotate(-180deg);
	}

	& ol {
		max-height: 0;
		margin-bottom: 0;
	}
}

#filters-section > .filter > button {
	display: flex;
	padding: 14px 18px;
	font-size: 1.2em;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	background: transparent;
	color: var(--main-text);
	border: none;
	cursor: pointer;

	& svg {
		fill: var(--main-text);
		transition: transform 0.2s ease;
	}
}

#filters-section > .filter > ol {
	margin: 0 18px 14px 18px;
	max-height: 250px;
	overflow: auto;
	scrollbar-color: #8b8b8b transparent;
	font-size: 0.9em;
	display: flex;
	flex-direction: column;
	gap: 5px;
	color: var(--secondary-text);
	transition: max-height 0.2s ease, margin-bottom 0.2s ease;

	&.has-overflow.at-top {
		mask-image: linear-gradient(to top, transparent, black 10%, black 100%);
	}

	&.has-overflow.at-bottom {
		mask-image: linear-gradient(to bottom, transparent, black 10%, black 100%);
	}

	&.has-overflow:not(.at-top):not(.at-bottom) {
		mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
	}

	& li {
		padding: 5px 5px 5px 8px;
		border-radius: 10px;
		cursor: pointer;
		transition: background-color 0.2s ease;

		&:hover {
			background-color: #333;
		}

		&.selected {
			background-color: rgba(27, 217, 106, 0.25);
		}
	}
}

#search-input-container + div > div {
	position: relative;
	display: flex inline;
	align-items: center;

	&:nth-of-type(1) > select {
		padding-left: 85px;
	}

	&:nth-of-type(2) > select {
		padding-left: 50px;
	}
}

#search-input-container + div:not(.pagination) {
	display: flex;
	gap: 10px;
}

#search-section > div:last-child label {
	position: absolute;
	padding-left: 18px;
	pointer-events: none;
}