.xh-treemap {
  &__chart-holder {
    // Positioned absolute within container so it doesn't affect outer flex
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }

  // Mask intentionally covers but does not replace chart. We need to keep the
  // chart component in place throughout.
  &__mask-holder {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: var(--xh-bg);
  }

  rect.highcharts-point {
    stroke: rgba(0, 0, 0, 0.2);
    stroke-width: 1px;

    &.highcharts-point-select {
      // We need to *remove* the stroke in order for the inset outline to work
      stroke: none;
      outline-style: solid;
      outline-width: 1px;
      outline-offset: -1px;
      outline-color: var(--xh-blue-light);
    }
  }

  .highcharts-data-label text {
    font-family: var(--xh-font-family);
    // Use of !important overrides default styles applied inline to the label elements by HC.
    font-size: var(--xh-font-size-small-px) !important;
    font-weight: normal !important;
  }

  // Use white borders in dark theme
  &--dark rect.highcharts-point {
    stroke: rgba(255, 255, 255, 0.2);
  }
}

.xh-treemap-tooltip {
  color: var(--xh-text-color);
  border: var(--xh-border-solid);
  overflow: hidden;
  white-space: nowrap;
  min-width: 150px;

  &__label {
    padding: var(--xh-pad-half-px);
    background: var(--xh-bg-alt);
    font-size: var(--xh-font-size-small-px);
  }

  &__row {
    display: flex;
    background: var(--xh-bg);
    border-top: var(--xh-border-solid);
    font-size: var(--xh-font-size-small-px);

    & > div {
      padding: var(--xh-pad-half-px);

      &:first-of-type {
        flex: 1;
        padding-right: var(--xh-pad-px);
        font-weight: bold;
      }
    }
  }
}