.mos-sf {
	--mos-sf-gap: 1rem;
	margin: 1.5rem 0;
	color: inherit;
}

.mos-sf__form {
	padding: 1rem;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	background: #fff;
}

.mos-sf__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--mos-sf-gap);
}

.mos-sf__field {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.mos-sf__label {
	margin-bottom: .4rem;
	font-weight: 600;
}

.mos-sf__input,
.mos-sf__select,
.mos-sf__date-range input,
.mos-sf__meta-range input {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.5rem;
	padding: .45rem .65rem;
	border: 1px solid #8c8f94;
	border-radius: 3px;
	background: #fff;
}

.mos-sf__select[multiple] {
	min-height: 7rem;
}

.mos-sf__option {
	display: block;
	margin: .35rem 0;
}

.mos-sf__date-range,
.mos-sf__meta-range {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .5rem;
}

.mos-sf__date-range label,
.mos-sf__meta-range label {
	display: grid;
	gap: .25rem;
	font-size: .9em;
}

.mos-sf__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .65rem;
	align-items: center;
	margin-top: 1rem;
}

.mos-sf__submit {
	padding: .55rem .9rem;
	border: 1px solid #135e96;
	border-radius: 3px;
	background: #135e96;
	color: #fff;
	cursor: pointer;
}

.mos-sf__reset {
	color: #135e96;
	text-decoration: underline;
}

.mos-sf__results {
	margin-top: 1.5rem;
}

.mos-sf__results-heading {
	margin-bottom: .25rem;
}

.mos-sf__count,
.mos-sf__item-meta {
	color: #50575e;
	font-size: .9em;
}

.mos-sf__items {
	display: grid;
	gap: 1rem;
}

.mos-sf__item {
	padding-bottom: 1rem;
	border-bottom: 1px solid #dcdcde;
}

.mos-sf__item-title {
	margin: 0 0 .25rem;
}

.mos-sf__item-excerpt {
	margin-top: .5rem;
}

.mos-sf__pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	padding: 0;
	list-style: none;
}

.mos-sf__pagination a,
.mos-sf__pagination span {
	display: block;
	padding: .35rem .6rem;
	border: 1px solid #dcdcde;
	border-radius: 3px;
}

.mos-sf__notice,
.mos-sf__empty {
	padding: .65rem;
	background: #f6f7f7;
}

@media (max-width: 600px) {
	.mos-sf__date-range,
	.mos-sf__meta-range {
		grid-template-columns: 1fr;
	}
}