.wp-block-uagb-countdown {
	display: flex;
	justify-content: center;
	text-align: center;

	.wp-block-uagb-countdown__box {
		transition: box-shadow 0.2s ease;
	}

	&__box {
		position: relative; // Helps to position separators.
		display: flex;
		flex-direction: column;

		width: 155px;
		height: 155px;
		aspect-ratio: 1;
		justify-content: center;

		@media ( max-width: 976px ) {
			width: 100px;
			height: 100px;
		}

		@media ( max-width: 767px ) {
			width: 65px;
			height: 65px;
		}
	}

	&__time {
		// align-self: center;
		font-size: 52px;

		@media ( max-width: 976px ) {
			font-size: 32px;
		}
	}

	&__label {
		// align-self: center;
		font-size: 14px;

		@media ( max-width: 976px ) {
			font-size: 12px;
		}
	}

	.wp-block-uagb-countdown-innerblocks {
		text-align: initial;
	}
}

html:not( [dir="rtl"] ) {
	.wp-block-uagb-countdown {
		&__box {
			&:not( :last-child ) {
				margin-right: 38px;

				.wp-block-uagb-countdown__time::after {
					position: absolute;
					right: 0;
				}
			}

			&.wp-block-uagb-countdown__box-seconds {
				// So that the separator is not displayed after seconds when the Replace with Content feature is active.
				.wp-block-uagb-countdown__time-seconds::after {
					display: none;
				}
			}
		}
	}

	// Remove margin for seconds (when innerblocks are present).
	.wp-block-uagb-countdown > .wp-block-uagb-countdown__box.wp-block-uagb-countdown__box-seconds:not( :last-child ) {
		margin-right: unset;
	}
}

.wp-block-uagb-countdown-innerblocks {
	display: none;
}

html[dir="rtl"] {
	.wp-block-uagb-countdown {
		&__box {
			&:not( :first-child ) {
				margin-right: 38px;

				.wp-block-uagb-countdown__time::before {
					position: absolute;
					right: 0;
				}
			}
		}
	}
}

// These fixes are specific to the Astra theme.
body[class*="astra"] {
	.wp-block-uagb-countdown {
		line-height: normal;
	}
}
