.portfolio-loop-filter {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: flex-start;
	margin-bottom: 2rem;
	width: 100%;
}

.portfolio-loop-filter.is-content-justification-left {
	justify-content: flex-start;
}

.portfolio-loop-filter.is-content-justification-center {
	justify-content: center;
}

.portfolio-loop-filter.is-content-justification-right {
	justify-content: flex-end;
}

.portfolio-loop-filter__button {
	appearance: none;
	border: 1px solid var(--plf-border-color, rgba(229, 188, 70, 0.5));
	border-radius: 999px;
	background: var(--plf-background-color, transparent);
	color: var(--plf-text-color, inherit);
	padding: 0.55rem 1rem;
	font: inherit;
	font-size: 0.875rem;
	line-height: 1;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease,
		transform 160ms ease;
}

.portfolio-loop-filter__button:hover,
.portfolio-loop-filter__button:focus-visible {
	border-color: var(--plf-hover-border-color, var(--plf-active-background-color, #e5bc46));
	transform: translateY(-1px);
}

.portfolio-loop-filter__button.is-active,
.portfolio-loop-filter__button[aria-pressed='true'] {
	background: var(--plf-active-background-color, #e5bc46);
	border-color: var(--plf-active-background-color, #e5bc46);
	color: var(--plf-active-text-color, #111);
}

.wp-block-post[hidden],
.portfolio-loop-filter__button[hidden] {
	display: none !important;
}

.editor-styles-wrapper .portfolio-loop-filter--editor {
	align-items: center;
	min-height: 3rem;
	width: 100%;
}

.editor-styles-wrapper .wp-block-blumeblau-portfolio-loop-filter.portfolio-loop-filter--editor,
.editor-styles-wrapper .portfolio-loop-filter--editor.portfolio-loop-filter--align-none {
	max-width: var(--wp--style--global--content-size, 720px);
}

.editor-styles-wrapper .wp-block-blumeblau-portfolio-loop-filter.portfolio-loop-filter--editor.alignwide,
.editor-styles-wrapper .portfolio-loop-filter--editor.portfolio-loop-filter--align-wide {
	max-width: var(--wp--style--global--wide-size, 1200px);
}

.editor-styles-wrapper .wp-block-blumeblau-portfolio-loop-filter.portfolio-loop-filter--editor.alignfull,
.editor-styles-wrapper .portfolio-loop-filter--editor.portfolio-loop-filter--align-full {
	max-width: none;
}

.editor-styles-wrapper .portfolio-loop-filter--editor .portfolio-loop-filter__button {
	display: inline-flex;
	cursor: default;
}

.portfolio-loop-filter__editor-note {
	flex-basis: 100%;
	color: currentColor;
	opacity: 0.72;
	line-height: 1.45;
}

.portfolio-loop-filter__panel-help {
	margin-top: 0;
	color: #757575;
}