// Add-ons and All Logs pages (react-conver.md §23.2).

.ssgsw-react {
	// All Logs.
	.ssgsw-logs-page {
		.ssgsw-logs-search {
			float: right;
			margin: 8px 0;
		}

		.search-box {
			display: flex;
			gap: 4px;
			margin: 0;
		}

		.tablenav {
			clear: both;
		}

		.ssgsw-sort-button {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			padding: 0;
			border: 0;
			background: transparent;
			color: var(--ssgsw-blue);
			font: inherit;
			cursor: pointer;
		}

		.ssgsw-log-field {
			word-break: break-word;
		}
	}

	.ssgsw-log-skeleton td span {
		display: block;
		height: 12px;
		border-radius: 4px;
		background: linear-gradient(90deg, #f0f0f1 25%, #e2e4e7 50%, #f0f0f1 75%);
		background-size: 200% 100%;
		animation: ssgsw-skeleton 1.2s linear infinite;
	}

	@keyframes ssgsw-skeleton {
		from {
			background-position: 200% 0;
		}

		to {
			background-position: -200% 0;
		}
	}

	@media only screen and (max-width: 782px) {
		.ssgsw-logs-page {
			.ssgsw-logs-search {
				float: none;
			}

			.search-box input[type='search'] {
				flex: 1;
			}

			// Stacked cards: every cell is shown with its column name (core hides non-primary cells).
			.ssgsw-logs-table {
				thead {
					display: none;
				}

				tr {
					display: block;
					border-bottom: 1px solid var(--ssgsw-border);
				}

				tbody td,
				tbody td.column-primary {
					display: block !important;
					padding: 6px 12px 6px 40% !important;
					position: relative;
					box-sizing: border-box;
					width: 100%;
				}

				tbody td::before {
					content: attr(data-colname);
					position: absolute;
					left: 12px;
					width: calc(40% - 20px);
					font-weight: 600;
					display: block !important;
				}

				.no-items td {
					padding: 12px !important;

					&::before {
						content: none;
					}
				}
			}
		}
	}
}