/**
 * @file
 * QRIDA status tag: Open / Closing Soon / Closed.
 *
 * Layered on the design system's .tag-list.tag-status component. The markup
 * comes from inc/qgds-status-tag.html.twig, and the tag appears on the program
 * banner, the programs listing table, program tiles, the homepage carousel and
 * the style guide, so these rules are deliberately global.
 *
 * They lived in css/blocks/block-all-programs.css, which was misleading: a file
 * named for one block was repainting a component used across the site. The
 * paths in the icon rules are relative to THIS file's location.
 *
 * The banner's own treatment (one dark ground for all three states) is scoped
 * to .qld-banner.dark in css/qgds/qgds-banner.css and overrides what is here.
 */

/* Status tag appearance, from the Status Tag component in the design file
   (Open / Closing Soon / Closed variants).
 *
 * QGDS ships the tag itself (.tag-list.tag-status, see
 * inc/qgds-status-tag.html.twig) and supplies a 1px border, 1rem radius,
 * 0.875rem type and its own status palette. The design file keeps that
 * component but re-tints it: a very pale ground, a border only a shade darker
 * than the ground, and dark colour-matched label text. The saturated status
 * hues move to the icon, which is what carries the state at a glance and keeps
 * the meaning off colour alone.
 *
 * The icons are the design file's own 20px filled-circle glyphs, committed to
 * assets/icons/. They replace the outline glyphs that were here before, which
 * were drawn to sit on the old white ground.
 *
 * QRIDA confirmed the table treatment on point 2.3 of the August design review;
 * the traffic light recolour is item 2 of the same file. */
.tag-status .tag-item {
  gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: 20px;
  font-weight: 500;
  line-height: 24px;
  /* The pill is atomic: "Closing Soon" must not break across two lines inside a
     narrow table cell. The Status column is sized for its full width below. */
  white-space: nowrap;
}

/* Set the design system's own tokens rather than fighting its selectors.
 *
 * QGDS ships a .tag-list.tag-status-scoped palette at specificity (0,5,0), so a
 * plain .tag-status .tag-item.tag-success rule (0,3,0) loses and silently does
 * nothing. The tokens below are declared by QGDS on .tag-list (the <ul>) and read
 * through var() on the <li>, so setting them on the <li> wins outright: a value
 * set directly on an element always beats one it would otherwise inherit,
 * whatever the selector specificity. That keeps us out of a specificity arms
 * race with the vendored file, which would break on the next QGDS upgrade. */
/* The border takes currentColor, so it is the same hue as the label and the
 * icon and each pill reads as one object.
 *
 * This is a departure from the design file, which borders each pill with the
 * -lighter rung. Measured against the two row grounds the table actually uses,
 * that lands between 1.02:1 and 1.12:1, so the pill had no perceptible edge at
 * all and did not read as a pill. The design system offers no rung between
 * -lighter and -default, and -default leaves the amber at 1.51:1, so no token
 * on the scale solves it; nor does any alpha of the label colour, which tops
 * out at 2.36:1 for amber even at 60%. currentColor is the one value that
 * clears 3:1 for all three, at 4.62:1 to 9.03:1, and it is the status's own
 * colour rather than an invented one.
 *
 * It also fixes the banner, where the pills were bordered in their own
 * background colour and so had no edge either. There currentColor resolves to
 * the pale banner text, giving 8.15:1 against the pill.
 *
 * The label meaning never depended on this: the icon and text both pass on
 * their own. This is about the pill being visible as a pill.
 *
 * Set through the component's own border-color token, not as a plain
 * declaration: QGDS's per-status rule is (0,5,0) and would beat one. */
.tag-list.tag-status .tag-item.tag-success {
  --qld-tag-status-low-success-bg: var(--qld-core-default-color-status-success-lightest, #f7fbf8);
  --qld-tag-status-low-success-border-color: currentColor;
  --qld-tag-status-low-color: var(--qld-core-default-color-status-success-darker, #0a690d);
}

/* The one deliberate departure from the design file's own values. Its
   #b38800 label on #fffaea measures 3.12:1, below the 4.5:1 WCAG AA needs for
   14px text, and a "Closing Soon" badge failing contrast is a defect a
   Queensland Government site cannot ship. #8f6d00 is the same hue darkened the
   minimum amount that clears the threshold, at 4.62:1, so the colour-matched
   treatment the design intends is preserved. The green and red labels pass on
   the design's own values and are used unchanged. */
.tag-list.tag-status .tag-item.tag-warning {
  --qld-tag-status-low-warning-bg: var(--qld-core-default-color-status-caution-lightest, #fffaea);
  --qld-tag-status-low-warning-border-color: currentColor;
  /* No token: this is the AA correction described above, one step darker than
     --qld-core-default-color-status-caution-darker (#b38800). */
  --qld-tag-status-low-color: #8f6d00;
}

.tag-list.tag-status .tag-item.tag-error {
  --qld-tag-status-low-error-bg: var(--qld-core-default-color-status-error-lightest, #fff6f6);
  --qld-tag-status-low-error-border-color: currentColor;
  --qld-tag-status-low-color: var(--qld-core-default-color-status-error-darker, #8a1220);
}

/* 20px icons, sized in px rather than em so they match the design file at any
   inherited font size.
 *
 * These are the design file's own two-colour glyphs: a saturated status circle
 * (#339D37 / #FFCC2C / #E22339) with a white symbol punched through it. The
 * saturation is the traffic-light metaphor and is the point of them.
 *
 * They were briefly painted with currentColor through a mask, to lift the
 * icon's own contrast against its pill. That was over-applied: WCAG 1.4.11
 * covers graphics REQUIRED to understand the content, and each icon sits beside
 * a text label reading Open, Closing Soon or Closed which carries the state on
 * its own and passes 4.5:1. The icon is redundant reinforcement, so the bright
 * fills are not a failure, and desaturating them cost the design its meaning at
 * a glance for no accessibility gain.
 *
 * The label colour correction below is a different matter and stays: that IS
 * text, and it did fail.
 *
 * Paths are relative to this stylesheet so the theme survives a subdirectory
 * install, a multisite with a different theme path, or a rename. */
.program-tile__date--open::before,
.program-tile__date--closing-soon::before,
.program-tile__date--closed::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.program-tile__date--open::before {
  background-image: url("../../assets/icons/status-open.svg");
}

.program-tile__date--closing-soon::before {
  background-image: url("../../assets/icons/status-closing-soon.svg");
}

.program-tile__date--closed::before {
  background-image: url("../../assets/icons/status-closed.svg");
}