flood/client/source/sass/components/_client-stats.scss

.client-stats {
  height: 200px;
  position: relative;

  .loading-indicator {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .transfer-data-enter {
    opacity: 0;
    transition: opacity 1s;

    &.transfer-data-enter-active {
      opacity: 1;
    }
  }

  .transfer-data-leave {
    opacity: 1;
    transition: opacity 1s;

    &.transfer-data-leave-active {
      opacity: 0;
    }
  }
}

.client-stat {
  align-items: center;
  display: flex;
  height: 100px;
  padding: 0 20px;

  &__icon,
  &__data {
    position: relative;
    vertical-align: top;
    z-index: 1;
  }

  &__icon {
    flex: 0 0 23px;

    .icon {
      display: inline-block;
      height: 25px;
      margin: 6px 0 0 -5px;
      width: auto;
    }
  }

  &__data {
    flex: 1;

    &--primary,
    &--secondary {
      display: block;
      font-weight: 100;
      line-height: 1.2;
    }

    &--primary {
      font-size: 1.75em;
      white-space: nowrap;

      .unit {
        font-size: 0.65em;
        margin-bottom: 0;
        opacity: 0.5;
        position: relative;
        top: -0.1em;
      }
    }

    &--secondary {
      font-size: 0.8em;
      font-style: italic;
      font-weight: 400;
    }
  }
}

.client-stat {

  &--limits {
    background: none;
    border: none;
    color: $client-stats--limits--foreground;
    display: block;
    outline: none;
    padding: 10px 15px;
    font-size: 0.85em;
    text-align: left;
    transition: color 0.25s;
    vertical-align: middle;
    width: 100%;

    .icon {
      display: inline-block;
      fill: $client-stats--limits--foreground;
      margin: -2px 5px 0 0;
      transition: fill 0.25s;
      vertical-align: middle;
      width: 14.5px;

      .limits {

        &__bars {

          &--top {
            opacity: 0.4;
          }

          &--bottom {
            opacity: 0.6;
          }
        }
      }
    }

    &:hover {
      color: $client-stats--limits--icon--hover;

      .icon {
        fill: $client-stats--limits--icon--hover;
      }
    }
  }
}

.client-stat {
  position: relative;

  .graph {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;

    svg {
      height: 100%;
      width: 100%;
    }

    &__line {
      fill: none;

      &--limit {
        stroke-dasharray: 3px 4px;
        stroke-width: 1px;
      }

      &--rate {
        stroke-width: 1.1px;
      }
    }

  }

  &--download {

    .icon {
      fill: $client-stats--download--secondary--foreground;
    }

    .client-stat {

      &__data {

        &--primary {
          color: $client-stats--download--primary--foreground;
        }

        &--secondary {
          color: $client-stats--download--secondary--foreground;
        }

      }

    }

    .graph {

      .graph--download--gradient--top {
        stop-color: $client-stats--download--graph--fill--top;
      }

      .graph--download--gradient--bottom {
        stop-color: $client-stats--download--graph--fill--bottom;
      }

      &__area {
        fill: url('#graph--download--gradient')
      }

      &__line {

        &--limit {
          stroke: $client-stats--download--limits--line;
        }

        &--rate {
          stroke: $client-stats--download--graph--stroke;
        }
      }

    }

  }

  &--upload {

    .icon {
      fill: $client-stats--upload--secondary--foreground;
    }

    .client-stat {

      &__data {

        &--primary {
          color: $client-stats--upload--primary--foreground;
        }

        &--secondary {
          color: $client-stats--upload--secondary--foreground;
        }

      }

    }

    .graph {

      .graph--upload--gradient--top {
        stop-color: $client-stats--upload--graph--fill--top;
      }

      .graph--upload--gradient--bottom {
        stop-color: $client-stats--upload--graph--fill--bottom;
      }

      &__area {
        fill: url('#graph--upload--gradient')
      }

      &__line {

        &--limit {
          stroke: $client-stats--upload--limits--line;
        }

        &--rate {
          stroke: $client-stats--upload--graph--stroke;
        }
      }

    }

  }

}