@use 'mixins/mixins' as *;
@use 'common/var' as *;

.#{$namespace}-icon-beat {
	animation-name: #{$namespace}-beat;
	animation-delay: 0s;
	animation-direction: normal;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.#{$namespace}-icon-bounce {
	animation-name: #{$namespace}-bounce;
	animation-delay: 0s;
	animation-direction: normal;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
}

.#{$namespace}-icon-fade {
	animation-name: #{$namespace}-fade;
	animation-delay: 0s;
	animation-direction: normal;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}

.#{$namespace}-icon-beat-fade {
	animation-name: #{$namespace}-beat-fade;
	animation-delay: 0s;
	animation-direction: normal;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}

.#{$namespace}-icon-flip {
	animation-name: #{$namespace}-flip;
	animation-delay: 0s;
	animation-direction: normal;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.#{$namespace}-icon-shake {
	animation-name: #{$namespace}-shake;
	animation-delay: 0s;
	animation-direction: normal;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.#{$namespace}-icon-spin {
	animation: #{$namespace}-spin 2s linear infinite;
}

.#{$namespace}-icon--right {
	margin-left: 5px;
}
.#{$namespace}-icon--left {
	margin-right: 5px;
}

@keyframes #{$namespace}-beat {
	0%,
	90% {
		transform: scale(1);
	}

	45% {
		transform: scale(1.25);
	}
}

@keyframes #{$namespace}-bounce {
	0% {
		transform: scale(1, 1) translateY(0);
	}

	10% {
		transform: scale(1.1, 0.9) translateY(0);
	}

	30% {
		transform: scale(0.9, 1.1) translateY(-0.5em);
	}

	50% {
		transform: scale(1.05, 0.95) translateY(0);
	}

	57% {
		transform: scale(1, 1) translateY(-0.125em);
	}

	64% {
		transform: scale(1, 1) translateY(0);
	}

	100% {
		transform: scale(1, 1) translateY(0);
	}
}

@keyframes #{$namespace}-fade {
	50% {
		opacity: 0.4;
	}
}

@keyframes #{$namespace}-beat-fade {
	0%,
	100% {
		opacity: 0.4;
		transform: scale(1);
	}

	50% {
		opacity: 1;
		transform: scale(1.125);
	}
}

@keyframes #{$namespace}-flip {
	50% {
		transform: rotate3d(0, 1, 0, -180deg);
	}
}

@keyframes #{$namespace}-shake {
	0% {
		transform: rotate(-15deg);
	}

	4% {
		transform: rotate(15deg);
	}

	8%,
	24% {
		transform: rotate(-18deg);
	}

	12%,
	28% {
		transform: rotate(18deg);
	}

	16% {
		transform: rotate(-22deg);
	}

	20% {
		transform: rotate(22deg);
	}

	32% {
		transform: rotate(-12deg);
	}

	36% {
		transform: rotate(12deg);
	}

	40%,
	100% {
		transform: rotate(0deg);
	}
}

@keyframes #{$namespace}-spin {
	0% {
		transform: rotate(0deg);
	}

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

@include b(icon) {
	--color: inherit;

	height: 1em;
	width: 1em;
	line-height: 1em;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: relative;
	fill: currentcolor;
	color: var(--color);
	font-size: inherit;

	@include when(beat) {
		animation: #{$namespace}-beat 2s linear infinite;
	}

	@include when(bounce) {
		animation: #{$namespace}-bounce 2s linear infinite;
	}

	@include when(fade) {
		animation: #{$namespace}-fade 2s linear infinite;
	}

	@include when(beat-fade) {
		animation: #{$namespace}-beat-fade 2s linear infinite;
	}

	@include when(flip) {
		animation: #{$namespace}-flip 2s linear infinite;
	}

	@include when(shake) {
		animation: #{$namespace}-shake 2s linear infinite;
	}

	@include when(spin) {
		animation: #{$namespace}-spin 2s linear infinite;
	}

	@include when(spin-reverse) {
		animation: #{$namespace}-spin 2s linear infinite;
		animation-direction: reverse;
	}

	@include when(spin-pulse) {
		animation: #{$namespace}-spin 2s linear infinite;
		animation-direction: normal;
		animation-duration: 1s;
		animation-iteration-count: infinite;
		animation-timing-function: steps(8);
	}

	@include when(rotate-90) {
		transform: rotate(90deg);
	}

	@include when(rotate-180) {
		transform: rotate(180deg);
	}

	@include when(rotate-270) {
		transform: rotate(270deg);
	}

	@include when(flip-horizontal) {
		transform: scale(-1, 1);
	}

	@include when(flip-vertical) {
		transform: scale(1, -1);
	}

	@include when(flip-both) {
		transform: scale(-1, -1);
	}

	svg {
		height: 1em;
		width: 1em;
	}
}