@use "../abstracts/variables" as variables;

.firevert-analytics {
	&__chart-row {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin-bottom: 30px;

		@media #{variables.$md} {
			flex-direction: row;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}

	&__chart-container {
		background: #fff;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		padding: 24px;
		width: calc(100% - 48px);

		@media #{variables.$md} {
			width: 100%;
		}

		&--large {
			flex: 1;
			width: calc(100% - 48px);

			@media #{variables.$md} {
				width: 100%;
			}
		}

		&--medium {
			flex: 1;
			min-width: 0;
		}

		canvas {
			height: 260px !important;

			@media #{variables.$md} {
				height: 320px !important;
			}
		}
	}

	&__chart-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;
	}

	&__chart-title {
		margin: 0;
		font-size: 14px;
		font-weight: 500;
		color: #374151;
	}

	&__chart-badge {
		padding: 3px 10px;
		border-radius: 10px;
		font-size: 11px;
		font-weight: 400;
		white-space: nowrap;

		&--low {
			background: #f3f4f6;
			color: #6b7280;
		}

		&--medium {
			background: #dbeafe;
			color: #1e40af;
		}

		&--high {
			background: #fee2e2;
			color: #991b1b;
		}

		&--very-high {
			background: #d1fae5;
			color: #065f46;
		}
	}
}