/*
 * The browser notice that browser-check.js puts above the app (#77), in the
 * look of an `info` Message (src/ui/Message.css) with a secondary Button
 * (src/ui/Button.css) as its Hide, in the shipped look. It sits as far from
 * the window's edges as the narrow window notice (src/NarrowWindowNotice.css).
 *
 * A file of its own, because the bundle's styles may never load in a browser
 * Atlas does not support, so it cannot read src/styles/tokens.css. Each value
 * a token gives is a copy: the comment at the end of its line holds the value
 * as the component's stylesheet writes it, var() and all.
 * scripts/browserCheckStyles.test.ts fails, naming the token, when a copy
 * differs from tokens.css, so change a copy with its token. Keep to CSS that
 * old browsers read: no custom properties, and no gap in a flex row.
 */
.browser-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.75rem 1.5rem; /* var(--space-3) var(--space-5) */
  padding: 0.75rem 1.25rem; /* var(--space-3) 1.25rem */
  font-family: 'Aktiv Grotesk', 'Aktiv Grotesk fallback', 'Aktiv Grotesk Roboto fallback', system-ui, sans-serif; /* var(--sans) */
  font-size: 1rem; /* var(--text-base) */
  line-height: 1.5; /* var(--text-base-leading) */
  color: #e7ebf0; /* var(--text) */
  background: #14181f; /* var(--status-info-wash) */
  border: 1px solid #262d38; /* 1px solid var(--status-info-line) */
  border-left: 4px solid #a2acba; /* 4px solid var(--status-info-text) */
  border-radius: 8px; /* var(--radius-l) */
}

/* The words. Message's gap between the words and Hide is their right margin here. */
.browser-notice p {
  min-width: 0;
  margin: 0 1rem 0 0; /* 0 var(--space-4) 0 0 */
  overflow-wrap: anywhere;
}

.browser-notice button {
  padding: 0.5rem 1rem; /* var(--space-2) var(--space-4) */
  font: inherit;
  font-weight: 700; /* var(--weight-bold) */
  color: #e7ebf0; /* var(--text) */
  background: transparent;
  border: 1px solid #737d8b; /* 1px solid var(--line-control) */
  border-radius: 6px; /* var(--radius-m) */
  cursor: pointer;
}

.browser-notice button:focus {
  outline: 2px solid #e7ebf0; /* 2px solid var(--focus) */
  outline-offset: 2px;
}

@media print {
  .browser-notice {
    display: none;
  }
}