@use "sass:color";
@use "../constants" as *;

.base-table-viewer-structure {
	margin-top: 1rem;

	#dbg_lv_log-table_processing.dt-processing {
		position: absolute;
		border: none;
		box-shadow: none;
		background: #fff;
		height: 100%;
		min-width: 100%;
		border-radius: 3px;
		display: flex !important;
		align-items: center;
		justify-content: center;
		top: 0;
		left: 0;
		z-index: 10;
		margin: 0;
		padding: 0;

		// Hide default DataTables three-dot spinner
		> div {
			display: none;
		}

		.dlv-spinner-wrap {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 16px;
		}

		.dlv-spinner-label {
			font-size: 13px;
			color: #888;
		}

		.dlv-spinner {
			display: block;
			position: relative;
			transform: rotateZ(45deg);
			perspective: 1000px;
			border-radius: 50%;
			width: 48px;
			height: 48px;
			color: $main-theme-color;

			&::before,
			&::after {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: inherit;
				height: inherit;
				border-radius: 50%;
				transform: rotateX(70deg);
				animation: dlv-spin 1s linear infinite;
			}

			&::after {
				color: #FF3D00;
				transform: rotateY(70deg);
				animation-delay: 0.4s;
			}
		}

		@keyframes dlv-spin {
			0%, 100% { box-shadow:  .2em 0     0 0 currentcolor; }
			12%      { box-shadow:  .2em  .2em 0 0 currentcolor; }
			25%      { box-shadow: 0      .2em 0 0 currentcolor; }
			37%      { box-shadow: -.2em  .2em 0 0 currentcolor; }
			50%      { box-shadow: -.2em 0     0 0 currentcolor; }
			62%      { box-shadow: -.2em -.2em 0 0 currentcolor; }
			75%      { box-shadow: 0     -.2em 0 0 currentcolor; }
			87%      { box-shadow:  .2em -.2em 0 0 currentcolor; }
		}
	}

	#dbg_lv_log-table {
		border-radius: 5px;
		border: none;
		top: 25px;
		position: relative;
		width: calc(100% - 25px) !important;

		.dt-button.dropdown-item.buttons-columnVisibility:before {
			content: "\2713";
			/* Unicode checkmark */
			font-size: 14px;
			margin-right: 8px;
			visibility: hidden;
			/* Hidden by default */
		}

		.dt-button.dropdown-item.buttons-columnVisibility.dt-button-active:before {
			visibility: visible;
			/* Show when active */
		}

		thead {
			color: #fff;
			border-radius: 5px 5px 0 0;

			tr {
				vertical-align: top;
				border: 1px solid $border-color;

				th:nth-child(1) {
					text-align: left;
					padding-left: 15px;
					border-radius: 5px 0 0 0;
				}

				th {
					padding: 15px 10px;
					border-bottom: 0;
					background-color: #eaecef;
					color: rgb(135, 138, 153);
					font-weight: 500;
				}

				th:last-child {
					border-radius: 0 5px 0 0;
					padding-right: 20px;
				}
			}
		}

		tbody {
			tr {
				td:nth-child(1) {
					text-align: left;
					padding-left: 20px;
				}

				td:last-child {
					border-radius: 0 0 5px 0;
				}
				td:first-child {
					border-radius: 0 0 0 5px;
				}

				td {
					padding-top: 20px;
					padding-bottom: 20px;
					padding-left: 10px !important;
					padding-right: 10px !important;

					.stack-trace {
						color: $main-theme-color;
						text-decoration: none;
						cursor: pointer;
						display: block;
						margin-top: 10px;
						background: #0d6efd0f;
						padding: 4px 10px;
						border-radius: 5px 5px 5px 5px;
						max-width: 150px;
						&:hover {
							background-color: rgba($main-theme-color, 0.06);
							color: color.scale($main-theme-color, $lightness: -10%);
						}
						&.active {
							border-radius: 5px 5px 0 0 !important;
						}
					}

					.dlv-stack-trace {
						position: relative;
						width: 100%;

						& > pre {
							border-radius: 0 5px 5px 5px;
							padding: 10px;
							font-family: monospace;
							max-height: 400px;
							overflow-y: auto;
							color: #272822;
							white-space: pre-line;
							word-break: break-word;
							width: 100%;
							max-width: 100%;
							box-sizing: border-box;
							overflow-x: scroll;
							margin-bottom: 0;
							background: rgba($main-theme-color, 0.06);
						}
					}
				}
			}
		}
	}

	.table-wrapper {
		.right-subheader {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 10px;
			margin-bottom: -5px;

			.togglers-group {
				display: flex;
				gap: 15px;
				margin-left: 25px;
				background-color: $main-background-table-color;
				padding: 8px;
				border-radius: 5px;
				box-shadow: $block-box-shadow;

				.form-switch {
					padding-left: 10px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					transition: all 0.2s ease-in-out;
					border-right: 1px solid #d3d3d3;
					padding-right: 20px;

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

					.form-check-label {
						font-size: 14px;
						color: $main-font-color;
						font-weight: 500;
						transition: color 0.2s ease;

						&:hover {
							color: #333;
						}
					}

					input[type="checkbox"].form-check-input {
						background-repeat: no-repeat;
						transform: scale(1.1);
						margin: 0 10px 0 0;
						transition:
							transform 0.2s ease,
							box-shadow 0.2s ease;

						&:hover {
							transform: scale(1.15);
							box-shadow: 0 0 4px rgba(13, 110, 253, 0.4);
						}

						&:before {
							content: "";
						}
					}
				}
			}

			.search-input-wrapper {
				position: relative;
				display: flex;
				align-items: center;
				margin-right: 25px;
				top: -4px;
			}

			.search-icon {
				position: absolute;
				left: 12px;
				color: #888;
				font-size: 0.9em;
			}

			.search-input {
				padding-left: 35px;
				min-width: 300px;
				border-color: $border-color;
				box-shadow: $block-box-shadow;
				height: 38px;
			}
		}

		.dt-buttons {
			margin-left: 15px;

			.dropdown-menu {
				font-size: 14px;
				border: none;
				box-shadow: $block-box-shadow;
			}
		}

		.pagination {
			margin-top: 10px !important;
		}
	}
}