.layout-main-section-wrapper:not(.disable-scrolling) {
	.frappe-list {
		.result-container {
			.result {
				min-width: 100%;
				width: auto;
				.list-row-container {
					width: fit-content;
					min-width: 100%;
				}
				.list-row-container {
					.level-left {
						.list-row-col {
							min-width: 150px;
							max-width: 400px;
						}
					}
				}
			}
		}
	}
}

.freeze-row {
	.level-left,
	.level-right,
	.list-row-col {
		height: 100%;
		width: 100%;
	}

	.list-row-col {
		background-color: $border-color;
		border-radius: 2px;
		animation: 2s breathe infinite;
	}
}

@keyframes breathe {
	0% {
		opacity: 0.2;
	}

	50% {
		opacity: 0.5;
	}

	100% {
		opacity: 0.2;
	}
}

.list-skeleton {
	min-height: calc(100vh - 200px);

	.list-skeleton-box {
		background-color: var(--skeleton-bg);
		height: 100%;
		border-radius: var(--border-radius);
	}
}

.no-list-sidebar {
	&[data-page-route^="List/"],
	[data-page-route^="List/"] {
		@include media-breakpoint-up(md) {
			.layout-side-section {
				display: none;
			}

			.layout-main-section-wrapper {
				flex: 1;
			}
		}
	}
}

.list-row-container {
	display: flex;
	flex-direction: column;
	padding-inline: var(--padding-sm);
	border-radius: var(--border-radius);

	&:focus {
		.list-row {
			background-color: var(--highlight-color);
		}
	}

	&:first-child {
		padding: 0;
		position: sticky;
		top: 0;
		z-index: 2;
	}

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

	&:hover .level-right {
		background-color: var(--highlight-color);
	}
}

.frappe-list {
	margin: 0 var(--margin-md);
	.result.has-assign-to {
		.list-row .level-right {
			flex: 0 0 180px;
			width: 180px;
		}
		&.assign-to-length-1 {
			.list-row .level-right {
				flex: 0 0 165px;
				width: 165px;
			}
		}
		&.assign-to-length-3 {
			.list-row .level-right {
				flex: 0 0 200px;
				width: 200px;
			}
		}
	}

	.result.no-assign-to {
		.list-row .level-right {
			flex: 0 0 130px;
			width: 130px;
		}
	}
}

.list-row {
	border-bottom: 1px solid var(--border-color);
	cursor: pointer;
	transition: color 0.2s;
	-webkit-transition: color 0.2s;
	@include get_textstyle("base", "regular");

	&:hover:not(.list-row-head) {
		.level-right {
			box-shadow: -5px 0px 5px var(--highlight-color);
		}
	}

	.level-left {
		flex: 4;
		min-width: 80%;
		padding: var(--padding-xs) 0;
	}
	.level-right {
		position: sticky;
		right: 0;
		background-color: var(--bg-color);
		border-left: 2px solid var(--highlight-color);
		padding: 9px 10px;
	}

	.tag-col {
		margin-left: 10px;
		min-width: 125px;
		justify-content: start;
	}

	.tags-empty {
		padding: 5px;
		line-height: 14px;
	}

	// .list-tags {
	// 	margin-right: var(--margin-sm);
	// 	min-width: 60px;
	// }

	.list-row-activity {
		justify-content: flex-end;
		// min-width: 120px;

		& > span {
			display: inline-block;
		}

		.modified {
			margin-right: var(--margin-sm);
			min-width: 1.5rem;
		}

		.comment-count {
			min-width: 35px;
		}

		.frappe-timestamp {
			font-size: var(--text-xs);
			white-space: nowrap;
		}

		.list-assignments,
		.list-actions {
			margin-right: var(--margin-md);
		}
	}

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

	.file-select {
		padding: 0 10px;
	}
}

.select-like {
	padding: var(--list-checkbox-padding);
	cursor: default;
}

