/* announcement-bar — a one-line strip in the overlay group, never a plan-rung
 * band and never fixed. */
.sk-announcement-bar {
  position: relative;
  margin: 0;
  /* Half the chrome bar's own dial, so a theme that opens the chrome opens the strip with it. */
  padding-block: calc(var(--sk-bar-pad-y) * 0.5);
  padding-inline: var(--sk-page-rail);
  text-align: center;
  font-size: var(--sk-text-detail-size);
  font-weight: var(--kit-weight-detail);
  letter-spacing: calc(var(--kit-track-detail) * 1em);
  text-transform: var(--kit-caps-eyebrow);
  color: var(--sk-ink-muted);
  background-color: var(--sk-bg);
  border-bottom: var(--sk-border-width) solid var(--sk-stroke);
}
/* Muted ink on an inverted band reads as a smudge. */
.sk-announcement-bar[data-tone="surface"] {
  background-color: var(--sk-surface);
}
.sk-announcement-bar:is([data-tone="inverted"], [data-tone="accent"]) {
  color: var(--sk-ink);
  border-bottom-color: transparent;
}

/* The strip's one line IS the anchor, so it keeps the band's own ink. */
.sk-announcement-bar-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.sk-announcement-bar-link:hover {
  color: var(--sk-ink);
}

/* The X is ENGINE-BUILT, so it exists only scripts-on. The thin band cannot
 * carry a square 44px target, so the hit area spans the strip's height. */
.sk-announcement-bar:has(.sk-announcement-bar-close) {
  padding-inline: calc(var(--sk-page-rail) + var(--kit-space-2) * 2 + var(--sk-icon-size));
}
.sk-announcement-bar-close {
  position: absolute;
  /* Seated on the rail, never padded out to it: the rail grows without bound and this is a hit target. Longhands, or the shorthand puts the rail on a block edge too. */
  inset-block: 0;
  inset-inline: auto var(--sk-page-rail);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--kit-space-2);
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.sk-announcement-bar-close .sk-icon-glyph {
  width: calc(var(--sk-icon-size) * 0.7);
  height: calc(var(--sk-icon-size) * 0.7);
}