.wp-block-themeisle-blocks-countdown {
	--background-color: transparent;
	--border-color: #000;
	--border-radius: 0px;

	--width: 100%;
	--container-width: clamp(400px, var(--width) * 4, 100%);
	--container-width-tablet: var(--container-width);
	--container-width-mobile: var(--container-width-tablet);

	--height: 100px;
	--height-tablet: var(--height);
	--height-mobile: var(--height-tablet);

	--border-style: solid;
	--border-width: 2px;
	--border-width-tablet: var(--border-width);
	--border-width-mobile: var(--border-width-tablet);

	--gap: 6px;
	--gap-tablet: 6px;
	--gap-mobile: 6px;

	--value-font-size: 1.5rem;
	--value-font-size-tablet: var(--value-font-size);
	--value-font-size-mobile: var(--value-font-size-tablet);

	--label-font-size: 0.6rem;
	--label-font-size-tablet: var(--label-font-size);
	--label-font-size-mobile: var(--label-font-size-tablet);

	--alignment: center;

	--padding: 0px;
	--padding-tablet: var(--padding);
	--padding-mobile: var(--padding-tablet);

	--value-font-weight: regular;
	--label-font-weight: regular;

	border: none;

	.otter-countdown__container {
		display: flex;
		justify-content: var(--alignment);
		height: var(--height);

		@media ( max-width: 960px ) {
			height: var(--height-tablet);
		}

		@media ( max-width: 600px ) {
			height: var(--height-mobile);

		}

	}

	.otter-countdown__display {
		display: flex;
		flex-direction: row;
		width: var(--container-width, 100%);
		gap: var( --gap );
		height: 100%;

		@media ( max-width: 960px ) {
			gap: var( --gap-tablet );
			width: var(--container-width-tablet, 100%);
		}

		@media ( max-width: 600px ) {
			gap: var( --gap-mobile );
			width: var(--container-width-mobile, 100%);
		}
	}

	.otter-countdown__display-area {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: var( --background-color );
		border: var( --border-width ) var(--border-style) var( --border-color );
		border-radius: var( --border-radius );
		box-sizing: border-box;
		width: 100%;
		padding: var(--padding);
		height: 100%;

		@media ( max-width: 960px ) {
			border: var( --border-width-tablet ) var(--border-style) var( --border-color );
			padding: var(--padding-tablet);
		}

		@media ( max-width: 600px ) {
			border: var( --border-width-mobile ) var(--border-style) var( --border-color );
			padding: var(--padding-mobile);
		}

		&[name="separator"] {
			.otter-countdown__label {
				opacity: 0%;
				text-overflow: clip;
				word-break: normal;
			}
			border: unset;
			background-color: transparent;
			width: max-content;
		}
	}

	.otter-countdown__value {
		display: flex;
		justify-content: center;
		font-size: var( --value-font-size );
		font-weight: var( --value-font-weight );
		line-height: 1.2;
		text-align: center;
		width: 100%;

		@media ( min-width: 600px ) and ( max-width: 960px ) {
			font-size: var( --value-font-size-tablet );
		}

		@media ( max-width: 600px ) {
			font-size: var( --value-font-size-mobile );
		}
	}

	&:not(.ready) {
		.otter-countdown__display-area:not([name="separator"]) {

			.otter-countdown__value {
				animation: skeleton-loading 1.6s linear infinite alternate;
				color: transparent !important;
				border-radius: 8px;
				width: 50%;
			}
		}

	}

	&.o-hide {
		display: none;
	}

	@keyframes skeleton-loading {
		0% {
		  background-color: hsl(200, 20%, 80%);
		}
		100% {
		  background-color: hsl(200, 20%, 95%);
		}
	}

	.otter-countdown__label {
		font-size: var( --label-font-size );
		font-weight: var( --label-font-weight );
		min-height: 1rem;
		text-align: center;
		width: 100%;

		@media ( max-width: 960px ) {
			font-size: var( --label-font-size-tablet );
		}

		@media ( max-width: 600px ) {
			font-size: var( --label-font-size-mobile );
		}
	}
}
