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

	.number {
		padding: var(--size-2-1) var(--size-4-1);
		border-radius: var(--radius-s);
		background-color: var(--color-base-30);
		font-family: var(--font-monospace-default);
		font-weight: var(--bold-weight);
		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);
		}
	}

	.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 {
			display: block;
			font-size: var(--font-ui-smaller);
			margin-top: var(--size-2-2);
			margin-left: var(--size-4-2);
			padding: var(--size-2-1) var(--size-4-1);
			background-color: var(--color-base-30);
			color: var(--color-base-70);
			border-radius: var(--radius-s);
		}
	}

	.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;
	}
}

.log-message {
	font: var(--font-monospace-theme);

	&.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) var(--size-4-6);
	margin: var(--size-4-2);
	background-color: var(--color-base-00);
	border-radius: var(--radius-l);

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

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

	* {
		margin: 0;
		padding: 0;
	}

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

		.history-card-title {
			font: var(--font-monospace-theme);
		}

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

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