//@import "../../../abstracts/abstracts";
 
$input-field-border-radius: $border-radius-default;

.dbq-form {
	.btn-primary,
	.btn-secondary,
	.btn-success,
	.btn-danger,
	.btn-warning,
	.btn-info,
	.btn-link { 
		background: $button-background-color;
		background-color: $button-background-color;
		border: 2px solid $button-border-color;
		color: $button-text-color;
		fill: $button-text-color;
		-webkit-box-shadow: $global-box-shadow;
		-moz-box-shadow: $global-box-shadow;
		box-shadow: $global-box-shadow;
		opacity: 1;

		svg {
			fill: $button-text-color;
		}
	}

	.btn-primary,
	.btn-secondary,
	.btn-success,
	.btn-danger,
	.btn-warning,
	.btn-info,
	.btn-link,
	.btn {
		cursor: pointer;
		font-size: $button-font-size;
		line-height: 20px;
		font-weight: $button-font-weight;
		padding: 3px 10px;
	}

	// Primary buttons
	.btn-primary {
		fill: $button-text-color;
		&:enabled {
			background: $button-background-color;
		}
		&:hover,
		&:active {
			background: $button-hover-background-color;
			background-color: $button-hover-background-color;
			border-color: $button-hover-background-color;
		}
		&:enabled,
		&:hover,
		&:active {
			border-color: $button-hover-border-color;
			fill: $button-text-color;
			color: $button-text-color;
			border: 2px solid $button-hover-border-color;
		}
		&:disabled,
		&.disabled,
		&.disabled:hover,
		&.disabled.selected {
			background: color(gray-6); 
			border: 2px solid color(gray-6);;
			color: #ffffff;
			cursor: not-allowed !important;
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
			opacity: 1;
		}
	}

	// Default & Secondary buttons
	.btn-default,
	.btn-secondary {
		background: $default-background-color; /* if this need's to be a background, it should be specific, because background can be white or light-grey/blue or something else.. */
		color: $color-primary;
		fill: $color-primary;
		border: $field-border-width solid $modal-border-color;
		box-shadow: unset;
		opacity: 1;
		svg {
			fill: $color-primary;
		}
		&:hover {
			background: 0;
			//border: $field-border-width solid $color-primary !important;
			color: $color-primary;
		}
		&:disabled,
		&.disabled {
			background: $background-button-disabled;
			border: $field-border-width solid $background-button-disabled;
			color: #ffffff;
			cursor: not-allowed;
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
			opacity: 1;

			&:hover {
				background: $background-button-disabled;
				border: $field-border-width solid $background-button-disabled;
			}
		}
	}
	.btn-secondary {
		cursor: pointer;
		height: 100%; /*this height is for delete button next to inputs, in forms*/
	} 
	
	.btn-default {
		/* unique dropdown/multiselect, but is within button tags.. */
		&.dropdown-toggle {
			&:disabled {
				color: $modal-input-color !important;
				&:hover {
					color: $modal-input-color !important;
				}
			}
			&:enabled {
				fill: $color-primary !important;
			}
		}
		&:not(.image-file-upload-input) {
			cursor: pointer;
			height: 100%; /*this height is for delete button next to inputs, in forms*/
		}
	}

	// Danger button
	.btn-danger {
		background: #d5473c;
		border: 2px solid #c14036;
		color: #ffffff;
		-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
		-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
		box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
		cursor: pointer;

		svg {
			fill: #ffffff;
		}

		&:hover {
			background: #c9302c;
			border: 2px solid #bb2723;
			color: #ffffff;
		}
	}

	// Success button
	.btn-success {
		background: #0fab46;
		border: 2px solid #0e983f;
		color: #ffffff;
		-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
		-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
		box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
		cursor: pointer;

		svg {
			fill: #ffffff;
		}

		&:hover {
			background: #0e983f;
			border: 2px solid #0c8637;
			color: #ffffff;
		}
	}

	// Warning button
	.btn-warning {
		border: 2px solid #e5af0d;
		cursor: pointer;

		svg {
			fill: #ffffff;
		}

		&:hover {
			background: #e0a800;
			border: 2px solid #d39e00;
			color: #ffffff;
		}
	}

	// Link button
	.btn-link {
		background: 0;
		border: 2px solid rgba(0, 0, 0, 0);
		color: #001323;
		box-shadow: unset;
		cursor: pointer;

		&:hover {
			text-decoration: none;
			color: $color-primary !important;
		}

		&.btn-block {
			border: 0 !important;
		}
	}

	// Button
	button {
		&.btn-default.dropdown-toggle {
			&:enabled {
				background: $modal-input-background !important;
				border: $field-border-width solid $modal-border-color;
				color: $modal-input-color !important;
				-webkit-box-shadow: none;
				-moz-box-shadow: none;
				box-shadow: none;
				svg {
					fill: $color-primary !important;
				}
			}
		}
	}

	// Button list
	.button_list {
		// padding: $field-form-group-padding-top $field-form-group-padding-top $field-form-group-padding-bottom $field-form-group-padding-top;
		// margin-bottom: 0;
		// border-radius: 0 0 $input-field-border-radius $input-field-border-radius;
		// background: $modal-input-background;
		// border: $field-border-width solid $modal-border-color;

		// .btn-primary,
		// .btn-secondary,
		// .btn-success,
		// .btn-danger,
		// .btn-warning,
		// .btn-default,
		// .btn-info,
		// .btn-link {
		// 	line-height: 20px;
		// 	font-weight: $field-button-list-font-weight;
		// 	font-size: $field-button-list-font-size;
		// 	padding: 1px 8px;
		// 	border-radius: 5px;
		// 	margin: 0 0 5px 5px;
		// 	box-shadow: none;
		// }

		// .btn-default {
		// 	background: transparent;
		// 	border: $button-list-border-width solid $modal-border-color;
		// 	color: $color-primary;
		// 	&:hover {
		// 		border: $button-list-border-width solid $color-primary !important;
		// 	}
		// }

		// button {
		// 	line-height: 14px;
		// 	font-size: 14px;
		// 	font-weight: 600;
		// 	padding: 9px 20px;
		// 	&.btn-primary:hover:enabled,
		// 	&.selected {
		// 		background: $color-primary !important;
		// 		border: $button-list-border-width solid $color-primary !important;
		// 	}
		// }
	}

	.topic {
		// Footer
		.dbqdb-footer {
			.btn-link {
				color: $modal-footer-color;
				padding: 5px 10px;
				line-height: 20px;
				font-weight: 500;
				&:hover {
					color: $color-primary;
				}
			}
		}
	}

	.property.dbq-property-no-label {
		.button_list {
			border-radius: $border-radius-default;
		}
	}

	.dbq-form-group,
	.dbq-form-group-no-padding,
	.dbq-label-disabled + .dbq-form-group-padding,
	.element .property .dbq-label-disabled + .button_list {
		background: $modal-border-color;
	}
}

