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

.client-stat {
  display: flex;
  padding: 30px 20px 20px 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.9em;
    }

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

.client-stat {

  &--limits {
    background: none;
    border: none;
    color: $client-stats--limits--foreground;
    display: block;
    margin: 15px 0 0 0;
    outline: none;
    padding: 2px 0 2px 25px;
    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;
      stroke-width: 2px;
    }

  }

  &--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 {
        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 {
        stroke: $client-stats--upload--graph--stroke;
      }

    }

  }

}