// ============================================================================
// :: Bar
// ============================================================================
.m-bar {
	position: relative;

	width: 70%;
	height: 1.5rem;

	overflow: hidden;
	margin-bottom: -3rem;

	background: rgba($background-color-black, 0.1);

	border-radius: 1rem;

	@include respond-at($screen-small-base) {
		height: 2rem;
		margin-bottom: -4rem;
	}
}

// ============================================================================
// :: Elements
// ============================================================================
.m-bar__placeholder {
	position: absolute;
	top: 0;
	right: 0;

	width: 0%;
	height: 100%;

	overflow: hidden;

	background-color: lighten($background-color-grey, 10%);

	transform-origin: right center;
}

.m-bar__fill {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;


	opacity: 1;
	background: linear-gradient(90deg, #E71B32 0%, #E0B41A 31%, #C8DB17 62%, #A9CB38 100%);
}

// ============================================================================
// :: Modifiers
// ============================================================================