.chart {
  position: relative;

  .chart-tooltip {
    position: absolute;
    top: 0;
    display: none;
    background: $white;
    color: rgba($black, 0.6);
    border: 1px solid $grey;
    min-width: 150px;
    margin-top: -10px;
    transform: translate(-50%, -100%);
    transition: 0.2s top ease-out, 0.2s left ease-out;
    pointer-events: none;
    z-index: $z-tooltip;

    &::before {
      pointer-events: none;
      display: inline-block;
      content: '';
      width: 0;
      height: 0;
      border-top: 7px solid $grey;
      border-right: 7px solid transparent;
      border-left: 7px solid transparent;
      position: absolute;
      transform: translateX(-7px);
      left: 50%;
      bottom: -8px;
      z-index: $z-tooltip;
    }

    &::after {
      pointer-events: none;
      display: inline-block;
      content: '';
      width: 0;
      height: 0;
      border-top: 6px solid $white;
      border-right: 6px solid transparent;
      border-left: 6px solid transparent;
      position: absolute;
      transform: translateX(-6px);
      left: 50%;
      bottom: -6px;
      z-index: $z-tooltip;
    }

    &.active {
      display: block;
    }

    ol {
      list-style: none;

      li {
        display: flex;
        flex-flow: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 0.25rem 0.5rem;

        span {
          display: inline-block;
        }

        .label {
          font-weight: $weight-bold;
          color: rgba($black, 0.6);
          margin: 0;

          &.is-empty {
            color: rgba($grey, 0.6);
          }
        }

        &.active {
          color: $black;
          background: $white-ter;

          .label {
            color: $black;
          }
        }

        + li {
          border-top: 1px solid $grey-light;
        }
      }
    }
  }
}