@use "../mixins" as *;

.info-badge {
	@include flex($inline: true, $align: center, $justify: center);
	box-sizing: border-box;
	user-select: none;
	min-inline-size: 16px;
	min-block-size: 16px;
	border-radius: 16px;
	padding: 2px 4px;
	color: var(--text-on-accent-primary);
	line-height: var(--caption-font-size);
	font: {
		family: var(--font-family-small);
		size: var(--caption-font-size);
	}
	&.severity- {
		&attention {
			background-color: var(--system-attention);
		}
		&success {
			background-color: var(--system-success);
		}
		&caution {
			background-color: var(--system-caution);
		}
		&critical {
			background-color: var(--system-critical);
		}
		&information {
			background-color: var(--system-solid-neutral);
		}
	}
	:global(svg) {
		inline-size: 8px;
		block-size: 8px;
		fill: currentColor;
	}
}