@use "../utilities" as *;

/**----------------------------------------
START: Progress bar CSS
----------------------------------------*/
.tj-progress {
	&-list {
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 30px;
		margin-top: 20px;
		@media #{$md,$sm,$xs} {
			gap: 20px;
		}
	}
	width: 100%;
	padding: 0;
	margin: 0;
	height: 4px;
	background: var(--tj-color-theme-bg);
	position: relative;
	z-index: 0;
	&-title {
		font-size: 16px;
		color: var(--tj-color-text-body);
		font-weight: var(--tj-fw-sbold);
		letter-spacing: 0;
		margin-bottom: 3px;
	}
	&-bar {
		width: 0;
		height: 100%;
		background: var(--tj-color-theme-primary);
		position: relative;
		z-index: 1;
	}
	&-percent {
		font-size: 16px;
		line-height: 1;
		font-weight: var(--tj-fw-sbold);
		height: auto;
		position: absolute;
		inset-inline-end: 0;
		bottom: 11px;
		z-index: 2;
	}
}

/* !END: Progress bar CSS */