// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
// For licensing, see LICENSE.md.

@use 'helpers/color';
@use 'helpers/font';
@use 'helpers/spacing';

@mixin badge( $color ) {
	&--#{ $color } {
		border-color: color.u-color( 'badge-#{ $color }' );
		color: color.u-color( 'badge-#{ $color }' );

		.badge__invert {
			color: color.u-color( 'text-invert' );
			background: color.u-color( 'badge-#{ $color }' );
		}

	  	a {
			color: inherit;
			text-decoration: none;

			&:hover {
				color: color.u-color('badge-#{ $color }', -50% );
				text-decoration: none;
			}
		}
	}
}

.badge {
	vertical-align: middle;
	text-transform: uppercase;
	font-size: font.u-font-size( -1 );
	padding: spacing.u-spacing( -3 ) spacing.u-spacing( -2 ) spacing.u-spacing( -3 );
	border: 1px solid color.u-color( 'text' );
	margin-right: 1rem;

	&.badge--has-invert {
		padding-right: 0;
	}

	.badge__invert {
		color: color.u-color( 'text-invert' );
		background: color.u-color( 'text' );
		padding: spacing.u-spacing( -3 ) spacing.u-spacing( -2 );
		margin-left: spacing.u-spacing( -4 );
	}

	@include badge( 'gray' );
	@include badge( 'green' );
	@include badge( 'red' );
	@include badge( 'orange' );
	@include badge( 'purple' );

	/* #357. */
	&.badge--observable {
		a  {
			&::before {
				content: "";
				position: relative;
				display: inline-block;
				vertical-align: middle;
				width: 12px;
				height: 12px;
				margin-right: 3px;
				background-size: cover;
				background-repeat: no-repeat;
				top: -1px;

				background-image: url( ../img/eye.svg );
			}
		}
	}
}
