/**
 * Badge Component Style for SaltUI
 * @author minjie.lmj
 *
 * Copyright 2018-2019, SaltUI Team.
 * All rights reserved.
 */
$badgeBgColor = $function-red;

.{$prefix}-badge {
	position: relative;
	display: inline-block;
	vertical-align: middle;

	.badge-inner {
		position: absolute;
		background: $badgeBgColor;
		border-radius: 10px;
		color: #fff;
		padding: 0 7px;
		font-weight: bold;
		text-align: center;
		font-size: 12px;
		line-height: 20px;
		height: 20px;
		top: 0;
		right: 0;
		transform: translate(50%, -50%);
		z-index: 998;
	}

	&.badge-dot {
		.badge-inner {
			width: 10px;
			height: 10px;
			border-radius: 5px;
			padding: 0;
			min-width: auto;
			background: $badgeBgColor;
		}

		&.badge-status-dot {
			.badge-inner {
				width: 6px;
				height: 6px;
				border-radius: 3px;
			}
			&__info {
				.badge-inner {
					background: $function-blue;
				}
			}
			&__success {
				.badge-inner {
					background: $function-green;
				}
			}
			&__warning {
				.badge-inner {
					background: $function-orange;
				}
			}
			&__error {
				.badge-inner {
					background: $function-red;
				}
			}
			&__breathing {
				--badge-status-breath-color: $function-blue-alpha-6;
				.badge-inner {
					box-shadow: 0 0 0 3px var(--badge-status-breath-color);
					animation: 2s linear infinite dotBreath;
				}
				&.badge-status-dot__success {
					--badge-status-breath-color: $function-green-alpha-6;
				}
				&.badge-status-dot__warning {
					--badge-status-breath-color: $function-orange-alpha-6;
				}
				&.badge-status-dot__error {
					--badge-status-breath-color: $function-red-alpha-6;
				}
			}
		}
	}

	&.badge-no-child {
		position: static;

		.badge-inner {
			position: static;
			transform: none;
			top: 50%;
		}
	}

	&.badge-corner {
		overflow: hidden;

		.badge-inner {
			position: absolute;
			transform: rotate(45deg);
			border-radius: 0;
			padding: 0 20px;
			// line-height: 12px;
			top: 11px;
			right: -17px;
			white-space: nowrap;
			width: 70px;
		}

		&.badge-no-child {
			position: absolute;
			right: 0;
			top: 0;
			width: 50px;
			height: 50px;

			&.badge-lt {
				right: auto;
			}

			&.badge-lb {
				right: auto;
				top: auto;
				bottom: 0;
			}

			&.badge-rt {
				left: auto;
			}

			&.badge-rb {
				left: auto;
				top: auto;
				bottom: 0;
			}
		}

		&.badge-lt {
			.badge-inner {
				transform: rotate(-45deg);
				right: auto;
				left: -15px;
			}
		}

		&.badge-lb {
			.badge-inner {
				right: auto;
				left: -15px;
				bottom: 9px;
				top: auto;
			}
		}

		&.badge-rb {
			.badge-inner {
				transform: rotate(-45deg);
				top: auto;
				bottom: 9px;
			}
		}
	}
}

@keyframes dotBreath {
	0% {
		box-shadow: 0 0 0 1px var(--badge-status-breath-color);
	}
	50% {
		box-shadow: 0 0 0 3px var(--badge-status-breath-color);
	}
	100% {
		box-shadow: 0 0 0 1px var(--badge-status-breath-color);
	}
}