.badge {
  position: relative;

  &-label {
    display: inline-block;
    color: $white;
    padding: 0.2em 0.4em;
    z-index: 1;
    width: auto;
    font-weight: 700;
    border-radius: 3px;
    vertical-align: middle;

    &-small {
      font-size: 0.625em;
    }

    &-medium {
      font-size: 1em;
    }

    &-large {
      font-size: 1.5em;
    }

    &-blue {
      background-image: $blue-gradient;
    }

    &-red {
      background-image: $red-gradient;
    }

    &-green {
      background-image: $green-gradient;
    }

    &-gray {
      background-color: $smoke-blue;
      color: $text-gray;
    }
  }

  &-status {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;

    &-draft {
      background-color: $smoke-blue;
      color: $text-gray;
    }

    &-published {
      background-color: $green;
      color: $white;
    }
  }

  img {
    filter: blur(3px);
  }
}
