$client-stats--speed--fill--top--opacity: 0.2;
$client-stats--speed--fill--bottom--opacity: 0;
$client-stats--speed--stroke--opacity: 0.5;
$client-stats--speed--stroke--width: 2px;

$client-stats--download--primary--foreground: #39ce83;
$client-stats--download--secondary--foreground: rgba($client-stats--download--primary--foreground, 0.75);
$client-stats--download--graph--stroke: #39ce83;
$client-stats--download--graph--fill--top: #2bae6c;
$client-stats--download--graph--fill--bottom: #2bae6c;

$client-stats--upload--primary--foreground: #349cf4;
$client-stats--upload--secondary--foreground: rgba($client-stats--upload--primary--foreground, 0.75);
$client-stats--upload--graph--stroke: #349cf4;
$client-stats--upload--graph--fill--top: #2387d9;
$client-stats--upload--graph--fill--bottom: #2387d9;

$client-stats--timestamp--foreground: #526780;

.client-stats {
  display: flex;
  height: 200px;
  flex-direction: column;
  position: relative;

  &__rates {
    align-items: center;
    display: flex;
    flex: 0 0 50px;
    padding: 0 0 0 $spacing-unit * 2/5;
    pointer-events: none;
    position: relative;
  }

  &__rate {
    display: flex;
    flex: 1 1 50%;

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

      .client-stats {
        &__rate {
          &__data {
            &--limit {
              background: $client-stats--download--primary--foreground;
            }
          }
        }
      }

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

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

      .client-stats {
        &__rate {
          &__data {
            &--limit {
              background: $client-stats--upload--primary--foreground;
            }
          }
        }
      }

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

    &__icon {
      flex: 0 0 20px;
      padding-top: 1px;

      .icon {
        display: block;
        margin-left: -1px;
        opacity: 0.5;
        width: 20px;
      }
    }

    &__data {
      user-select: none;

      &--secondary,
      &--timestamp {
        font-size: 0.8em;
        font-weight: 400;
        letter-spacing: -0.01em;
        opacity: 0;
        transition: opacity 0.25s;
      }

      &--primary {
        font-size: 1.5em;
        font-weight: 100;
        letter-spacing: -0.02em;
        line-height: 1;
        white-space: nowrap;

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

      &--secondary {
        display: flex;
        align-items: center;
        font-style: italic;

        &.is-visible {
          opacity: 1;
        }
      }

      &--limit {
        align-items: center;
        display: inline-flex;
        @include theme('color', 'sidebar--background');
        border-radius: 2px;
        font-size: 0.8em;
        font-style: normal;
        font-weight: 600;
        height: 13px;
        margin-left: $spacing-unit * 1/5;
        padding: $spacing-unit * 1/6;

        .icon {
          fill: currentColor;
          height: 12px;
        }

        .unit {
          font-weight: 400;
        }
      }

      &--timestamp {
        color: $client-stats--timestamp--foreground;
        bottom: 0;
        font-style: italic;
        left: 0;
        position: absolute;
        text-align: center;
        width: 100%;

        &.is-visible {
          opacity: 1;
        }
      }
    }
  }

  &__graph {
    flex: 0 0 150px;
  }

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

.graph {
  &__gradient {
    &--bottom {
      stop-opacity: $client-stats--speed--fill--bottom--opacity;

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

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

    &--top {
      stop-opacity: $client-stats--speed--fill--top--opacity;

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

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

  &__area {
    transform: translateY($client-stats--speed--stroke--width / -2);
  }

  &__line {
    fill: none;
    opacity: $client-stats--speed--stroke--opacity;
    stroke-width: $client-stats--speed--stroke--width;

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

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

  &__circle {
    fill: currentColor;
    opacity: 0;
    transition: opacity 0.2s;

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

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