.ska-components-label {
	color: rgba(0, 0, 0, 0.6);
	background: #e8e8e8;
	font-size: 10px;
	line-height: 1.3;
	text-transform: initial;
	border-radius: 3px;
	padding: 1px 4px;

	&--primary {
		color: rgba(255, 255, 255, 0.9);
		background: var(--ska-primary);
	}

	&--orange {
		color: #fff;
		background: #f2711c;
	}

	&--yellow {
		color: #fff;
		background: #fbbd08;
	}

	&--green {
		color: #fff;
		background: #16ab39;
	}

	&--red {
		color: #fff;
		background: #db2828;
	}

	&--teal {
		color: #fff;
		background: #009c95;
	}

	&--black {
		color: #fff;
		background: #1b1c1d;
	}

	&__group {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px;
	}

	&[role=button] {
		cursor: pointer;

		&:is(:hover, :focus-visible) {
			opacity: 0.8;
		}

		&:focus {
			opacity: 1;
		}
	}
}