@import "common/foundation/variables";
@import "common/foundation/mixins";

// --------------------------------------------------
// Badges
// --------------------------------------------------

// Base
// --------------------------------------------------

%badge {
  display: inline-block;
  font-weight: normal;
  white-space: nowrap;
  @include border-radius-all(10px);
}

// Category badge
// --------------------------------------------------

.badge-category, .badge-category-parent {
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  display: inline-block;
  line-height: 1;
  i.fa {
    font-size: 11px;
    vertical-align: 1px;
  }
}
.badge-wrapper {
  white-space: nowrap;
}

.badge-category {
  padding: 6px;
  color: $tertiary_text_color;
  &[href] {
  color: $tertiary_text_color;
  }
}

.badge-category-parent {
  padding: 6px 2px;
  width: 2px;
  .category-name {
    display: none;
  }
  &:before {
    content: "\a0";
  }
}

.d-dropdown .badge-category {
&.restricted {
    div {
      display: inline-block;
      margin: 0;
    }
}}

h1 a.badge-category div {vertical-align: top;}


// Notification badge
// --------------------------------------------------

.badge-notification {
  @extend %badge;
  padding: 4px;
  color: $tertiary_text_color;
  font-size: 11px;
  line-height: 1;
  min-width: 11px;
  text-align: center;
  background-color: $notification_badge_background_color;
  &[href] {
  color: $tertiary_text_color;
  }

  // New posts

  &.new-posts, &.unread-posts {
    background-color: lighten($emphasis_text_color, 20%);
    color: $tertiary_text_color;
    font-weight: normal;
  }



  // Click count

  &.clicks {
    font-weight: normal;
    background-color: #ddd;
    top: -1px;
    color: #888;
    position: relative;
    margin-left: 2px;
  }
}

// Posts badge
// --------------------------------------------------

.badge-posts {
  font-weight: normal;
  font-size: 14px;
  line-height: 1;
  &[href] {
    color: $topic-list-td-color;
  }
}

// Group badge
// --------------------------------------------------

.badge-group {
  @extend %badge;
  padding: 3px 5px;
  color: $primary_text_color;
  text-shadow: 0 1px 0 rgba($secondary_shadow_color, 0.2);
  background-color: #ddd;
  border-color: #aaa;
  font-size: 12px;
  @include box-shadow(inset 0 1px 0 rgba($secondary_shadow_color, 0.52));
}