.Statistics {
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;

  &__messages, &__public-forwards {
    padding: 1rem 0;
    border-top: 1px solid var(--color-borders);

    &-title {
      padding-left: 0.75rem;
      font-size: 16px;
      color: var(--text-color);
      line-height: 30px;
      text-transform: lowercase;

      &:first-letter {
        text-transform: uppercase;
      }
    }
  }

  &.ready {
    overflow-y: scroll !important;
  }

  &__graph {
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-borders);

    opacity: 1;
    transition: opacity 0.3s ease;

    &:last-of-type {
      margin-bottom: 0;
      border-bottom: none;
    }

    &.hidden {
      opacity: 0;
      margin: 0;
    }
  }

  .lovely-chart--container {
    font: inherit !important;
    font-size: 13px !important;
  }

  .lovely-chart--header {
    margin: 0 0.75rem;
  }

  .lovely-chart--header,
  .lovely-chart--tooltip-title,
  .lovely-chart--tooltip-dataset-value,
  .lovely-chart--percentage-title {
    font-weight: 500 !important;
  }

  .lovely-chart--container-type-pie {
    &.lovely-chart--state-zoomed-in > canvas {
      animation-name: pie-slim-in !important;
    }

    &:not(.lovely-chart--state-zoomed-in) > canvas {
      animation-name: pie-slim-out !important;
    }
  }
}

@keyframes pie-slim-in {
  0% {
    clip-path: circle(80% at center calc(50% - 7.5px));
    -webkit-clip-path: circle(80% at center calc(50% - 7.5px));
    transform: rotate(-360deg);
  }

  25% {
    clip-path: circle(40% at center calc(50% - 7.5px));
    -webkit-clip-path: circle(40% at center calc(50% - 7.5px));
    transform: rotate(-360deg);
  }

  75% {
    clip-path: circle(40% at center calc(50% - 7.5px));
    -webkit-clip-path: circle(40% at center calc(50% - 7.5px));
    transform: rotate(0);
  }
}

@keyframes pie-slim-out {
  0% {
    clip-path: circle(40% at center calc(50% - 7.5px));
    -webkit-clip-path: circle(40% at center calc(50% - 7.5px));
    transform: rotate(360deg);
  }

  50% {
    clip-path: circle(40% at center calc(50% - 7.5px));
    -webkit-clip-path: circle(40% at center calc(50% - 7.5px));
    transform: rotate(0);
  }

  75% {
    clip-path: circle(80% at center calc(50% - 7.5px));
    -webkit-clip-path: circle(80% at center calc(50% - 7.5px));
    transform: rotate(0);
  }
}