/**
 * Badge 徽章
 * @Author 瞿龙俊 - qulongjun@shine.design
 * @Date 2020-03-28 13:02
 */

.#{$classPrefix}-badge {
	padding: 0;
	margin: 0;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 18px;
	width: 18px;
	border-radius: 50%;
	font-size: 0.8rem;

	// Font options
	&.#{$classPrefix}-badge--bold {
		font-weight: 500;
	}

	&.#{$classPrefix}-badge--bolder {
		font-weight: 600;
	}

	&.#{$classPrefix}-badge--boldest {
		font-weight: 700;
	}

	// Sizing
	&.#{$classPrefix}-badge--md {
		height: 24px;
		width: 24px;
		font-size: 0.9rem;
	}

	&.#{$classPrefix}-badge--lg {
		height: 35px;
		width: 35px;
		font-size: 1rem;
	}

	&.#{$classPrefix}-badge--xl {
		height: 50px;
		width: 50px;
		font-size: 1.1rem;
		font-weight: 500;
	}

	// Pics
	&.#{$classPrefix}-badge__pics {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;

		.#{$classPrefix}-badge__pic {
			border-radius: 50%;
			width: 2.5rem;
			height: 2.5rem;
			overflow: hidden;
			margin-left: -0.7rem;
			border: 1px solid #ffffff;
			background-color: #f0f3ff;
			color: #a1a8c3;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			font-weight: 500;
			position: relative;

			img {
				width: 100%;
			}

			&.#{$classPrefix}-badge__pic--last {
				font-size: 1rem;
				font-weight: 500;
			}
		}
	}

	// State colors
	@each $name, $color in $shine-state-colors {
	  &.#{$classPrefix}-badge--#{$name} {
	    color: shine-get($color, inverse);
			background: shine-get($color, base);
	  }

	  &.#{$classPrefix}-badge--outline.#{$classPrefix}-badge--#{$name} {
	    background: transparent;
	    color: shine-get($color, base);
			border: 1px solid shine-get($color, base);

			&.#{$classPrefix}-badge--outline-2x {
				border: 2px solid shine-get($color, base);
			}
	  }
	}

	// State colors
	@each $name, $color in $shine-state-colors {
	    &.#{$classPrefix}-badge--unified-#{$name} {
	    	color: shine-get($color, base);
			background: rgba(shine-get($color, base), 0.1);
	    }
	}

	// Inline mode
	&.#{$classPrefix}-badge--inline {
		height: 0;
		width: auto;
		padding: 0.75rem 0.75rem;

		// Sizing
		&.#{$classPrefix}-badge--md {
			padding: 0.8rem 0.6rem;
		}

		&.#{$classPrefix}-badge--lg {
			padding: 0.9rem 0.7rem;
		}

		&.#{$classPrefix}-badge--xl {
			padding: 1rem 0.8rem;
		}

		@include shine-rounded {
			border-radius: 2px;
		}
	}

	// Pill mode
	&.#{$classPrefix}-badge--pill {
		border-radius: 2rem;
	}

	// Rounded
	&.#{$classPrefix}-badge--rounded {
		border-radius: $shine-border-radius;
	}

	// Dot style
	&.#{$classPrefix}-badge--dot {
	    display: inline-block;
		line-height: 6px;
		min-height: 6px;
    	min-width: 6px;
    	height: 6px;
    	width: 6px;
    	font-size: 0;
    	vertical-align: middle;
    	text-align: center;

		&.#{$classPrefix}-badge--sm {
			line-height: 4px;
			min-height: 4px;
    		min-width: 4px;
			height: 4px;
			width: 4px;
		}

		&.#{$classPrefix}-badge--lg {
			line-height: 8px;
			min-height: 8px;
    		min-width: 8px;
			height: 8px;
			width: 8px;
		}

		&.#{$classPrefix}-badge--xl {
			line-height: 10px;
			min-height: 10px;
    		min-width: 10px;
			height: 10px;
			width: 10px;
		}
	}

	// Square mode
	&.#{$classPrefix}-badge--square {
		border-radius: 0;
	}

	// Elevated mode
	&.#{$classPrefix}-badge--elevate {
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
	}
}
