/**
 * @file
 * Issue link: tracker logo, issue number on the status color, title.
 *
 * The status colors follow drupal.org's, in hue and in which statuses share
 * one: gray for active, red for needs work, yellow for needs review, light
 * green for RTBC and patch (to be ported), green for fixed, pink for closed
 * (fixed) and closed (cannot reproduce), and blue for postponed and the other
 * closed statuses. A generic "closed" from GitLab, which drupal.org does not
 * have, takes the blue.
 *
 * The exact colors are set to sit with the logos beside them rather than
 * copied: the blue is the hue of the Drupal drop, the red that of the GitLab
 * logo, and the backgrounds are tints of about the same lightness, where drupal.org's
 * neon greens and near-white reds are not. Each border holds about 3:1
 * against white, so the shape of the number shows on any of them.
 *
 * Colors are custom properties so a theme can restyle without overriding
 * selectors: for each color, --drupalorg-issue-<name> is the border, of the
 * number and of the dot, and --drupalorg-issue-<name>-bg the background of the
 * number. The number and the status label are in the text color around them.
 *
 * The number carries the status in color and shape (a dashed border for
 * postponed), as the dot does when there is no number (a ring); the status is
 * also in the tooltip and in visually hidden text.
 */
.drupalorg-issue-link {
  --drupalorg-issue-active: #889098;
  --drupalorg-issue-active-bg: #f2f6f9;
  --drupalorg-issue-needs-work: #de6b4f;
  --drupalorg-issue-needs-work-bg: #ffe8e1;
  --drupalorg-issue-needs-review: #c58501;
  --drupalorg-issue-needs-review-bg: #fff4c8;
  --drupalorg-issue-rtbc: #57a45b;
  --drupalorg-issue-rtbc-bg: #e2fce1;
  --drupalorg-issue-fixed: #2e9e52;
  --drupalorg-issue-fixed-bg: #c5f7ce;
  --drupalorg-issue-closed-fixed: #d06a84;
  --drupalorg-issue-closed-fixed-bg: #ffe5eb;
  --drupalorg-issue-closed: #5795c8;
  --drupalorg-issue-closed-bg: #e3f2ff;
  --drupalorg-issue-drupalorg: #0678be;
  --drupalorg-issue-gitlab: #e24329;
  --drupalorg-issue-color: var(--drupalorg-issue-active);
  --drupalorg-issue-bg: var(--drupalorg-issue-active-bg);
}

/* Needs work (13). */
.drupalorg-issue-link[data-issue-status="needs_work"] {
  --drupalorg-issue-color: var(--drupalorg-issue-needs-work);
  --drupalorg-issue-bg: var(--drupalorg-issue-needs-work-bg);
}

/* Needs review (8). */
.drupalorg-issue-link[data-issue-status="needs_review"] {
  --drupalorg-issue-color: var(--drupalorg-issue-needs-review);
  --drupalorg-issue-bg: var(--drupalorg-issue-needs-review-bg);
}

/* RTBC (14) and Patch (to be ported) (15). */
.drupalorg-issue-link[data-issue-status="rtbc"],
.drupalorg-issue-link[data-issue-status="patch_to_be_ported"] {
  --drupalorg-issue-color: var(--drupalorg-issue-rtbc);
  --drupalorg-issue-bg: var(--drupalorg-issue-rtbc-bg);
}

/* Fixed (2). */
.drupalorg-issue-link[data-issue-status="fixed"] {
  --drupalorg-issue-color: var(--drupalorg-issue-fixed);
  --drupalorg-issue-bg: var(--drupalorg-issue-fixed-bg);
}

/* Closed (fixed) (7) and Closed (cannot reproduce) (18). */
.drupalorg-issue-link[data-issue-status="closed_fixed"],
.drupalorg-issue-link[data-issue-status="closed_cannot_reproduce"] {
  --drupalorg-issue-color: var(--drupalorg-issue-closed-fixed);
  --drupalorg-issue-bg: var(--drupalorg-issue-closed-fixed-bg);
}

/* Postponed (4), Postponed (maintainer needs more info) (16), and Closed as duplicate (3), won't fix (5), works as designed (6) or outdated (17). */
.drupalorg-issue-link[data-issue-status="postponed"],
.drupalorg-issue-link[data-issue-status="postponed_info"],
.drupalorg-issue-link[data-issue-status="closed_duplicate"],
.drupalorg-issue-link[data-issue-status="closed_wont_fix"],
.drupalorg-issue-link[data-issue-status="closed_works_as_designed"],
.drupalorg-issue-link[data-issue-status="closed_outdated"],
.drupalorg-issue-link[data-issue-status="closed"] {
  --drupalorg-issue-color: var(--drupalorg-issue-closed);
  --drupalorg-issue-bg: var(--drupalorg-issue-closed-bg);
}

/* Scoped to the component, as the logos are: a theme's own link color and
   underline would otherwise win. */
.drupalorg-issue-link .drupalorg-issue-link__number {
  display: inline-block;
  padding: 0 0.35em;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--drupalorg-issue-color);
  border-left-width: 4px;
  border-radius: 4px;
  background: var(--drupalorg-issue-bg);
  font-size: 0.875em;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

/* Inside the title's link: a space there would be underlined with it. */
.drupalorg-issue-link__link .drupalorg-issue-link__number {
  margin-inline-end: 0.3em;
}

.drupalorg-issue-link--postponed .drupalorg-issue-link__number {
  border-style: dashed;
  border-left-style: solid;
}

a.drupalorg-issue-link__number:hover,
a.drupalorg-issue-link__number:focus {
  text-decoration: underline;
}

.drupalorg-issue-link__indicator {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-inline-end: 0.35em;
  vertical-align: 0.05em;
  border: 0.15em solid var(--drupalorg-issue-color);
  border-radius: 50%;
  background: var(--drupalorg-issue-color);
}

.drupalorg-issue-link--postponed .drupalorg-issue-link__indicator {
  background: transparent;
}

.drupalorg-issue-link--resolved .drupalorg-issue-link__label {
  text-decoration: line-through;
}

.drupalorg-issue-link--closed .drupalorg-issue-link__link {
  opacity: 0.75;
}

.drupalorg-issue-link__status {
  font-size: 0.875em;
}

.drupalorg-issue-link__tracker {
  display: inline-block;
  vertical-align: -0.125em;
  line-height: 1;
}

.drupalorg-issue-link__tracker svg {
  display: block;
  width: 1em;
  height: 1em;
}

/* Scoped to the component: a theme's own link color (".text-formatted a",
   say) would otherwise win, and paint both logos in the text color. */
.drupalorg-issue-link .drupalorg-issue-link__tracker--drupalorg {
  color: var(--drupalorg-issue-drupalorg);
}

.drupalorg-issue-link .drupalorg-issue-link__tracker--gitlab {
  color: var(--drupalorg-issue-gitlab);
}