@mixin listGroup() {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	list-style-type: none;
	& > *:last-child {
		border-bottom: none;
	}
}

@mixin headerItemDuplicates() {
	position: relative;
	padding: 0.625rem 1rem;
	line-height: 1.5;
	margin: 0;
	background-color: inherit;
}

@mixin listGroupHeader() {
	@include headerItemDuplicates();
	font-weight: 600;
}

@mixin listGroupItem() {
	@include headerItemDuplicates();
	color: inherit;
}

@mixin listGroupCollapse {
	position: relative;
	background-color: inherit;
	&__toggle {
		position: relative;
		padding: 0.625rem 1rem;
		line-height: 1.5;
		margin: 0;
		background-color: inherit;
		display: flex;
		align-items: center;
		cursor: pointer;
		outline: none;
		@include crossBrowser(user-select, none);

		&__title {
			flex: 1;
		}
		&__indicator {
			flex: 0 0 1rem;
			margin-left: 0.625rem;
			transition: $normalTrans;
			@media (prefers-reduced-motion) {
				transition: none;
			}
			transform: rotateX(180deg);
		}
		&--collapsed {
			.dui__list__group__collapse__toggle__indicator {
				transform: rotateX(0deg);
			}
		}
	}
	&__content {
		padding: 1rem;
		.dui__list__group__collapse {
			border-bottom: none;
			padding-left: 1.125rem;
			&::before {
				pointer-events: none;
				content: "";
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 0.125rem;
				height: 100%;
			}
			&__toggle {
				padding: 0.625rem 1rem;
			}
			&__content {
				padding: 1rem 0 0 0;
				border-top: none;
			}
			&--no-indent {
				padding-left: 0;
				&::before {
					display: none;
				}
			}
		}
	}
}

.dui__list__group {
	@include listGroup();
	&__loader {
		@include componentLoader();
	}
	&__header {
		@include listGroupHeader();
	}
	&__item {
		@include listGroupItem();
	}
	&__collapse {
		@include listGroupCollapse();
	}

	&--loading {
		cursor: progress;
		&-disabled {
			pointer-events: none;
		}
	}
}