/*
  The environment bar: outside production, a bar at the top of every page
  that names the environment. It belongs to the page, not to the header, so
  the login and error pages have it too. See docs/Frontend/header-concept.md.

  The bar is sticky, and a sticky box only sticks within its parent, so it
  must be a child of an element as tall as the page: the <body> in Django,
  #root in React.

  Decided: pages may know about the bar, reusable components may not. A
  page, the page shell, or a component that belongs to one page reads
  `--kp-environment-bar-offset` to make room for the bar. A reusable
  component does not; outside production it may sit under the bar or make
  its page scroll by the bar's height, and that is accepted. See "The
  environment bar's overlap" in the concept doc.
*/

:root {
  --kp-environment-bar-height: 24px; /* space/component/600 */
}

/* The bar's height while the page has the bar, unset in production. */
:root:has(.kp-environment-bar) {
  --kp-environment-bar-offset: var(--kp-environment-bar-height);
}

/* A jump to an anchor, the skip link's included, stops below the bar. */
html {
  /* Interaction */
  scroll-padding-top: var(--kp-environment-bar-offset, 0px);
}

.kp-environment-bar {
  /* Layout */
  position: sticky;
  top: 0;
  z-index: 1020; /* over the header's dropdowns (1000), under Bootstrap's fixed navbars (1030) and modals */

  /* Size & spacing */
  height: var(--kp-environment-bar-height);

  /* Typography */
  font-family: Haffer, Arial, sans-serif; /* typography/font-family */
  font-size: 0.75rem; /* 12px, not SDS 3: the smallest SDS 3 text is 14px */
  font-weight: 600;
  line-height: var(--kp-environment-bar-height);
  text-align: center;
  color: #000000;
}

/* The portal's red, blue and green ($medium-coral, $medium-blue and
   $medium-turquoise in frontend/src/constants.scss); not SDS 3. */
.kp-environment-bar--development {
  /* Appearance */
  background-color: #f3a5a0;
}

.kp-environment-bar--review {
  /* Appearance */
  background-color: #c4dbf3;
}

.kp-environment-bar--staging {
  /* Appearance */
  background-color: #9fe9dc;
}