// Tags

.c_TagL
  &,
  & li
    display: inline;
    margin: 0;

.c_Tag,
.c_Tag:visited,
.c_Tag:link,
.c_TagL_AddB
  display: inline-block;
  line-height: 1;
  padding: 2px 6px;
  text-align: center;
  border-radius: 2px;
  box-shadow: 1px 1px 3.7px #333;
  margin: 1px 6px 2px 1px;
  color: hsl(0 0% 21%);
  background: hsl(0 0% 98%);

  &:active,
  &:hover
    cursor: pointer;
    text-decoration: none; // no <a> underline

// Tags are clickable (opens a dropdown, or jumps to the tag), so highlight on hover.
// Curerntly badges aren't, though, so -Po only (tags on 'Po'sts) for now.
.c_Tag-Po,
.c_TagL_Tag.c_Tag-Po,
.c_TagL_AddB
  &:hover
    background: hsl(207 100% 96%);
    box-shadow: 1px 1px 3.3px hsl($uiHue 100% 40%);
    color: black;


.c_TagL_AddB
  vertical-align: baseline;
  box-shadow: 1px 1px 3.7px hsl(0 0% 70%);  // brighter shadow, not a real tag
  border: none;  // .btn otherwise has borders, but doesn't look nice here

// Post tags look like physical tags/badges — looks weird if too small.
// Pat tags (user badges) are just text though, then ok if no min-width.
.c_Tag-Po
  min-width: 30px;

.c_TagL .c_Tag-Pat
  // There's usually nothing to the left (in the about dialog, on the profile page).
  margin-left: 0;
  margin-right: 7px;

  // Using a comma ',' to separate title badges [.badges_comma], so need less padding.
  padding-right: 0;

  // No box-shadow for pat tags (user badges) — otherwise they'd get mistaken
  // for being post tags? (if they'd look the same)
  border: none;
  background: none;
  margin: 0;
  box-shadow: none;

  // Skip: Are real life badges usually round?
  //border-radius: 99px;

// Let's separate title badges with a comma? [.badges_comma]
.c_TagL li:not(:last-child) .c_Tag-Pat:after
  content: ", ";

// In the about-user dialog and page, there's nothing to the left of the badges,
// so need no padding.
.s_UD,
.s_UP_Ab
  .c_TagL
    display: block;
    margin-top: 9px;
    li:first-child .c_Tag-Pat
      padding-left: 0;
    li:first-child .c_TagL_AddB
      margin-left: 0;
  .c_Tag-Pat
    text-align: left;


// The tags page (lists tags, & info about single tags)

.c_TagsP
  h1
    margin-bottom: 1.8ex;
    .c_Tag
      margin: 0 0 0 0.45ex;
      padding: 0.33ex 0.77ex 0.4ex;
      color: hsl(0 0% 27%);
      background: hsl(0 0% 97.7%);
      font-size: inherit; // same as "About tag:" in the <h1>

  h2
    margin-bottom: 2.5ex;
    font-size: 22px;
