/* -------------------------------------------
	Counter

	- Count To
	- Count Down
---------------------------------------------- */

// issue: never used
@if use(counter) {
	// Count To
	.count-to, .counter-prefix, .counter-suffix {
		font-size: font-size(4rem);
		font-weight: 700;
		line-height: 1;
	}
	.count-to {
		&:#{$after} {
			content: '+';
		}
		
		&.wpb-sp-counter-number:#{$after} {
			content: '';
		}
	}
	.count-title {
		color: inherit;
		font-weight: 400;
	}
}

@if use_component(countdown) {
	// Count Down
	.countdown-amount {
		font-size: font-size(3rem);
		color: var(--rio-primary-color, #27c);
	}

	.countdown-container {
		display: flex;
		align-items: center;
		&.inline-type {
			.countdown-amount {
				font-size: inherit;
			}
		}
		.countdown-label {
			margin-#{$right}: 1rem;
		}
	}

	.countdown-section {
		display: inline-block;
		position: relative;
		min-width: 7.3rem;
		&:not(:last-child) {
			margin-#{$right}: 2rem;
		}
		padding: 2rem 1rem;
		text-align: center;

		&:not(:last-child)::after {
			color: #222;
			content: ':';
			display: inline-block;
			font-weight: 400;
			font-size: 20px;
			line-height: 1;
			position: absolute;
			#{$left}: 100%;
			margin-#{$left}: 8px;
			margin-top: -1px;
			top: 50%;
			transform: translateY(-50%);
		}
		span {
			display: block;
			white-space: nowrap;
		}
		.countdown-period {
			position: absolute;
			#{$left}: 0;
			width: 100%;
			bottom: 1rem;
			color: #222;
			text-transform: lowercase;
			width: 100%;
			padding-left: .2rem;
			padding-right: .2rem;
			white-space: nowrap;
			font-size: font-size(1.2rem);
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.countdown {
		&.outer-period {
			.countdown-period {
				left: 0;
				right: 0;
				text-align: center;
				bottom: -2rem;
			}
		}
		&.no-split {
			.countdown-section::after {
				content: none;
			}
		}
	}

	.grid-countdown {
		.countdown-section {
			margin: 1rem;
		}
	}
}