@use "../kit-deps" as *;
@use "typography" as *;

.badge {
	position: relative;
	overflow: hidden;
	background: $color-primary;
	color: $color-black;
	padding: $space-1 $space-2;
	font-size: $font-size-sm;
	font-weight: $font-weight-semibold;
	line-height: $line-height-base;
	letter-spacing: $letter-spacing-wide;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	transition-duration: $motion-base;
	transition-timing-function: $motion-ease;
	transition-property: filter, transform, border-color, color, background;

	&::after {
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		width: 40%;
		background: linear-gradient(90deg, transparent, rgba($color-black, 0.16), transparent);
		opacity: 0;
		pointer-events: none;
		transform: translateX(-120%);
	}

	@include hover_touch {
		filter: saturate(1.12);
		transform: translateY(-1px);

		&::after {
			opacity: 1;
			animation: terminal_scan_x 0.7s $motion-ease;
		}
	}

	&.badge-success {
		background: $color-success;
	}

	&.badge-warning {
		background: $color-warning;
	}

	&.badge-error,
	&.badge-danger {
		background: $color-error;
	}

	&.badge-info {
		background: $color-info;
		color: $color-black;
	}

	&.badge-secondary {
		background: $color-secondary;
		color: $color-black;
	}

	&.badge-primary-outline {
		color: $color-text-light;
		border: $border-width-base solid $color-text-light;
		background: transparent;
		padding: ($space-1 - 2px) $space-2;
	}
}