.containerList {
	> li {
		position: relative;
		transition: background-color 0.2s;

		@include screen-md-down {
			padding: 10px 0;
		}

		@include screen-lg {
			padding: 20px;
		}

		&:not(:last-child) {
			border-bottom: 1px solid var(--wcfContentBorderInner);
		}

		&:first-child {
			border-top: 1px solid var(--wcfContentBorder);
		}

		&:last-child {
			border-bottom: 1px solid var(--wcfContentBorder);
		}

		&:hover {
			background-color: var(--wcfTabularBoxBackgroundActive);
		}

		&.showMore {
			text-align: center;

			&:hover {
				background-color: transparent;
			}
		}

		.containerHeadline {
			position: relative;

			> .containerContentType {
				color: var(--wcfContentDimmedText);
				position: absolute;
				top: 5px;
				right: 0;

				@include screen-xs {
					display: none;
				}
			}
		}

		&.containerListButtonGroup {
			text-align: right;

			&:hover {
				background-color: transparent;
			}

			> .buttonGroup {
				display: inline-flex;

				&:not(:first-child) {
					margin-left: 5px;
				}
			}
		}

		@include screen-md-down {
			.hasMobileNavigation > .containerHeadline > h3 {
				padding-right: 30px;
			}

			.buttonGroupNavigation {
				position: absolute;
				right: 0;
				top: 14px;

				&.open {
					left: 0;

					// dropdown is contained within this element, required to have it stand
					// above any succeeding siblings
					z-index: 10;

					> .buttonList {
						display: block;
						visibility: visible;
					}
				}

				> .dropdownLabel {
					left: calc(100% - 24px);
					position: relative;
				}

				> .buttonList {
					@include dropdownMenu;

					position: static !important;
					top: 0;

					> li {
						.invisible {
							display: inline;
							padding-left: 5px;
						}
					}
				}
			}
		}

		@include screen-lg {
			.buttonGroupNavigation {
				opacity: 0;
				position: absolute;
				right: 20px;
				top: 15px;
				transition: opacity 0.12s;

				> .dropdownLabel {
					display: none;
				}

				> ul {
					background-color: var(--wcfContentBackground);
					border-radius: var(--wcfBorderRadius);
					box-shadow: var(--wcfBoxShadowCard);

					> li {
						margin-right: 0;

						&:not(:last-child) {
							border-right: 1px solid var(--wcfContentContainerBorder);
						}

						> a,
						> button {
							display: inline-block;
							padding: 3px 5px;

							> fa-icon,
							> .invisible {
								opacity: 0.5;
							}
						}

						&.active,
						&:hover {
							> a,
							> button {
								> fa-icon,
								> .invisible {
									color: var(--wcfContentText);
									opacity: 1;
								}
							}
						}
					}
				}
			}

			&:hover .buttonGroupNavigation {
				opacity: 1;
			}
		}
	}

	@include screen-sm-down {
		&.doubleColumned,
		&.tripleColumned {
			> li + li {
				margin-top: 10px;
			}
		}
	}

	@include screen-md-up {
		&.doubleColumned,
		&.tripleColumned {
			display: flex;
			flex-wrap: wrap;

			> li {
				// this will cause the mobile drop-down menu to be cut-off
				// overflow: hidden;
				padding-right: 15px;

				.containerBoxContent {
					overflow: hidden;

					h3 {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				&:first-child {
					border-top: none;
				}

				&:last-child {
					border-bottom: none;
				}
			}

			border-top: 1px solid var(--wcfContentBorder);
			border-bottom: 1px solid var(--wcfContentBorder);
		}

		&.doubleColumned > li {
			flex: 0 0 50%;
			max-width: 50%;

			&:nth-child(2n + 1):nth-last-child(-n + 2) {
				border-bottom: none;
			}
		}

		&.tripleColumned > li {
			/* The `flex` shorthand fails in IE11 if `calc()` is used. */
			flex-grow: 0;
			flex-shrink: 0;
			flex-basis: calc(100% / 3);

			&:nth-child(3n + 1):nth-last-child(-n + 3),
			&:nth-child(3n + 1):nth-last-child(-n + 3) ~ li {
				border-bottom: none;
			}
		}
	}
}

@include screen-lg {
	html[data-color-scheme="dark"] .containerList > li .buttonGroupNavigation > ul {
		border: 1px solid var(--wcfContentContainerBorder);
	}
}

.containerBoxList {
	@include screen-sm-down {
		&.doubleColumned,
		&.tripleColumned {
			> li + li {
				margin-top: 10px;
			}
		}
	}

	@include screen-md-up {
		&.doubleColumned,
		&.tripleColumned {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: -15px;

			> li {
				overflow: hidden;
				padding-right: 15px;
				margin-bottom: 15px;

				.containerBoxContent {
					overflow: hidden;

					h3 {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}

		&.doubleColumned > li {
			flex: 0 0 50%;
			max-width: 50%;
		}

		&.tripleColumned > li {
			/* The `flex` shorthand fails in IE11 if `calc()` is used. */
			flex-grow: 0;
			flex-shrink: 0;
			flex-basis: calc(100% / 3);
		}
	}
}

.flexibleCategoryList {
	position: relative;

	> li {
		margin-bottom: 14px;

		> ol {
			margin-left: 21px;
		}

		> ol > li > ol {
			margin-bottom: 7px;
			margin-left: 21px;

			> li {
				font-size: var(--wcfFontSizeSmall);
			}
		}
	}
}

.containerListDisplayOptions {
	align-items: center;
	border-bottom: 2px solid currentColor;
	color: var(--wcfTabularBoxHeadline);
	display: flex;
}

.containerListSortOptions,
.containerListActiveFilters,
.containerListFilterOptions {
	padding: 5px 10px;
}

@include screen-sm-down {
	.containerListActiveFilters {
		display: none;
	}
}

.containerListSortOptions {
	flex: 1 auto;

	> .dropdown {
		margin-left: 10px;
	}

	fa-icon {
		color: var(--wcfTabularBoxHeadline);
	}
}

.containerListActiveFilters,
.containerListFilterOptions {
	flex: 0 auto;
}

@include screen-md-up {
	.flexibleCategoryList:not(.flexibleCategoryListDisabled) {
		/* WebKit */
		-webkit-column-count: 2;

		/* Firefox */
		-moz-column-count: 2;

		/* CSS 3 / Internet Explorer */
		column-count: 2;

		> li {
			/* WebKit */
			-webkit-column-break-inside: avoid;

			/* CSS 3 / Internet Explorer */
			break-inside: avoid;

			> ol > li > ol {
				font-size: 0;

				> li {
					display: inline-block;
					@include wcfFontSmall;
				}
			}
		}
	}

	/* Firefox */
	@-moz-document url-prefix() {
		.flexibleCategoryList:not(.flexibleCategoryListDisabled) > li {
			display: block;
			overflow: hidden;
		}
	}
}

.styleListPreviewImage {
	text-align: center;
}

@include screen-md-down {
	.styleList > li {
		padding: 10px;
	}
}