@use "~admin-stylesheets/colors";

.nab-quota-meter {

	&__title {
		font-size: 0.9em;
		margin-bottom: 0;
		margin-top: 5px;
	}

	&__amount {
		float: right;

		&--empty {
			font-weight: 600;
		}
	}

	&__warning-icon {
		color: colors.$nab-background-red;
		font-size: 16px;
	}

	&__bar-container {
		background-color: colors.$nab-background-light-grey;
		border-radius: 3px;
		height: 20px;
		padding: 0;
		position: relative;
	}

	&__bar {
		border-radius: 3px;
		display: block;
		height: 100%;
		overflow: hidden;
		position: absolute;
		width: 100%;
		background-color: colors.$nab-background-green;
		transition: background-color 500ms ease;

		@for $i from 0 through 100 {
			&--width-#{$i} {
				animation: nab-shrink-quota-#{$i} 500ms 2s ease forwards;
				transition: background-color 500ms ease;
			}

			@keyframes nab-shrink-quota-#{$i} {

				from {
					width: 100%;
					background-color: colors.$nab-background-green;
				}

				to {
					width: $i * 1%;

					@if ($i <= 15) {
						background-color: colors.$nab-background-red;
					} @else if ($i <= 30) {
						background-color: colors.$nab-background-orange;
					} @else {
						background-color: colors.$nab-background-green;
					}
				}
			}
		}

		&--disabled {
			background-color: colors.$nab-text-light-grey !important;
		}
	}

	&__boost-icon {
		display: inline-block;
		animation: nab-boost-float 2.4s ease-in-out infinite;

		@media (prefers-reduced-motion: reduce) {

			& {
				animation: none;
			}
		}
	}
}

@keyframes nab-boost-float {

	0%,
	100% {
		transform: translateY(0) rotate(-6deg);
	}

	50% {
		transform: translateY(-2px) rotate(6deg);
	}
}