.footer {
  -webkit-app-region: drag;
  bottom: 3px;
  font-weight: normal;
  height: 21px;
  padding: 0 11px;
  position: fixed;
  width: 100%;
  z-index: 9;
  font-size: 12px;

  b {
    font-weight: 500;
  }

  i {
    font-size: 16px;
  }
  .loader {
    width: 7px;
    display: inline-block;
    line-height: 2px;

    i {
      width: 7px;
      min-width: 10px;
      position: relative;
      text-align: center;
      font-size: 5px;
      top: -1px;
      color: $color-muted;

      &.available {
        color: $color-green;
      }

      &.unavailable {
        color: $color-error;
      }
    }
    &.loading {
      i {
        animation: toggleOpacity .4s linear infinite;

        &:first-child {
          animation: toggleOpacityInverse .25s linear infinite;
        }
      }
    }
  }

  span {
    &.badge-version {
      small {
        font-size: 10px;
      }
      i {
        font-size: 11px;
        color: $color-positive;
      }
    }
    &.npm-status {

      i {
        &.checking {
          color: $color-muted;
        }
        &.unavailable {
          color: $color-error;
        }
      }
    }
  }

  button {
    margin-left: 6px;
    margin-right: 5px;
    font-size: 11.5px;
    line-height: 12px;
    padding: 0 2px 0 0;
    height: 19px;

    i {
      color: $color-positive;
      position: relative;
      top: -1px;
    }
  }
}
