@use 'sass:color';
@use '../utils/box-shadow_variables';
@use '../utils/font_variables';
@use '../utils/size_variables';

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

.chart-wrapper {
  border: box-shadow_variables.$light-border;
  border-radius: size_variables.$radius-large;
  padding: size_variables.$spacing-12 size_variables.$spacing-24;
  margin-bottom: size_variables.$spacing-16;
}

// GRID LAYOUT //
.single-chart-grid {
  display: grid;
  grid-template-columns: 1fr 0.3fr 3.7fr;
  grid-template-rows: 0.5fr 1fr 1fr 0.5fr 0.25fr;
  width: 100%;
  &.no-legend {
    grid-template-rows: 0.5fr 1fr 1fr 0.25fr;
  }
}

.chart-header {
  grid-column-start: 1;
  grid-column-end: span col4-end;
  grid-row-start: 1;
  box-shadow: inset 0 -1px 0 var(--token-color-palette-neutral-200);
}

.chart-container-wide {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: span 3;
  justify-self: center;
  height: 300px;
  max-width: 700px;
  width: 100%;

  svg.chart {
    width: 100%;
    height: 100%;
  }
}

.chart-empty-state {
  place-self: center stretch;
  grid-row-end: span 2;
  grid-column-start: 1;
  grid-column-end: span 3;
  max-width: none;
  padding-right: 20px;
  padding-left: 20px;
  display: flex;

  > div {
    box-shadow: none !important;
  }

  > div.empty-state {
    white-space: nowrap;
    align-self: stretch;
    width: 100%;
  }
}

.chart-subTitle {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
}

.data-details-top {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
}

.data-details-bottom {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 4;
}

.legend {
  grid-row-start: 5;
  grid-column-start: 2;
  grid-column-end: 6;
  align-self: center;
  justify-self: center;
  font-size: size_variables.$size-9;
}

// FONT STYLES //

h2.chart-title {
  font-weight: font_variables.$font-weight-bold;
  font-size: size_variables.$size-5;
  line-height: size_variables.$spacing-24;
  margin-bottom: size_variables.$spacing-4;
}

p.chart-description {
  color: var(--token-color-palette-neutral-500);
  font-size: 14px;
  line-height: 18px;
  margin-bottom: size_variables.$spacing-8;
}

p.chart-subtext {
  color: var(--token-color-palette-neutral-400);
  font-size: size_variables.$size-8;
  line-height: 16px;
  margin-top: size_variables.$spacing-8;
}

h3.data-details {
  font-weight: font_variables.$font-weight-bold;
  font-size: size_variables.$size-8;
  line-height: 14px;
  margin-bottom: size_variables.$spacing-8;
}

p.data-details {
  font-weight: font_variables.$font-weight-normal;
  font-size: size_variables.$size-4;
}