@import url("../../../assets/css/global/colors.css");

.has-clocks-layout-digital-column,
.has-clocks-layout-digital-row,
.has-clocks-layout-clock,
.has-clocks-layout-clock-reverse {

	& > .wp-block-world-clocks-clock {
		border-bottom: 1px solid var(--c-dusty-gray);
		display: flex;
		flex: 1;
		overflow-wrap: anywhere;
		padding: 24px 0;

		& .clock-datetime,
		& .clock-label,
		& .digital-clock,
		& .clock-date {
			font-size: 18px;
			margin: 0;
			padding: 0;
		}

		& .digital-clock {
			font-size: 24px;
		}
	}
}

.has-clocks-layout-digital-column,
.has-clocks-layout-clock,
.has-clocks-layout-clock-reverse {

	& > .wp-block-world-clocks-clock {
		flex-direction: column;
		gap: 24px;
		justify-content: flex-start;

		& .clock-datetime {
			align-items: center;
			display: flex;
			flex-direction: column;
		}
	}

	&.has-clocks-1-columns,
	&.has-clocks-2-columns,
	&.has-clocks-3-columns,
	&.has-clocks-4-columns {

		& > .wp-block-world-clocks-clock {
			flex-basis: 100%;

			&:last-of-type {
				border-bottom: unset;
			}
		}
	}

	&.has-clocks-2-columns {

		&.has-clocks-not-stacked-on-mobile .wp-block-world-clocks-clock {
			border-right: 1px solid var(--c-dusty-gray);
			flex-basis: 49%;

			&:nth-last-child(-n + 2):nth-child(2n + 1),
			&:nth-last-child(-n + 2):nth-child(2n + 1) ~ & {
				border-bottom: unset;
			}

			&:nth-child(2n),
			&:last-of-type {
				border-right: unset;
			}
		}

		@media screen and (min-width: 768px) {

			& > .wp-block-world-clocks-clock {
				border-right: 1px solid var(--c-dusty-gray);
				flex-basis: 49%;

				&:nth-last-child(-n + 2):nth-child(2n + 1),
				&:nth-last-child(-n + 2):nth-child(2n + 1) ~ & {
					border-bottom: unset;
				}

				&:nth-child(2n),
				&:last-of-type {
					border-right: unset;
				}
			}
		}
	}

	&.has-clocks-3-columns {

		&.has-clocks-not-stacked-on-mobile .wp-block-world-clocks-clock {
			border-right: 1px solid var(--c-dusty-gray);
			flex-basis: 33%;

			&:nth-last-child(-n + 3):nth-child(3n + 1),
			&:nth-last-child(-n + 3):nth-child(3n + 1) ~ & {
				border-bottom: unset;
			}

			&:nth-child(3n),
			&:last-of-type {
				border-right: unset;
			}
		}

		@media screen and (min-width: 768px) {

			& > .wp-block-world-clocks-clock {
				border-right: 1px solid var(--c-dusty-gray);
				flex-basis: 33%;

				&:nth-last-child(-n + 3):nth-child(3n + 1),
				&:nth-last-child(-n + 3):nth-child(3n + 1) ~ & {
					border-bottom: unset;
				}

				&:nth-child(3n),
				&:last-of-type {
					border-right: unset;
				}
			}
		}
	}

	&.has-clocks-4-columns {

		&.has-clocks-not-stacked-on-mobile .wp-block-world-clocks-clock {
			border-right: 1px solid var(--c-dusty-gray);
			flex-basis: 24%;

			&:nth-last-child(-n + 4):nth-child(4n + 1),
			&:nth-last-child(-n + 4):nth-child(4n + 1) ~ & {
				border-bottom: unset;
			}

			&:nth-child(4n),
			&:last-of-type {
				border-right: unset;
			}
		}

		@media screen and (min-width: 768px) {

			& > .wp-block-world-clocks-clock {
				border-right: 1px solid var(--c-dusty-gray);
				flex-basis: 24%;

				&:nth-last-child(-n + 4):nth-child(4n + 1),
				&:nth-last-child(-n + 4):nth-child(4n + 1) ~ & {
					border-bottom: unset;
				}

				&:nth-child(4n),
				&:last-of-type {
					border-right: unset;
				}
			}
		}
	}
}

.has-clocks-layout-digital-row,
.has-clocks-layout-clock,
.has-clocks-layout-clock-reverse {

	& > .wp-block-world-clocks-clock {
		align-items: center;
	}
}

