/* Wear Blume: customer announcement
   The pop-up the order tracking page opens with, and the bar the message
   moves to once it is closed. Icons and the icon tile come from
   css/components/_icons.css; the page frame from
   css/components/_customer-shell.css.

   This file is plain CSS, not HubL: a HubL comment here would be shipped to
   the browser as written and take the rules around it down with it, so every
   comment below is a CSS one.

   Specificity note: css/theme-overrides.css loads after this file and styles
   bare `button` and `button:hover, button:focus` at (0,1,1), so every button
   rule below is written two classes deep, as in `.cb-announce .cb-announce__close`.
   The dialog sits in the browser's top layer while it is open, but it is still
   inside .cb-announce in the document, so those rules reach it.

   Mobile-first: the base rules are the phone layout, the media query at the
   bottom widens it.

   Table of contents:
     1. Message text
     2. Pop-up
     3. Top bar
     4. Buttons
     5. Motion
     6. Print */

/* 1. Message text ------------------------------------------------------- */

/* The rich text an admin wrote, the same in the pop-up and the bar. */
.cb-announce__rich {
  font-size: var(--cb-text-md);
  line-height: var(--cb-leading-body);
  overflow-wrap: anywhere;
}

.cb-announce__rich p,
.cb-announce__rich ul,
.cb-announce__rich ol {
  font-size: inherit;
  margin: 0 0 var(--cb-space-2xs);
}

.cb-announce__rich ul,
.cb-announce__rich ol {
  display: grid;
  gap: var(--cb-space-3xs);
  padding-left: var(--cb-space-md);
}

.cb-announce__rich > :last-child {
  margin-bottom: 0;
}

.cb-announce__rich a {
  color: var(--cb-accent-deep);
  font-weight: 600;
  text-decoration: underline;
}

/* 2. Pop-up ------------------------------------------------------------- */

/* The dialog itself has no padding, so a press on it rather than on the
   panel inside is a press on the backdrop, and module.js closes on that. */
.cb-announce-dialog {
  background-color: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-xl);
  box-shadow: var(--cb-shadow-lg);
  color: var(--cb-text);
  max-height: 85vh;
  max-width: calc(100vw - 2 * var(--cb-space-sm));
  overflow: hidden;
  padding: 0;
  width: var(--cb-panel-width);
}

/* dvh leaves out the browser's toolbars on a phone. */
@supports (height: 1dvh) {
  .cb-announce-dialog {
    max-height: 85dvh;
  }
}

/* Only while open: a closed dialog must keep the browser's display: none. */
.cb-announce-dialog[open] {
  display: flex;
  flex-direction: column;
}

.cb-announce-dialog::backdrop {
  backdrop-filter: blur(2px);
  background-color: var(--cb-scrim);
}

/* The panel scrolls its message between the head and the button, which both
   stay in reach however long the message is. */
.cb-announce-dialog__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cb-announce-dialog__head {
  align-items: center;
  border-bottom: 1px solid var(--cb-border);
  display: grid;
  flex: none;
  gap: var(--cb-space-xs);
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: var(--cb-space-2xs) var(--cb-space-2xs) var(--cb-space-2xs) var(--cb-space-sm);
}

.cb-announce .cb-announce-dialog__title {
  color: var(--cb-text);
  font-family: var(--cb-font-display);
  font-size: var(--cb-text-lg);
  font-weight: 600;
  letter-spacing: var(--cb-tracking-tight);
  line-height: var(--cb-leading-tight);
  margin: 0;
  text-transform: none;
}

.cb-announce-dialog__body {
  color: var(--cb-text);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--cb-space-sm);
}

.cb-announce-dialog__actions {
  border-top: 1px solid var(--cb-border);
  display: flex;
  flex: none;
  padding: var(--cb-space-xs) var(--cb-space-sm);
}

/* 3. Top bar ------------------------------------------------------------ */

/* Fixed to the top of the screen, over the page: it covers what is under it
   rather than pushing it down, and stays put as the page scrolls. It keeps
   the page's gutter on a phone and the page's column width beyond it. */
.cb-announce-bar {
  align-items: start;
  background-color: var(--cb-ink);
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-lg);
  color: var(--cb-on-ink);
  display: grid;
  gap: var(--cb-space-2xs);
  grid-template-columns: auto minmax(0, 1fr) auto;
  left: var(--cb-space-sm);
  margin-inline: auto;
  max-width: var(--cb-shell-width);
  overflow: hidden;
  padding: var(--cb-space-2xs) var(--cb-space-2xs) var(--cb-space-2xs) var(--cb-space-sm);
  position: fixed;
  right: var(--cb-space-sm);
  top: var(--cb-space-2xs);
  z-index: 30;
}

/* display: grid above outranks the browser's own [hidden] rule. */
.cb-announce-bar[hidden] {
  display: none;
}

/* Lined up with the first line of the message, beside the 44px button. */
.cb-announce-bar__icon {
  color: var(--cb-bloom);
  margin-top: calc((2.75rem - var(--cb-icon-md)) / 2);
}