.list-row-head {
	@extend .list-row;
	cursor: default;
	background-color: var(--subtle-fg);
	border-radius: var(--border-radius);
	height: var(--list-row-height);
	padding-inline: var(--padding-sm);

	.list-subject {
		font-weight: normal;
	}

	.checkbox-actions {
		display: none;
	}
	.level-right {
		background-color: var(--subtle-fg);
		height: var(--list-row-height);
		border-left: none;
		&:hover {
			background-color: var(--subtle-fg);
		}
	}
	&:hover .level-right {
		background-color: var(--subtle-fg);
	}
}

.list-row-col {
	flex: 1;
	margin-right: 15px;

	a {
		color: var(--text-muted);
	}

	& > [data-sort-by]:hover {
		cursor: pointer;
		text-decoration: underline;
	}
}

.list-row-col .indicator-pill {
	max-width: 150px;
}

$level-margin-right: 8px;

.list-subject {
	flex: 2;
	justify-content: start;

	a {
		color: var(--text-color);
	}

	&.seen {
		font-weight: normal;
	}
}

.list-paging-area,
.footnote-area {
	border-top: 1px solid var(--border-color);

	.btn-group {
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius);
		.btn-paging.btn-info {
			&:not(:first-child) {
				border-left: 1px solid var(--border-color);
			}
			background-color: var(--bg-color);
			color: var(--text-color);
			font-weight: var(--weight-medium);
		}
	}
	.btn-paging {
		background-color: var(--control-bg);
	}
}

.layout-main-list {
	.list-paging-area,
	.footnote-area {
		padding: var(--padding-sm) 0;
	}
}

.progress {
	height: 10px;
}

.list-liked-by-me {
	margin-bottom: 1px;
}

input.list-row-checkbox,
input.list-header-checkbox {
	margin-top: 0;
	margin-bottom: 0;
	--checkbox-right-margin: 0;
	background-color: var(--card-bg);
	z-index: 1;

	&::after {
		// Extend the checkbox's clickable area
		display: block;
		content: "";
		inset: calc(-1 * var(--list-checkbox-padding));
		position: absolute;
		opacity: 0;
	}
}

.render-list-checkbox {
	margin-left: 15px;
}

.filterable {
	cursor: pointer;
}

.modal-body {
	.list-item--head {
		position: sticky !important;
		top: 0;
	}

	.sortable-handle {
		cursor: all-scroll;
		cursor: grabbing;
	}
}

.list-items {
	width: 100%;
}

