.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;

    &.is-snappy {
      transition: 0.2s top ease-out, 0.05s left ease-out;
    }

    &::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;
    }

    ol > li,
    p {
      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: $black;
        margin: 0;

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

    ol > li {
      .label {
        color: rgba($black, 0.6);
      }

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

        .label {
          color: $black;
        }
      }

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