.has-clocks-layout-digital-row {

	& > .wp-block-world-clocks-clock {
		flex-basis: 100%;
		flex-direction: column;
		gap: 24px;
		justify-content: start;

		@media screen and (min-width: 480px) {

			flex-direction: row;
			gap: unset;
			justify-content: space-between;
		}

		&:last-of-type {
			border-bottom: unset;
		}

		& .clock-datetime {
			align-items: center;
			display: flex;
			flex-direction: column;

			@media screen and (min-width: 480px) {

				align-items: start;
			}

			@media screen and (min-width: 768px) {

				align-items: center;
				flex-direction: row;
				gap: 24px;
			}
		}
	}
}

.has-clocks-layout-clock,
.has-clocks-layout-clock-reverse {

	& > .wp-block-world-clocks-clock {

		& .analog-clock {
			align-items: center;
			background-color: var(--c-white);
			border-radius: 50%;
			box-shadow: 0 2px 30px rgba(0, 0, 0, 0.3);
			display: flex;
			height: 150px;
			justify-content: center;
			position: relative;
			width: 150px;

			& .indicator {
				display: flex;
				height: 100%;
				justify-content: center;
				position: absolute;
				width: 100%;

				&::after {
					content: "";
					font-size: 12px;
					font-weight: 700;
					left: 50%;
					position: absolute;
					text-transform: uppercase;
					top: 60%;
					transform: translate(-46%, -50%);
				}

				&.am::after {
					content: "AM";
				}

				&.pm::after {
					content: "PM";
				}

				&::before {
					background-color: var(--c-black);
					border: 2px solid var(--c-red);
					border-radius: 50%;
					content: "";
					height: 4px;
					left: 50%;
					position: absolute;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 4px;
					z-index: 100;
				}

				& .hand {
					background-color: var(--c-red);
					border-radius: 25px;
					bottom: 0;
					height: 37%;
					left: calc(50% - 1px);
					position: absolute;
					top: 13%;
					transform-origin: bottom;
					width: 1%;
					z-index: 99;

					&.minute {
						background-color: var(--c-black);
						height: 32%;
						opacity: 0.8;
						top: 18%;
						width: 1.1%;
					}

					&.hour {
						background-color: var(--c-black);
						height: 27%;
						top: 23%;
						width: 1.2%;
					}
				}
			}

			& .number-indicator {
				inset: -5px;
				position: absolute;
				text-align: center;

				& span {
					display: inline-block;
					font-size: 14px;
					font-weight: 600;
				}

				&.one {
					transform: rotate(calc(1 * (360deg / 12)));

					& .number {
						transform: rotate(calc(1 * (-360deg / 12)));
					}
				}

				&.two {
					transform: rotate(calc(2 * (360deg / 12)));

					& .number {
						transform: rotate(calc(2 * (-360deg / 12)));
					}
				}

				&.three {
					transform: rotate(calc(3 * (360deg / 12)));

					& .number,
					& .combine {
						transform: rotate(calc(3 * (-360deg / 12)));
					}
				}

				&.four {
					transform: rotate(calc(4 * (360deg / 12)));

					& .number {
						transform: rotate(calc(4 * (-360deg / 12)));
					}
				}

				&.five {
					transform: rotate(calc(5 * (360deg / 12)));

					& .number {
						transform: rotate(calc(5 * (-360deg / 12)));
					}
				}

				&.six {
					transform: rotate(calc(6 * (360deg / 12)));

					& .number,
					& .combine {
						transform: rotate(calc(6 * (-360deg / 12)));
					}
				}

				&.seven {
					transform: rotate(calc(7 * (360deg / 12)));

					& .number {
						transform: rotate(calc(7 * (-360deg / 12)));
					}
				}

				&.eight {
					transform: rotate(calc(8 * (360deg / 12)));

					& .number {
						transform: rotate(calc(8 * (-360deg / 12)));
					}
				}

				&.nine {
					transform: rotate(calc(9 * (360deg / 12)));

					& .number,
					& .combine {
						transform: rotate(calc(9 * (-360deg / 12)));
					}
				}

				&.ten {
					transform: rotate(calc(10 * (360deg / 12)));

					& .number {
						transform: rotate(calc(10 * (-360deg / 12)));
					}
				}

				&.eleven {
					transform: rotate(calc(11 * (360deg / 12)));

					& .number {
						transform: rotate(calc(11 * (-360deg / 12)));
					}
				}

				&.twelve {
					transform: rotate(calc(12 * (360deg / 12)));

					& .number,
					& .combine {
						transform: rotate(calc(12 * (-360deg / 12)));
					}
				}
			}
		}
	}
}