@import '../../styles/variables';

@keyframes fade-in-0-4 {
	from {
		opacity: 0;
	}

	to {
		opacity: 0.4;
	}
}

.Dashboard--Chart {
	display: flex;
	position: relative;

	.TimeSeriesChart {
		position: absolute;
		top: 50px;
		right: 22px;
		bottom: 0;
		left: 22px;

		&::before {
			content: '';
			border: 2px solid var(--section-border-color);
			position: absolute;
			top: 3px;
			right: 3px;
			bottom: 33px;
			left: 3px;
		}
	}

	.overlay {
		width: 100%;
		height: 0; /* Lets the graph underneath receive pointer events */
		display: flex;
		margin: 20px 24px 0;
		z-index: 1;
		justify-content: space-between;

		.resolution-buttons {
			button {
				background: var(--primary-color-opacity-0-2);
				border: 0.5px solid transparent;
				font-size: 11px;
				font-weight: 600;
				color: #687bf7;
				text-transform: uppercase;

				&.active {
					border-color: #687bf7;
				}
			}
		}
	}

	.Empty {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 17px;
		user-select: none;
		cursor: default;

		p {
			display: block;
			margin: 0;
			padding: 0;
			font-size: 20px;
			opacity: 0.4;
			animation: fade-in-0-4 1s;
		}
	}
}