/* A long message scrolls inside the bar rather than covering the page. Its
   first line is centred on the 44px button; a browser without the lh unit
   keeps the plain padding before it, which comes within a pixel or two. */
.cb-announce-bar__text {
  max-height: 40vh;
  overflow-y: auto;
  padding-block: var(--cb-space-2xs);
  padding-block: calc((2.75rem - 1lh) / 2);
}

.cb-announce-bar .cb-announce__rich a {
  color: var(--cb-on-ink);
}

/* The time left, as a line along the bar's foot that shrinks to nothing. It
   stops where it is while the bar is paused. */
.cb-announce-bar__timer {
  animation: cb-announce-timer var(--cb-announce-seconds, 10s) linear forwards;
  background-color: var(--cb-bloom);
  bottom: 0;
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  transform-origin: left center;
}

.cb-announce-bar.is-paused .cb-announce-bar__timer {
  animation-play-state: paused;
}

/* 4. Buttons ------------------------------------------------------------ */

/* The X in the pop-up's corner and on the bar: a 44px square. */
.cb-announce .cb-announce__close {
  align-items: center;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--cb-radius-md);
  color: var(--cb-text-muted);
  cursor: pointer;
  display: inline-flex;
  height: 2.75rem;
  justify-content: center;
  padding: 0;
  transition: background-color var(--cb-duration) var(--cb-ease),
    color var(--cb-duration) var(--cb-ease);
  width: 2.75rem;
}

.cb-announce .cb-announce__close:hover,
.cb-announce .cb-announce__close:focus {
  background-color: var(--cb-sunken);
  color: var(--cb-text);
}

.cb-announce .cb-announce__close:focus-visible {
  box-shadow: 0 0 0 3px var(--cb-focus-ring);
  outline: none;
}

.cb-announce .cb-announce__close--on-ink {
  color: var(--cb-on-ink);
}

.cb-announce .cb-announce__close--on-ink:hover,
.cb-announce .cb-announce__close--on-ink:focus {
  background-color: var(--cb-ink-raised);
  color: var(--cb-on-ink);
}

/* On ink the accent ring alone barely shows, so a white edge goes inside it. */
.cb-announce .cb-announce__close--on-ink:focus-visible {
  box-shadow: 0 0 0 2px var(--cb-on-ink), 0 0 0 5px var(--cb-focus-ring);
}

/* Got it: the pop-up's one real action, full width on a phone. */
.cb-announce .cb-announce__button {
  align-items: center;
  background-color: var(--cb-ink);
  border: 1px solid var(--cb-ink);
  border-radius: var(--cb-radius-pill);
  box-shadow: var(--cb-shadow-button);
  color: var(--cb-on-ink);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--cb-font-body);
  font-size: var(--cb-text-md);
  font-weight: 600;
  justify-content: center;
  letter-spacing: var(--cb-tracking-snug);
  min-height: 2.75rem;
  padding: 0 var(--cb-space-md);
  text-transform: none;
  transition: background-color var(--cb-duration) var(--cb-ease);
  width: 100%;
}

.cb-announce .cb-announce__button:hover,
.cb-announce .cb-announce__button:focus {
  background-color: var(--cb-ink-raised);
  border-color: var(--cb-ink-raised);
  color: var(--cb-on-ink);
}

.cb-announce .cb-announce__button:focus-visible {
  box-shadow: 0 0 0 3px var(--cb-focus-ring);
  outline: none;
}

/* 5. Motion ------------------------------------------------------------- */

/* Both arrive rather than appear. The durations are the brand's, which drop
   to 0ms for a visitor who has asked for less motion. */
.cb-announce-dialog[open] {
  animation: cb-announce-rise var(--cb-duration-slow) var(--cb-ease);
}

.cb-announce-bar {
  animation: cb-announce-drop var(--cb-duration-slow) var(--cb-ease);
}

@keyframes cb-announce-rise {
  from {
    opacity: 0;
    transform: translateY(var(--cb-space-sm));
  }
}

@keyframes cb-announce-drop {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
}

@keyframes cb-announce-timer {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

/* The shrinking line is motion of its own, on its own clock, so it is left
   out rather than slowed. The bar still closes on time. */
@media (prefers-reduced-motion: reduce) {
  .cb-announce-bar__timer {
    display: none;
  }
}

/* 6. Print -------------------------------------------------------------- */

/* An invoice is printed from the tracking page; the announcement is not part
   of it. */
@media print {
  .cb-announce {
    display: none;
  }
}

/* Desktop --------------------------------------------------------------- */

@media (min-width: 768px) {
  .cb-announce__rich {
    font-size: var(--cb-text-sm);
  }

  .cb-announce-dialog__body {
    padding: var(--cb-space-md);
  }

  .cb-announce-dialog__actions {
    justify-content: flex-end;
    padding-inline: var(--cb-space-md);
  }

  .cb-announce .cb-announce__button {
    width: auto;
  }

  .cb-announce-bar {
    left: var(--cb-space-md);
    right: var(--cb-space-md);
    top: var(--cb-space-sm);
  }
}