@mixin number-card {
	padding: var(--size-2-1) var(--size-4-1);
	border-radius: var(--radius-s);
	background-color: var(--color-base-30);
	font-size: var(--font-ui-small);

	&.good {
		background-color: rgba(var(--color-green-rgb), 0.35);
	}

	&.bad {
		background-color: rgba(var(--color-red-rgb), 0.35);
	}
}

.status-description {
	margin: var(--p-spacing) 0;

	.number {
		@include number-card;
		font-family: var(--font-monospace);
		font-weight: var(--bold-weight);
	}

	.error {
		color: rgb(var(--color-red-rgb));
	}

	.warning {
		color: rgb(var(--color-yellow-rgb));
	}
}

.vault-link-settings {
	h2 {
		display: flex;
		align-items: center;
		font-size: var(--h2-size);

		.version {
			@include number-card;
			margin: var(--size-2-2) 0 0 var(--size-4-2);
			background-color: var(--color-base-30);
			color: var(--color-base-70);
			font-size: var(--font-ui-smaller);
		}
	}

	.button-container {
		display: flex;
		gap: var(--size-4-2);
	}

	h3 {
		font-size: var(--font-ui-large);
		margin-top: var(--heading-spacing);
	}

	button,
	input[type="range"],
	.checkbox-container,
	.slider::-webkit-slider-thumb {
		cursor: pointer;
	}

	textarea {
		resize: none;
		width: 100%;
		height: 60px;
	}
}

.sync-status {
	display: flex;
	gap: var(--size-4-2);

	* {
		display: block;
	}

	.initialize-button {
		padding: 0 var(--size-4-2);
		background: rgba(var(--color-red-rgb), 0.4);
		cursor: pointer;
	}
}

.logs-view {
	display: flex;
	flex-direction: column;

	.logs-container {
		max-width: 100%;
		overflow-y: auto;

		.log-message {
			font: var(--font-monospace);
			margin-bottom: var(--size-2-1);
			overflow-wrap: break-word;
			white-space: pre-wrap;

			.timestamp {
				@include number-card;
				font-family: var(--font-monospace);
				font-weight: var(--bold-weight);
				margin-right: var(--size-4-1);
			}

			&.DEBUG {
				color: var(--color-base-50);
			}

			&.INFO {
				color: var(--color-green-rgb);
			}

			&.WARNING {
				color: var(--color-yellow-rgb);
			}

			&.ERROR {
				color: var(--color-red-rgb);
			}
		}
	}
}

.history-card {
	padding: var(--size-4-4);
	margin: var(--size-4-2);
	background-color: var(--color-base-00);
	border-radius: var(--radius-l);
	container-type: inline-size;

	&.clickable {
		cursor: pointer;
	}

	&.success {
		background-color: rgba(var(--color-green-rgb), 0.2);
	}

	&.error {
		background-color: rgba(var(--color-red-rgb), 0.2);
	}

	.history-card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: var(--size-4-2);
		gap: var(--size-4-2);

		@container (max-width: 300px) {
			flex-direction: column;
			align-items: flex-start;
		}

		.history-card-title {
			font: var(--font-monospace);
			display: flex;
			gap: var(--size-4-2);
			word-break: break-all;
			margin: 0;
		}

		.history-card-timestamp {
			font-size: var(--font-ui-small);
			font-style: italic;
			color: var(--italic-color);
		}
	}

	.history-card-message {
		font-size: var(--font-ui-medium);
		color: var(--color-base-70);
		margin: 0;
	}
}