.modal,
.dbq-popup {
	#document-topics {
		div[data-has-visible-remove-buttons="true"] {
			.input-list-item-remove {
				button.input-list-item-remove-button {
					&:enabled {
						svg {
							fill: #ff6655 !important;
						}
						&:hover {
							background: #ff6655 !important;
							svg {
								fill: #ffffff !important;
							}
						}
					}
				}
			}
		}
	}
}

.btn-outline-primary {
	&:not(:disabled) {
		&:not(.disabled) {
			&:active,
			&.active {
				color: #ffffff;
				border-color: $color-primary;
				background: $button-active-background-color;
			}
		}
	}
}
.show {
	>.btn-outline-primary.dropdown-toggle {
		color: #ffffff;
		border-color: $color-primary;
		background: $color-primary;
	}
}

// Some disabled overwrite
form[data-view-mode="View"] {
	.btn-outline-primary {
		&:not(:disabled) {
			&:not(.disabled) {
				&:active {
					background: $modal-disabled-color !important;
				}
			}
		}
	}
	.show {
		>.btn-outline-primary.dropdown-toggle {
			background: $modal-disabled-color !important;
		}
	}
	.dbq-form {
		.row.dbq-form-group-title[data-element-type="Text"] {
			p {
				background: $modal-disabled-color;
			}
		}
	}
}

ul.button_list {
	margin-left: 5px;
	float: left;
	width: 100%;
  }
  
  ul.button_list.table li {
	margin: 0 10px 0 0 !important;
  }
  
  ul.button_list li {
	display: inline-flex;
	background-color: #f5f5f5;
	color: #555;
	padding: 5px 10px;
	margin: 0px 2px 0px 0px;
	pointer-events: auto;
	cursor: pointer;
  }
  
  ul.button_list li.selected {
	background-color: #3893d0;
	color: white;
	cursor: default;
  }
  
  ul.button_list.disabled li {
	pointer-events: none;
	cursor: default;
  }
  
  ul.button_list.disabled li.selected {
	pointer-events: none;
	cursor: default;
  }

.dbqdb-sidepanel-footer-buttons {
	display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: $padding-default;
}

.dbq-document[data-is-loading="true"] {
	.dbqdb-sidepanel-footer-buttons {
		display: none;
	}
}

.dbqdb-dialog-button {
	cursor: pointer;
	font-size: $font-size-small;
	line-height: 20px;
	font-weight: 600 !important;
	padding: 3px 10px;
	border-width: 2px;
	border-style: solid;
	&.btn-link {
		&:hover {
			text-decoration: none;
			background: none;
			border-color: transparent;
			color: $color-primary !important;
		}
	}
}

.dbqdb-file-link-button {
	display: block;
	padding: 15px 0;
	margin-bottom: $margin-default;
}