@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);
	}
}

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

	input[type="text"],
	textarea {
		width: 250px;
	}

	textarea {
		resize: none;
		height: 75px;
	}
}