.list-item-container {
	border-bottom: 1px solid $border-color;

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

.list-item-table {
	border: 1px solid $border-color;
	border-radius: 3px;

	.list-row-head {
		border-radius: unset;
	}

	.list-row-container {
		border-bottom: 1px solid $border-color;
		border-radius: unset;

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

	.list-row-container:hover {
		border-radius: unset;
	}

	.list-row-container .list-row {
		border-bottom: none;
	}
}

.list-item {
	display: flex;
	align-items: center;
	cursor: pointer;

	padding-left: 15px;

	@include get_textstyle("base", "regular");

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

	// @media (max-width: $screen-xs) {
	// 	height: 50px;
	// 	padding-left: 10px;

	// 	font-size: $text-regular;
	// 	font-weight: normal;
	// }

	&--head {
		background-color: var(--highlight-color);
		// border-bottom: 1px solid $border-color;
		cursor: auto;
	}

	input[type="checkbox"] {
		margin: 0;
		margin-right: 5px;
	}

	.liked-by,
	.liked-by-filter-button {
		display: inline-block;
		width: 20px;
		margin-right: 10px;
	}
}

.list-item__content {
	flex: 1;
	margin-right: 15px;

	display: flex;
	align-items: center;

	&--flex-2 {
		flex: 2;
	}

	&--activity {
		justify-content: flex-end;
		margin-right: 5px;
		min-width: 110px;

		.list-row-modified,
		.avatar-small {
			margin-right: 10px;
		}
	}

	&--indicator span::before {
		height: 12px;
		width: 12px;
	}

	&--id {
		justify-content: flex-end;
	}
}
// .like-action.octicon-heart {
// 	color: $heart-color;
// }

.list-comment-count {
	display: inline-block;
	width: 37px;
	text-align: left;
}

// tags

.result.tags-shown {
	.tag-row {
		display: block;
	}
}

.tag-row {
	display: none;
	margin-left: 50px;
}

.taggle_placeholder {
	top: 0;
	left: 5px;
	font-size: 11px;
	color: $text-muted;
}

.page-form {
	.standard-filter-section {
		flex-wrap: wrap;
		// width: 65%;
		flex: 1;

		.form-group {
			min-width: 150px;
		}

		.group-by-field {
			.group-by-dropdown {
				max-width: 220px;
			}
		}
	}

	.filter-section {
		display: flex;
		padding: 0;
		align-items: flex-start;
		margin-top: 3px;
	}

	.filter-selector .btn-group {
		margin: var(--margin-xs);

		.filter-label {
			display: inline-block;
			font-weight: 600;
			color: var(--text-color);
			background-color: var(--control-bg);
			min-width: 21px;
			border-radius: 22px;
			margin-left: 6px;
		}
	}

	.filter-button.btn-primary-light {
		z-index: 1;
	}

	.sort-selector {
		.btn-group {
			margin: var(--margin-xs) 0 var(--margin-xs) var(--margin-xs);
			.btn:focus {
				z-index: unset;
			}
		}
	}
}

.restricted-button {
	margin: var(--margin-xs) 0 0 var(--margin-sm);
	height: 29px;

	.icon {
		width: 14px;
		height: 14px;
		use {
			stroke: var(--yellow-800);
		}
	}

	&.btn {
		@include button-variant($background: $light-yellow, $border: darken($light-yellow, 5%));
		box-shadow: none;
	}
}

// 	img {
// 		max-height: 100%;
// 	}
// }

// .inbox-attachment, .inbox-link {
// 	margin-right: 7px;
// }

// .select-inbox {
// 	padding: 30px 30px;
// }

// .inbox-value {
// 	padding-top: 2px;
// }

// map
.map-view-container {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: calc(100vh - 284px);
	z-index: 0;
}

.list-view {
	.frappe-list {
		.result-container {
			overflow-x: auto;
			.result {
				overflow-y: hidden;
				display: table;
				width: 100%;
			}
		}
	}
}

.disable-scrolling {
	.frappe-list {
		.list-row-container {
			width: auto;
			.level-left {
				flex: 0;
				.list-row-col {
					min-width: auto;
				}
			}
			.level-right {
				border-left: none;
			}
		}
	}
}

.avatar-group {
	&:hover.overlap {
		.avatar:not(:first-child) {
			margin-left: calc(-1 * var(--margin-sm));
		}
	}
}

@media (max-width: map-get($grid-breakpoints, "lg")) {
	.layout-main-section-wrapper {
		width: 100%;
	}
	.frappe-list {
		.list-row {
			.level-right {
				flex: 0 0 auto;
				width: auto;
			}
		}
	}
}

@media (max-width: map-get($grid-breakpoints, "sm")) {
	.layout-main-section .frappe-list .result-container {
		.result {
			overflow: hidden;
			display: block;
			input.list-row-checkbox,
			input.list-header-checkbox {
				width: 15px !important;
				height: 15px;
			}
		}
		.list-row-container:not(:has(.list-row-head)) {
			.list-row {
				&.level {
					align-items: flex-start;
				}
				.level-left {
					min-width: auto;
					display: block;
					.mobile-layout {
						display: inline-block;
						z-index: 1;
						position: relative;
						padding-left: 10px;
						.list-row-col {
							margin-right: 0px;
							min-width: auto;
						}
						&:has(.filterable:empty) {
							display: none;
							padding-left: 37px;
						}
					}
					.mobile-layout-seperator:not(.mobile-layout-seperator
							~ .mobile-layout-seperator) {
						padding-left: 27px;
						margin-right: 6px;

						&:not(.no-seperator)::after {
							content: "\2022";
							position: absolute;
							right: 0;
							top: 50%;
							transform: translate(50%, -50%);
							padding-left: 15px;
						}
					}
				}
				.level-right {
					flex: 0 0 auto;
					width: auto;
					border-left: none;
					.level-item.visible-xs {
						margin-top: 1px;
					}
				}
			}
		}
	}
	.page-indicator-pill {
		display: none;
	}
}

@media screen and (max-width: 375px) {
	.navbar-breadcrumbs li:last-child > a {
		max-width: 105px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
