.badge {
	&.is-wide {
		min-width: 7.5rem;
	}

  &.badge-warning {
    @extend %text-white;
  }
}

%x-badge-warning,
.x-badge-warning {
  @extend %border,
          %p-0,
          %border-warning,
          %text-default,
          %x-flex-center;
  background-color: lighten(theme-color("warning"), 25%);
  height: 1.75rem;
  width:  1.75rem;
  min-width:  1.75rem;
}