@import "./n8n-theme-variables";

@import "~n8n-design-system/theme/dist/index.css";

.clickable {
	cursor: pointer;
}
.primary-color {
	color: $--color-primary;
}
.text-light {
	color: $--custom-font-light;
	font-weight: 400;
}

.el-dialog {
	border: var(--border-base);
	box-shadow: 0px 6px 16px rgb(68 28 23 / 6%);
	border-radius: 8px;

	@media (max-height: 1050px) {
		margin: 4em auto !important;
	}

	@media (max-height: 930px) {
		margin: 1em auto !important;
	}
	&.classic {
		.el-dialog__header {
			padding: 15px 20px;
		}

		.el-dialog__headerbtn {
			position: absolute;
			top: 0;
			right: -50px;
			color: #fff;
			background-color: $--custom-table-background-main;
			border-radius: 0 18px 18px 0;
			z-index: 110;
			font-size: 1.7em;
			text-align: center;
			line-height: 30px;
			height: 50px;
			width: 50px;
			.el-dialog__close {
				color: #fff;
				font-weight: 400;
			}
			.el-dialog__close:hover {
				transform: scale(1.2);
			}
		}
		.el-dialog__body {
			color: $--custom-dialog-text-color;
			padding: 0 20px 20px 20px;
		}
		.el-dialog__title {
			color: $--custom-dialog-text-color;
		}
	}
}

.el-message-box {
	background-color: $--custom-dialog-background;
	border: none;
	.el-message-box__headerbtn {
		.el-message-box__close {
			color: $--custom-dialog-text-color;
		}
	}
	.el-message-box__content,
	.el-message-box__title {
		color: $--custom-dialog-text-color;
	}
}

// Notification Message
.el-message p {
	line-height: 1.5em;
}

// Table
.el-table {
	thead th {
		color: #fff;
		background-color: $--custom-table-background-main;
	}
	tr {
		color: #555;

		td {
			border: none;
		}
	}
	.tr {
		color: #555;
	}
}
.el-table--striped {
	.el-table__body {
		tr.el-table__row--striped {
			background-color: $--custom-table-background-stripe-color;
			td {
				background: none;
			}
		}
		tr.el-table__row:hover,
		tr.el-table__row:hover > td {
			background-color: $--custom-table-background-hover-color;
		}
	}
}

// Tabs
.type-selector:focus,
.el-tabs__header:focus,
.el-tabs__nav-wrap:focus,
.el-tabs__nav-scroll:focus,
.el-tabs__nav:focus {
	outline: none;
}
.el-tabs__item.is-active {
	font-weight: bold;
}


// Loading Indicator
.el-loading-mask {
	background-color: #fff;
	opacity: 0.8;
}


// Pagination
.el-pager li,
.el-pagination .btn-prev,
.el-pagination .btn-next {
	background: none;
	color: #555;
}
.el-pagination button:disabled {
	background: none;
	color: $--custom-input-background-disabled;
}
.el-pager li.btn-quicknext,
.el-pager li.btn-quickprev {
	color: #555;
}

// Notification
.el-notification {
	border-radius: 4px;
	border: none;
}

.el-notification__content {
	text-align: left;
	word-break: break-word;
}


.tags-container {
	.el-tag {
		color: $--tag-text-color;
		font-size: 12px;
		background-color: $--tag-background-color;
		border-radius: 12px;
		height: auto;
		border-color: $--tag-background-color;
		font-weight: 400;

		.el-icon-close {
			color: $--tag-background-color;
			background-color: $--tag-close-background-color !important;
			max-height: 15px;
			max-width: 15px;
			margin-right: 6px;

			&:hover {
				background-color: $--tag-close-background-hover-color !important;
			}
		}
	}
}

.add-option {
	> * {
		border: none;
	}

	i.el-select__caret {
		color: var(--color-text-dark);
	}
	.el-input .el-input__inner {
		&,
		&:hover,
		&:focus {
			border-radius: 20px;
			color: var(--color-text-dark);
			background-color: var(--color-background-base);
			border-color: var(--color-foreground-base);
			text-align: center;
		}

		&::placeholder {
			color: var(--color-text-dark);
			opacity: 1; /** Firefox */
		}
	}
}