@use '@talend/design-tokens/lib/tokens' as tokens;

//
// Labels
// --------------------------------------------------

.label {
	display: inline-block;
	height: 0.9375rem;
	padding: 0 $padding-smaller;
	font-size: 0.75rem;
	font-weight: $font-weight-semi-bold;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 0.3em;

	// [converter] extracted a& to a.label

	// Empty labels collapse automatically (not available in IE8)
	&:empty {
		display: none;
	}

	// Quick fix for labels in buttons
	.btn & {
		position: relative;
		top: -1px;
	}
}

// Add hover effects, but only for links
// stylelint-disable-next-line selector-no-qualifying-type
a.label {
	&:hover,
	&:focus {
		// color: $label-link-hover-color;
		text-decoration: none;
		cursor: pointer;
	}
}

// Colors
// Contextual variations (linked labels get darker on :hover)

.label-default {
	color: tokens.$coral-color-neutral-text;
	background: tokens.$coral-color-neutral-background-strong;

	&[href] {
		&:hover,
		&:focus {
			background: tokens.$coral-color-neutral-background-strong;
		}
	}
}

.label-primary {
	color: tokens.$coral-color-accent-text;
	background: tokens.$coral-color-accent-background;

	&[href] {
		&:hover,
		&:focus {
			background: tokens.$coral-color-accent-background;
		}
	}
}

.label-success {
	color: tokens.$coral-color-success-text;
	background: tokens.$coral-color-success-background;

	&[href] {
		&:hover,
		&:focus {
			background: tokens.$coral-color-success-background;
		}
	}
}

.label-info {
	color: tokens.$coral-color-info-text;
	background: tokens.$coral-color-info-background;

	&[href] {
		&:hover,
		&:focus {
			background: tokens.$coral-color-info-background;
		}
	}
}

.label-warning {
	color: tokens.$coral-color-warning-text;
	background: tokens.$coral-color-warning-background;

	&[href] {
		&:hover,
		&:focus {
			background: tokens.$coral-color-warning-background;
		}
	}
}

.label-danger {
	color: tokens.$coral-color-danger-text;
	background: tokens.$coral-color-danger-background;

	&[href] {
		&:hover,
		&:focus {
			background: tokens.$coral-color-danger-background;
		}
	}
}