.badge {
  position: relative;
  padding: 0.875em 1.75em;
  font-size: 1rem;
  font-weight: $font-weight-medium;
  line-height: 1.25;
  text-decoration: none;
  text-transform: uppercase;
  &-sm {
    font-size: 0.875rem;
    padding: 0.75em 1.5em;
  }
  &-lg {
    font-size: 1.125rem;
    padding: 1.875em 1.875em;
  }
  &-gradient-accent {
    @extend .gradient-accent;
  }
  &-gradient-primary {
    @extend .gradient-primary;
  }
  &-gradient-secondary {
    @extend .gradient-secondary;
  }
  &-dark {
    .dark & {
      background: $white;
      color: $black;
    }
  }
  &.top-left {
    position: absolute;
    top: -20px;
    left: -20px;
  }
  &.top-right {
    position: absolute;
    top: -20px;
    right: -20px;
  }
  &.bottom-right {
    position: absolute;
    right: -20px;
    bottom: -20px;
  }
  &.bottom-left {
    position: absolute;
    left: -20px;
    bottom: -20px;
  }
}