.MetricButton {
  $this: &;
  position: relative;
  background-color: $color-gray-30;
  padding: 0 0 1px 0;
  border-radius: 4px;
  width: fit-content;
  width: -moz-fit-content;

  &:focus {
    background-color: #3a4465;
    box-shadow: 0 0 0 2px $color-gray-80;
    outline: none;
  }

  &:active#{$this}--pillNotHovered {
    background-color: $color-gray-20;
  }

  &--hovered {
    background-color: #3a4465;
  }

  &--disabled {
    cursor: not-allowed;

    &:hover {
      background-color: $color-gray-30;
    }

    &:active {
      background-color: $color-gray-30;
    }
  }

  &--inactive {
    &:hover {
      background-color: $color-gray-30;
    }

    &:active {
      background-color: $color-gray-30;
    }

    &:focus {
      background-color: $color-gray-30;
    }
  }

  &--inactive#{$this}--disabled {
    cursor: default;
  }

  &__hoverableArea {
    width: 100%;
    padding: 10px 40px 0 12px;
  }

  &--isLoading {
    padding: 10px 40px 1px 12px;
  }

  &__loading-bar {
    width: 100%;
    min-width: 100px;
    animation: 1000ms linear infinite alternate skeleton-glow;
    border-radius: 4px;

    &--top {
      height: 16px;
    }

    &--middle {
      height: 32px;
      margin: 8px 0 8px 0;
    }

    &--bottom {
      height: 24px;
      margin-bottom: 10px;
    }
  }

  &__icon {
    position: absolute;
    right: 8px;
    top: 8px;
  }

  &__number {
    @extend .Font__headline--50;
    font-weight: $weight-light;
    letter-spacing: $letter-spacing-tighter;
    text-align: left;
    width: min-content;
    margin: 2px 0 2px 0;
    padding: 0;
    color: $color-white;

    &--disabled {
      color: $color-gray-100;
    }

    &--inactive {
      color: $color-white;
    }
  }

  &__info-wrapper {
    display: flex;
    position: relative;
    margin: 2px 0 0 4px;
  }

  &__orb {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    margin-right: 9px;
    margin-top: 3px;
    position: absolute;
  }

  &__text {
    @extend .Font__caption--20;
    color: $color-gray-100;
    letter-spacing: $letter-spacing-loose;
    text-transform: uppercase;
    font-weight: $weight-medium;
    text-align: left;
    max-height: 32px;

    &--withOrb {
      margin-left: 16px;
    }
  }

  &__pill {
    width: 100%;
    padding: 0 12px 12px 12px;
    cursor: default;
  }
}