@use "../../variables/colors" as colors;

.edd-progress-bar {
	display: grid;
	background: colors.$wp-gray-5;
	border-radius: 99999px;
	padding: 2px;
	box-shadow: inset 0 0 1px 1px colors.$wp-input-border;
	align-items: center;

	&.small {
		height: 14px;
	}

	&.medium {
		height: 16px;
	}

	&.large {
		height: 20px;
		padding: 4px;
	}

	> .progress {
		height: 100%;
		border-top-right-radius: 99999px;
		border-bottom-right-radius: 99999px;
		border-top-left-radius: 99999px;
		border-bottom-left-radius: 99999px;
		background-color: rgba(colors.$wp-green-30, 0.3);
		overflow: hidden;
		min-width: 10%;
		width: var(--progress-width, 0%);
		grid-area: 1/-1;
	}

	> .label {
		color: colors.$wp-input-text;
		font-weight: 400;
		font-size: .75rem;
		text-shadow: 0px 0px 12px rgba(255,255,255,0.5);
		grid-area: 1/-1;
		text-align: center;
		line-height: 1;
	}
}