/* ======================================================
   <!-- Badges -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/mixins';
@import '@uixkit/core/_global/scss/functions';
@import '@uixkit/core/_global/scss/variables';


/*
 * 1. Crazy Badges
 * 2. Status Badges
*/

.uix-badge {

	.uix-badge__inner {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}

	&.uix-badge--rounded {
		border-radius: 50%;
	}


	/*
	 ---------------------------
	 1) Crazy Badges
	 ---------------------------
	 */
	&.uix-badge--crazy {
		width: 300px;
		height: 300px;
		position: relative;
		display: table;
		margin: 0 auto;
		margin-bottom: 3rem;
		@include border-gradient( var(--uix-btn-gradient-color1), var(--uix-btn-gradient-color2), 15px, 'to bottom', #fff );
		@include transition-default();




	}


	/*
	 ---------------------------
	 2) Status Badges
	 ---------------------------
	 */
	&.uix-badge--status {
		position: relative;
		white-space: nowrap;
		margin-right: 1.5rem;
		padding-right: .625rem;


		&::after {
			content: attr(data-badge);
			position: absolute;
			text-align: center;
			top: -.625rem;
			right: -.625rem;
			font-weight: 600;
			font-size: 0.625rem;
			width: 20px;
			height: 20px;
			line-height: 20px;
			border-radius: 50%;
			background: var(--uix-highlight-color1);
			color: #fff;
		}

		&.uix-badge--status-dot {

			&::after {
				font-size: 0;
				width: 5px;
				height: 5px;
				line-height: 0;
				top: -2.5px;
				right: -2.5px;
				animation: uix-cssAnim--dotRippleTiny 2s linear infinite;

			}
		}


	}


}



@keyframes uix-cssAnim--dotRippleTiny {
    0% {
		box-shadow: 0 0 0 3px rgba(var(--uix-highlight-color1), 0.4),
					0 0 0 5px rgba(var(--uix-highlight-color1), 0.1);
    }
    100% {
		box-shadow: 0 0 0 7px rgba(var(--uix-highlight-color1), 0),
					0 0 0 12px rgba(var(--uix-highlight-color1), 0);
    }
}