//@import "../../../abstracts/abstracts";

//Variables
$button-border-radius: $global-border-radius;
$input-list-border-width: 1px;
$input-list-border-color: $global-border-color;
$input-list-border: $input-list-border-width solid $input-list-border-color;
$input-list-background-color: color(background-color-default);
$input-field-border-radius: $border-radius-default;

.input-list {
	//margin-bottom: 15px;

	.input-list-item-content-container {
		flex: 1;
		min-width: 0; // Note from Jeroen @ 08-03-2023: The min-width=0 is very important here. Because an input-list-item-content-container is a flex box, the min-width goes to auto and this gives containers the ability to grow past their set size.
	}

	.input-list-item-content {
		float: left;
		width: 100%;
		//padding: 15px 15px 0 15px;
		padding: 15px;
	}

	.input-list-content {
		width: 100%;
		padding: 0;
	}

	.input-list-item-sorting-indicator {
		width: 40px;
		border-left: 1px solid $input-list-border-color;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;

		svg {
			width: $svg-icon-size;//20px;
			height: $svg-icon-size;//20px;
			fill: $text-color-default;//$color-primary;
		}
	}

	.input-list-item-remove {
		width: 40px;
		height: 100%;
		float: left;

		.input-list-item-remove-button {
			border: 0 !important;
			background: 0 !important;
			-webkit-box-shadow: none !important;
			-moz-box-shadow: none !important;
			box-shadow: none !important;
            transition: unset;

			&:disabled,
            &:enabled {
				svg {
					position: absolute;
					top: 50%;
					left: 50%;
					-ms-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
				}
			}
		}
	}

	.input-list-item-add {
		.input-list-item-add-button {
			display: flex;
			align-items: center;
			border: 0 !important;
			background: 0 !important;
			-webkit-box-shadow: none !important;
			-moz-box-shadow: none !important;
			box-shadow: none !important;
			
			&:enabled {
				&:hover {
					svg {
						fill: #ffffff;
					}
				}
			}
		}

		button.input-list-item-add-button {
			border: 0;
			background: 0;
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
			background: 0;

			span {
				color: $color-primary !important;
				margin-left: 10px;
			}

			svg {
				float: left;
				fill: $color-primary;
				width: $svg-icon-size;//20px;
				height: $svg-icon-size;//20px;
			}

			&:enabled {
				&:hover {
					background: $color-primary;
					background: $color-primary !important;

					span {
						color: #ffffff !important;
					}
					svg {
						fill: #ffffff !important;
					}
				}
			}
		}
	}

	.input-list-item {
		background-color: $input-list-background-color;
		display: flex;
		border: 1px solid $input-list-border-color;
		border-bottom: 0;

		&:first-of-type {
			border-radius: $global-border-radius $global-border-radius 0 0;
		}

		&:last-of-type {
			border-bottom: 1px solid $input-list-border-color;
		}

		// &:only-of-type { // To-do: moved to .input-list[data-has-visible-add-button="false"], remove if not problems arise
		// 	border-radius: $global-border-radius;
		// }
	
		.input-list-item-index {
			display: none;
		}

	}

	.input-list-item-add-button,
    .input-list-item-remove-button {
        padding: 15px;
		width: 100%;
		text-align: left;
        transition: none !important;
		
		svg {
			fill: #ffffff;
		}
	}

	// Accordion styling
	&[data-is-accordion="true"] {
		.input-list-item {
			flex-direction: column;

			.dbq-element-header-5 {
				display: block;
			}

			.input-list-item-accordion-header {
				display: flex;
				width: 100%;
				cursor: pointer; 
				border-bottom: 1px solid $input-list-border-color;

				.input-list-item-accordion-header-content {
					font-weight: 600;
					padding: ($global-padding / 3) $global-padding;
					flex-grow: 1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				&.ui-state-active {
					background: $input-list-active-background !important;
					color: $modal-label-color !important;
					.input-list-item-index-background {
						.input-list-item-index {
							color: $modal-label-color !important;
						}
					}
				}
			}
	
			.input-list-item-accordion-content {
				display: flex;
				overflow: visible; // Required due to the Infragistics theme causing the overflow to be hidden
			}

			&:last-of-type {
				.ui-accordion-header-collapsed {
					border-bottom: 0 none;
				}
			}
		}
	}
}

.input-list[data-sort-direction="0"][data-has-visible-add-button="true"] {
	.input-list-content {
		background: 0;
	}
}

.input-list[data-sort-direction="1"][data-has-visible-add-button="true"] {
	.input-list-content {
		background: #f0f2f5;
		border: $field-border-width solid $input-list-border-color;
		background: 0;
		border-radius: 0 0 $global-border-radius $global-border-radius;
	}
}

.input-list[data-sort-direction="1"][data-has-visible-add-button="false"] {
	.input-list-content {
		border-radius: $global-border-radius;
	}
}

.input-list[data-has-visible-add-button="false"] {
	.input-list-item {
		&:only-of-type {
			border-radius: $global-border-radius;
		}
	}
}

.input-list-item {
	.input-list-item-index-background {
		display: none;
	}

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

.input-list[data-show-index-numbers="true"] {
	.input-list-item {
		margin-left: 45px;
		position: relative;
		padding: 0;
		margin: 0;
		//border-bottom: 1px solid $input-list-border-color;
		.input-list-item-index-background {
			background: 0;
			border-right: 1px solid $input-list-border-color;
			float: left;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-shrink: 0;
			width: 40px;
			//width: initial;
			font-size: 18px;
			//font-size: $font-size-base;
			//margin-right: 5px;

			.input-list-item-index {
				display: flex;
				color: $color-primary;
				//color: $text-color-default;
				margin: 0;
				padding: 0;
				font-size: 18px;
				//font-size: $font-size-base;
				position: relative;
			}
		}
	}

	&[data-is-accordion="false"] {
		.input-list-item-index-background {
			height: initial;
		}
	}
}

.input-list[data-is-read-only="false"] {
	.input-list-item {
		&:nth-child(even) {
			background-color: $input-list-background-color;
		}
	}
}

.input-list[data-is-read-only="false"][data-has-visible-add-button="true"] {
	.input-list-item {
		&:last-of-type {
			border-bottom: 0;
		}
	}
}

.input-list[data-is-read-only="false"][data-has-visible-add-button="false"] {
	.input-list-item {
		&:last-of-type(:not(:only-of-type)) {
			border-radius: 0 0 $global-border-radius $global-border-radius;
		}

		&:only-of-type {
			border-radius: $global-border-radius;
		}
	}
}

.input-list-item[data-is-read-only="true"] {
	.input-list-item-remove-button {
		filter: alpha(opacity=65);
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		opacity: 0.65;
		pointer-events: none;
		cursor: not-allowed;
	}
	.form-control {
		background-color: #eee;
		pointer-events: none;
		cursor: not-allowed;
	}
	.dbqdb-searchbox-container {
		.input-group-btn {
			button {
				display: none;
			}
		}
	}
}

.input-list[data-sort-direction="0"] {
	.input-list-item-add {
		background: $input-list-background-color;
		border: 1px solid $input-list-border-color;
		border-radius: 0 0 $global-border-radius $global-border-radius;
		padding: 0;
		margin: 0;
	}
}
.input-list[data-sort-direction="1"] {
	.input-list-item-add {
		background: 0;
		border: $field-border-width solid $input-list-border-color;
		border-bottom: 0;
		border-radius: $global-border-radius $global-border-radius 0 0;
		padding: 0;
		margin: 0;
	}
	.input-list-item {
		&:last-of-type {
			border: 0;
			border-radius: 0 0 $global-border-radius $global-border-radius;
		}
	}
}
.input-list[data-has-visible-remove-buttons="true"] {
	.input-list-item-remove {
		.input-list-item-remove-button {
			&:enabled {
				svg {
					fill: #000000;
				}
				&:hover {
					svg {
						fill: #ffffff;
					}
				}
			}
			&:disabled {
				svg {
					fill: #001323;
				}
				&:hover {
					svg {
						fill: #001323;
					}
				}
			}
		}
	}
}

// Classlists in forms
.dbq-form {
	button.input-list-item-remove-button {
		border: 0;
		background: 0;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		background: 0;
	}

	.input-list[data-has-visible-items="true"] {
		.input-list-item-add {
			button.input-list-item-add-button {
				border-top: 0;
			}
		}
	}

	.input-list[data-sort-direction="0"][data-has-visible-items="true"] {
		.input-list-item-add {
			button.input-list-item-add-button {
				&:enabled {
					border-radius: $global-border-radius;
				}
			}
		}
	}

	.input-list[data-sort-direction="1"][data-has-visible-items="true"] {
		.input-list-item-add {
			button.input-list-item-add-button {
				&:enabled {
					border-radius: $global-border-radius $global-border-radius 0 0;
					background: 0;
					border-bottom: 0;
				}
			}
		}
	}

	.input-list[data-sort-direction="0"] {
		.input-list-item-add {
			button.input-list-item-add-button {
				&:enabled {
					background: 0;
					border-radius: 0 0 $global-border-radius $global-border-radius !important;
					background: #f0f2f5;
					&:hover {
						background: $color-primary;
					}
				}
			}
		}
	}

	.input-list[data-sort-direction="1"] {
		.input-list-item-add {
			button.input-list-item-add-button {
				&:enabled {
					background: 0;
					border-radius: $global-border-radius $global-border-radius 0 0 !important;
					background: #f0f2f5 !important;
					&:hover {
						background: #000000;
						background: $color-primary !important;
					}
				}
			}
		}
	}

	.input-list[data-sort-direction="0"][data-has-visible-items="false"] {
		.input-list-item-add {
			button.input-list-item-add-button {
				&:enabled {
					border-radius: 8px !important;
				}
			}
		}
	}

	.input-list[data-has-visible-add-button="false"][data-has-visible-remove-buttons="false"][data-has-visible-items="true"] {
		.row[data-element-type="InputProperty"] {
			.dbq-property-no-label {
				input {
					border-radius: 0 0 $global-border-radius $global-border-radius;
				}
			}
		}
	}

	div[data-has-visible-remove-buttons="true"] {
		.input-list-item-remove {
			button.input-list-item-remove-button {
				&:enabled {
					background: 0 !important;
					border: 0 !important;
					border-left: 1px solid $input-list-border-color !important;
					svg {
						fill: $color-primary;
					}
					&:hover {
						background: $color-primary !important;
						svg {
							fill: #ffffff !important;
						}
					}
				}
				&:disabled {
					background: $modal-disabled-color !important;
					border-left: 1px solid $modal-disabled-color !important;
					svg {
						fill: #001323 !important;
					}
					&:hover {
						background: $modal-disabled-color !important;
						border-left: 1px solid $modal-disabled-color !important;
						svg {
							fill: #001323 !important;
						}
					}
				}
			}
		}
	}

	// .dbq-dynamic-properties-input-list {
	// 	.input-list[data-has-visible-add-button="false"][data-has-visible-remove-buttons="false"][data-has-visible-items="true"] {
	// 		.dbq-form-group-title {
	// 			span {
	// 				background: #e6e9ed;
	// 			}
	// 		}
	// 	}
	// }

	.input-list {
		.input-list-item-content {
			.dbq-form-group-title {
				margin: 0;
				+ {
					.row[data-element-type="InputProperty"] {
						margin: 0 0 10px 0;
						&:visible {
							margin: 0 0 10px 0;
						}
					}
				}
			}

			div[data-element-type=Text] {
				margin-bottom: 0px;
			}
		}
		
		.flex-container {
			.row[data-element-type="InputProperty"].dbq-column-33 {
				&:first-of-type,
				&:nth-of-type(2) {
					margin: 0;
					float: left;
					width: calc(100% / 3);
				}
			}
			.row[data-element-type="InputProperty"].dbq-column-33-mr {
				&:first-of-type,
				&:nth-of-type(2) {
					margin: 0;
					margin-right: 10px;
					float: left;
					width: calc((100% / 3) - 10px);
				}
			}
			.row[data-element-type="InputProperty"].dbq-column-50 {
				&:first-of-type,
				&:nth-of-type(2) {
					margin: 0;
					float: left;
					width: 50%;
				}
			}
			.row[data-element-type="InputProperty"].dbq-column-50-mr {
				&:first-of-type,
				&:nth-of-type(2) {
					margin: 0;
					margin-right: 10px;
					float: left;
					width: calc((100% / 2) - 10px);
				}
			}
		}
		.row[data-element-type="InputProperty"] {
			&:first-of-type {
				margin: 0 0 10px 0;
			}
		}
	}

	.input-list[data-has-visible-add-button="false"][data-has-visible-remove-buttons="false"][data-has-visible-items="true"] {
		.input-list-item-content {
			.dbq-form-group-title {
				margin: 10px 0 0 0;
				&:first-of-type {
					padding: 0 10px;
				}
			}
		}
		.row[data-element-type="InputProperty"] {
			.dbq-property-no-label {
				input {
					border-radius: $global-border-radius;
				}
				.date {
					input {
						border-radius: 0 $global-border-radius $global-border-radius 0;
					}
				}
			}
		}
	}

	.row[data-element-type="InputProperty"] {
		.dbq-property-no-label {
			.dbq-input-no-label {
				.date {
					input {
						border-radius: 0 $global-border-radius $global-border-radius 0;
					}
				}
			}
		}
	}

	div[data-has-visible-remove-buttons="true"] {
		.input-list-item-remove {
			button.input-list-item-remove-button {
				border-radius: 0;
				background: 0;
				&:enabled {
					background: 0;
					border-top: 0;
					border-left: 1px solid $input-list-border-color;
					&:hover {
						background: $color-primary;
					}
				}
				&:disabled {
					background: 0;
					border-left: 1px solid $modal-disabled-color;
					&:hover {
						background: 0;
						border-left: 1px solid $modal-disabled-color;
					}
				}
			}
			button.input-list-item-remove-button.enabled {
				&:hover {
					background: $color-primary;
				}
			}
			button.input-list-item-remove-button.disabled {
				border-top: 0;
				&:hover {
					background: 0 !important;
					cursor: not-allowed;
				}
			}
		}

		.input-list-item {
			&:first-of-type,
			&:last-of-type {
				.input-list-item-remove {
					button.input-list-item-remove-button {
						border-radius: 0 $global-border-radius 0 0;
					}
				}
			}
		}
	}

	div[data-has-visible-remove-buttons="true"][data-has-visible-add-button="false"] {
		.input-list-item {
			&:last-of-type {
				.input-list-item-remove {
					button.input-list-item-remove-button {
						border-radius: 0 0 $global-border-radius 0;
					}
				}
			}
		}
	}

	div[data-has-visible-remove-buttons="true"][data-has-visible-add-button="true"] {
		.input-list-item {
			&:last-of-type {
				.input-list-item-remove {
					button.input-list-item-remove-button {
						border-radius: 0;
					}
				}
			}
		}
	}

	div[data-has-visible-remove-buttons="true"][data-sort-direction="1"] {
		.input-list-item {
			&:first-of-type {
				.input-list-item-remove {
					button.input-list-item-remove-button {
						border-radius: 0;
						background: 0;
					}
				}
				&:last-of-type {
					.input-list-item-remove {
						button.input-list-item-remove-button {
							border-radius: 0 0 8px 0;
							background: 0;
						}
					}
				}
			}
			&:last-of-type {
				.input-list-item-remove {
					button.input-list-item-remove-button {
						border-radius: 0 0 8px 0;
						background: 0;
					}
				}
			}
		}
	}

	div[data-has-visible-add-button="false"][data-has-visible-remove-buttons="true"][data-sort-direction="1"] {
		.input-list-item {
			&:first-of-type {
				.input-list-item-remove {
					button.input-list-item-remove-button {
						border-radius: 0 8px 0 0;
					}
				}
			}
		}
	}

	div[data-has-visible-remove-buttons="true"][data-sort-direction="0"] {
		.input-list-item {
			&:first-of-type {
				.input-list-item-remove {
					button.input-list-item-remove-button {
						border-radius: 0 8px 0 0;
					}
				}
				&:last-of-type {
					.input-list-item-remove {
						button.input-list-item-remove-button {
							border-radius: 0 8px 0 0;
							border-top: 1px solid $input-list-border-color;
						}
						button.input-list-item-remove-button.disabled {
							border-top: 0;
						}
					}
				}
			}
			&:last-of-type {
				.input-list-item-remove {
					button.input-list-item-remove-button {
						border-radius: 0;
					}
				}
			}
		}
	}

	div[data-has-visible-remove-buttons="true"][data-has-visible-add-button="false"][data-sort-direction="0"] {
		.input-list-item {
			&:last-of-type {
				.input-list-item-remove {
					button.input-list-item-remove-button {
						border-radius: 0 0 8px 0;
					}
				}
			}
		}
	}

	.flex-container {
		.row[data-element-type="InputProperty"].dbq-column-33 {
			margin: 0;
			float: left;
			width: calc(100% / 3);
		}
		.row[data-element-type="InputProperty"].dbq-column-33-mr {
			margin: 0;
			margin-right: 10px;
			float: left;
			width: calc((100% / 3) - 10px);
		}
		.row[data-element-type="InputProperty"].dbq-column-50 {
			margin: 0;
			float: left;
			width: 50%;
		}
		.row[data-element-type="InputProperty"].dbq-column-50-mr {
			margin: 0;
			margin-right: 10px;
			float: left;
			width: calc((100% / 2) - 10px);
		}
	}
}

// .dbq-dynamic-properties-input-list {
// 	.input-list {
// 		.input-list-content {
// 			border: $field-border-width solid $input-list-border-color;
// 			.input-list-item-content {
// 				padding: 0 10px;
// 			}
// 		}
// 	}
// }

.input-list {
	.input-list-item-remove {
		button.input-list-item-remove-button {
			&:enabled {
				width: 40px;
				height: 100%;
				position: relative;
			}
			&:disabled {
				width: 40px;
				height: 100%;
				position: relative;
			}
		}
	}
}

.input-list-item-remove-button-container {
	width: 40px;
}

.btn {
	&:disabled {
		cursor: not-allowed;
		opacity: 0.5;
	}
}

.input-list[data-show-index-numbers="true"] {

	&[data-is-accordion="false"] {
		.input-list-item-content {
			width: calc(100% - 40px);

			.flex-container {
				//margin-bottom: $global-margin;
			}
		}
	}
}

.input-list[data-sort-direction="0"][data-show-index-numbers="true"] {
	.input-list-item {
		&:first-of-type {
			.input-list-item-index-background {
				border-radius: 7px 0 0 0;
			}
		}
	}
}
.input-list[data-sort-direction="1"][data-show-index-numbers="true"] {
	.input-list-item {
		&:last-of-type {
			.input-list-item-index-background {
				border-radius: 0 0 0 7px;
			}
		}
	}
}

.input-list[data-has-visible-add-button="false"][data-has-visible-remove-buttons="false"][data-has-visible-items="true"] {
	.input-list-item-remove-button-container {
		width: 0px;
	}
	.dbq-form-group-title {
		background: 0;
		border: 0;
		color: #595f6e;
	}
}


// div[data-element-type="BeginInputList"].dbq-dynamic-properties-input-list {
// 	background: 0;
// }

div.input-list[data-has-visible-add-button="false"][data-has-visible-remove-buttons="false"][data-has-visible-items="false"] {
	.input-list-content {
		display: none;
	}
}

div[data-has-visible-add-button="false"] {
	.input-list-content {
		border-radius: $global-border-radius;
	}
}

div[data-topic-type-code="Dashboard"] {
	.input-list-item-content {
		padding: 10px;
		div[data-element-type="Text"] {
			p {
				padding: 0;
			}
		}
	}
}

#content-wrapper {
	div[data-topic-name="Dashboard"] {
		.input-group-addon.disabled {
			border-radius: 0 0 0 $global-border-radius;
		}
		div[data-element-type="BeginInputList"] {
			margin: 0 0 $global-margin 0;
		}
		.flex-container {
			div[data-element-type="InputProperty"] {
				margin: 0 0 $global-margin 0;
			}
		}
		div[data-element-type="Header"] {
			font-size: 12px;
			line-height: 20px;
			font-weight: 500;
		}
		.input-list-item-content {
			div[data-element-type="Header"] {
				margin: 0;
				width: 100%;
			}
			div[data-element-type="Text"] {
				margin: 0;
				width: 100%;
			}
			select.form-control {
				padding: 10px;
				margin: 0;
				border-radius: $global-border-radius;
			}
		}
	}
}

.input-list[data-has-visible-remove-buttons="false"] {
	.input-list-item-remove-button-container {
		display: none;
	}
}

form[data-view-mode="View"] {
	.dbq-form {
		.input-list {
			p {
				color: color(text-color-default);
			}
		}
	}
}

div.input-list[data-has-visible-items="false"] {
	.input-list-content {
		border: 0 !important;
	}
}

div.input-list[data-has-visible-add-button="true"][data-has-visible-remove-buttons="true"][data-has-visible-items="false"] {
	.input-list-item-add {
		border-radius: $global-border-radius !important;
		border: $field-border-width solid $input-list-border-color !important;
		button.input-list-item-add-button {
			&:enabled {
				border-radius: $global-border-radius !important;
			}
		}
	}
}

.dbq-divider.input-list[data-has-visible-add-button="false"][data-has-visible-remove-buttons="false"][data-has-visible-items="true"] {
	background: $modal-disabled-color !important;
	.input-list-content {
		background: $modal-disabled-color !important;
		border: $field-border-width solid $modal-disabled-color !important;
	}
}

.xl-document[data-document-display-mode="Compact"] {
	.dbq-form {
		.input-list {
			font-size: $font-size-small;
			background: $modal-input-background; 
			color: color(text-color-default);
		}
	}
}

// form[data-view-mode="Modify"] {
// 	.dbq-form {
// 		.dbq-dynamic-properties-input-list {
// 			.input-list[data-has-visible-add-button="false"][data-has-visible-remove-buttons="false"][data-has-visible-items="true"] {
// 				.dbq-form-group-title {
// 					span {
// 						background: #f5f7f9;
// 					}
// 				}
// 			}
// 		}
// 	}
// }

// When data is shown as a read only insert property, the code below will remove the background, border and padding from input-list-items
.input-list[data-is-read-only="true"]:not([data-is-accordion="true"]) {
	.input-list-item {
		&:last-of-type {
			border-bottom-left-radius: $global-border-radius;
			border-bottom-right-radius: $global-border-radius;
		}
	}
}

// Make an element invisible if the input-list inside is empty
.dbqdb-element:has(> .dbqmd-col > .input-list[data-is-read-only="true"][data-has-visible-items="false"]) {
	display: none;
}