@keyframes pulse-live {
	0% {
		box-shadow: 0 0 0 0 var(--pulse);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(0, 212, 57, 0);
	}
}

@mixin pulse-dot {
	&::after {
		content: '';
		top: 50%;
		margin-left: 0.4rem;
		position: absolute;
		display: block;
		border-radius: 50%;
		background-color: var(--color);
		border-radius: 50%;
		transform: translate(-50%, -50%);
		animation: pulse-live 2s infinite;
		height: 16px;
		width: 16px;
	}
}

.card {
	background: #fbf6f4;
	box-shadow: var(
		--str-shadow-s,
		0px 0px 2px #22242714,
		0px 1px 4px #2224271f,
		0px 4px 8px #22242729
	);
	pointer-events: all;
	cursor: auto;
}

.header {
	display: flex;
	padding: 0.75rem;
	background-color: white;
	align-items: center;
	font-size: 16px;

	.icon {
		height: 24px;
		width: 24px;
		margin-right: 0.75rem;
	}

	.subtle {
		margin-left: 0.25rem;
		color: rgba(0, 0, 0, 0.4);
		font-weight: 500;
		font-size: 0.9rem;
	}

	.status {
		height: 1rem;
		width: 1rem;
		border-radius: 50%;
		margin-left: auto;
		position: relative;
		@include pulse-dot;

		&.ok {
			--color: var(--positive);
			--pulse: var(--pulse-positive);
		}
		&.warning {
			--color: var(--warning);
			--pulse: var(--pulse-warning);
		}
		&.error {
			--color: var(--negative);
			--pulse: var(--pulse-negative);
		}
	}
}

.footer {
	padding: 0.5rem;
	background-color: white;
}

.resource {
	display: grid;
	grid-template-columns: auto auto;
	padding: 0.5rem;
	background-color: var(--bg);

	row-gap: 6px;
	max-width: 330px;

	> div,
	span {
		display: flex;
		padding: 0 0.5rem;
	}
}

:global(.resource .title svg) {
	height: 1rem;
	width: 1rem;
}

.footer {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex-wrap: wrap;
	gap: 0.5rem;

	margin-top: auto;
	background: white;
	padding: 0.5rem;
	border-bottom-left-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;

	button {
		border: none;
		position: relative;
		background: transparent;
		height: unset;
		border-radius: 0.5rem;
		display: inline-block;
		text-decoration: none;
		padding: 0 0.5rem;
		flex: 1;

		span {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 1.5rem;
			padding: 0 0.5rem;
			margin-left: -0.5rem;
			border: 1px solid #eaddd5;
			border-radius: inherit;
			white-space: nowrap;
			cursor: pointer;
			font-weight: 700;
		}

		&::after {
			content: '';
			position: absolute;
			right: 0;
			top: 0;
			border-radius: 0.5rem;
			width: 100%;
			height: 100%;
			transition: transform 0.1s ease;
			will-change: box-shadow 0.25s;
			pointer-events: none;
		}
	}
}

.positive {
	color: #077c35;
}