@import "../../utils/constants";

:host {
  display: flex;
  flex-direction: column;

  .svg-wrapper {
    box-sizing: content-box;
    position: relative;
    margin: 1.5rem;

    svg {
      display: block;
    }

    .active-indicator {
      position: absolute;
      z-index: 1;
      background-color: white;
      white-space: nowrap;
      opacity: .8;
      display: flex;
      flex-direction: column;
      margin-top: 1rem;
      margin-left: -2rem;

      .date {
        font-weight: 500;
        margin-bottom: .5rem;
      }

      .legend-item {
        display: flex;
        justify-content: space-between;

        .label {
          margin-right: 1rem;
        }

        .value {
          color: mat-color($guide-doge-primary);
          font-weight: 500;
        }
      }
    }
  }
}

@import "../../utils/constants";

:host {
  display: flex;
  flex-direction: column;

  .svg-wrapper {
    box-sizing: content-box;
    position: relative;
    margin: 1.5rem;

    svg {
      display: block;
    }

    .active-indicator {
      position: absolute;
      z-index: 1;
      background-color: white;
      white-space: nowrap;
      opacity: .8;
      display: flex;
      flex-direction: column;
      margin-top: 1rem;
      margin-left: -2rem;
      transition: top 50ms, left 50ms;

      .date {
        font-weight: 500;
        margin-bottom: .5rem;
      }

      .legend-item {
        display: flex;
        justify-content: space-between;

        .label {
          margin-right: 1rem;
        }

        .value {
          color: mat-color($guide-doge-primary);
          font-weight: 500;
        }
      }
    }
  }
}

Add transition to active indicator
Add transition to active indicator
