.chartTooltipContainer {
  // This is to have a sufficient standard width for multiple column table for both desktop and mobile
  min-width: 240px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.eventsSectionContainer {
  @extend .chartTooltipContainer;
  max-width: 250px; // UX wants the events section to have a maximum width of 250px
}

.tooltipContainer {
  display: flex;
  flex-direction: inline;
}

.tooltipMobileContainer {
  display: flex;
  flex-direction: column;
}

.verticalDivider {
  width: 1px;
  background-color: var(--medium-purple);
}

.horizontalDivider {
  margin-left: 16px;
  margin-right: 16px;
  height: 1px;
  background-color: var(--medium-purple);
}

.diamond {
  margin-top: 4px;
  width: 8px;
  height: 8px;
  background-color: var(--blue); /* Default fill color */
  transform: rotate(45deg);
}

.event {
  display: -webkit-box;
}

.eventText {
  padding-left: 16px;
  padding-bottom: 16px;
}

.eventHeader {
  color: var(--dark-purple);
  font-size: var(--font-size-12);
}

.eventSubHeader {
  color: var(--dark-purple);
  font-size: var(--font-size-10);
}

.eventDateContainer {
  color: var(--purple);
  font-size: var(--font-size-10);
  padding-top: 8px;
}

.eventDescriptionContainer {
  display: flex;
  color: var(--purple);
  font-size: var(--font-size-10);
  padding-top: 8px;
  padding-right: 8px;
}

.eventButtonContainer {
  padding-left: 24px;
}

.tooltipBodycontentContainer {
  width: 100%;
  font-size: var(--font-size-12);
  border-collapse: collapse;

  .cellWrap {
    padding-bottom: 12px;
  }

  .cellWrapTable {
    padding: 12px;
  }

  .totalRowWrap {
    border-top: 1px solid var(--medium-purple);
    font-weight: var(--font-weight-bold);

    .cellWrap {
      padding: 12px 0 0;
    }

    .cellWrapTable {
      padding: 12px;
    }
  }

  .primaryColumnWrap {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px;
    align-items: center;
  }

  .swatchLineBar {
    width: 4px;
    height: 16px;
    border-radius: 2px;
    &.extraMarginBottom {
      margin-bottom: 4px;
    }
  }

  .tableHeadContainer {
    border-bottom: 2px solid var(--purple);
    padding-bottom: 16px;
  }

  .tableCellHeaderWrap {
    font-weight: var(--font-weight-semibold);
    display: flex;
    color: var(--purple);
    padding: 12px;
  }
}

.tooltipFooter {
  color: var(--medium-gray);
  font-size: var(--font-size-10);
}

.tooltipHeaderContainer {
  max-width: 400px;
  color: var(--dark-purple);
  font-size: var(--font-size-12);
  display: flex;
  flex-direction: column;
  gap: 4px;
  .primaryText {
    font-weight: var(--font-weight-bold);
  }
}