@import '../../../../Components/GlobalStyles/chartColors.scss';

.wc-timeline-container {
	display: flex;
	flex-direction: column;

	.this-period,
	.last-period {
		display: flex;
		flex-direction: column;

		.this-period-visuals {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.this-period-timeline {
				width: 80%;
			}

			.box {
				display: flex;
				width: 20%;
				align-items: center;
				justify-content: center;

				.box-content {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 150px;
					height: 150px;
					background: $green-to-red-gradient;
					color: #ffffff;

					.number-of-days {
						font-size: 30px;
						font-weight: bold;
					}
					.wc-label {
						text-align: center;
					}
				}
			}
		}
	}

	.cash-impact,
	.arrow-impact {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		.cash-impact-dummy,
		.arrow-impact-dummy {
			width: 80%;
		}

		.cash-impact-content,
		.arrow-impact-content {
			position: relative;
			width: 20%;

			.cash-impact-value {
				font-size: 30px;
				font-weight: bold;
				text-align: center;
				color: green;
			}

			.cash-impact-value-red {
				font-size: 30px;
				font-weight: bold;
				text-align: center;
				color: red;
			}

			.cash-impact-label {
				text-align: center;
				color: green;
			}

			.cash-impact-label-red {
				text-align: center;
				color: red;
			}
		}
		.arrow-impact-content {
			height: 80px;

			&::before {
				content: '';
				position: absolute;
				left: 50%;
				top: 20%;
				width: 2px;
				height: 60%;
				background: $green-to-red-gradient;
			}

			&::after {
				content: '';
				position: absolute;
				left: calc(50% - 2px);
				top: calc(80% - 2px);
				transform: translateY(-50%);
				width: 0;
				height: 0;
				border-top: 16px solid var(--cc-primary);
				border-left: 3px solid transparent;
				border-right: 3px solid transparent;
			}

			&.arrow-up {
				&::after {
					top: calc(20% - 2px);
					border-top: initial;
					border-bottom: 16px solid var(--cc-primary);
					border-left: 3px solid transparent;
					border-right: 3px solid transparent;
				}
			}
		}
	}
}