// ServiceNow Design System

// NOW Icon

@import '@servicenow/sass-kit/host';

$now-icon--sm: now-fn-px2rem(12px);
$now-icon--md: now-fn-px2rem(16px);
$now-icon--lg: now-fn-px2rem(24px);
$now-icon--xl: now-fn-px2rem(32px);

:host {
	--now-line-height: 0;
	display: inline-block;
	vertical-align: middle;
	font-size: $now-global-font-size--md;
	color: inherit;
	fill: currentColor;
	stroke: currentColor;

	.-spin {
		animation: spin 2s infinite linear;
	}
}

.now-icon {
	&.-sm {
		width: $now-icon--sm;
		height: $now-icon--sm;
	}

	&.-md {
		width: $now-icon--md;
		height: $now-icon--md;
	}

	&.-lg {
		width: $now-icon--lg;
		height: $now-icon--lg;
	}

	&.-xl {
		width: $now-icon--xl;
		height: $now-icon--xl;
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.now-icon-presence {
	&.-available {
		color: RGB($now-color_presence--available);
	}

	&.-busy {
		color: RGB($now-color_presence--busy);
	}

	&.-away {
		color: RGB($now-color_presence--away);
	}

	&.-offline {
		color: RGB($now-color_presence--offline);
	}
}