@import "../constants.scss";
@import "../base/base-table-view.scss";

.istkr-log-viewer {
	@extend .base-table-viewer-structure;

	.manual-debugging-instructions_or {
		margin-top: 30px;
		font-weight: bold;
		text-align: center;
	}
	.manual-debugging-instructions {
		text-align: center;
		display: block;
		margin: 10px auto;
		color: $main-theme-color;
	}
	.top-section {
		background-color: #fff;
		border-radius: 5px;
		box-shadow: $box-shadow;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px 25px;

		.log-filepath {
			width: 100%;
			background-color: $body-color;
			padding: 7px;
			border-radius: 5px;
			border: 1px solid #ccc;
			padding-left: 15px;
		}

		.buttons {
			padding-left: 15px;
			min-width: 130px;

			.clear-log,
			.refresh-log,
			.download-log,
			.live-update {
				margin: 0;
				width: 35px;
				height: 35px;
				padding: 0;
				font-size: 14px;
			}
			.live-update {
				animation: pulseAnimation 1s infinite;
			}

			@keyframes pulseAnimation {
				0% {
					transform: scale(1);
				}
				50% {
					transform: scale(1.04);
				}
				100% {
					transform: scale(1);
				}
			}

			.refresh-log,
			.download-log {
				background-color: $main-theme-color;
			}

			.clear-log {
				background-color: $danger-color;
			}
		}
	}

	pre {
		overflow-x: scroll;
		padding: 10px;
		background-color: #eee;
	}

	.table-wrapper {
		background: #fff;
		margin-top: 25px;
		padding: 15px 25px;
		border-radius: 5px;
		box-shadow: $box-shadow;

		#istkr_log-table {
			width: 100% !important;

			.badge {
				min-width: 65px;
			}
		}
	}

	.bootstrap-switch {
		margin-right: 0;
	}

	.bootstrap-switch-on {
		background: $main-theme-color;
	}

	.log-not-found {
		background: $white;
		padding: 25px;
		border-radius: 5px;
		box-shadow: $box-shadow;

		code {
			color: $main-theme-color;
		}

		h5 {
			text-align: center;
			padding: 20px;

			span {
				font-weight: 300;
			}
		}

		button {
			margin: 0 auto;
			display: block;
			background-color: $main-theme-color;
			text-transform: uppercase;
			font-weight: 500;
		}

		.card {
			max-width: 100%;
		}
	}
}