/* "Viewing as a customer" banner. Fixed to the top and always the same two colors from the tokens, so it reads the same on both themes. The space is reserved on the body, and the sticky sidebar and the phone top bar start below it. */

:root {
  --na-imp-h: 40px;
}

.na-imp {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--na-space-4);
  height: var(--na-imp-h);
  padding: 0 var(--na-space-4);
  background: var(--na-mint);
  color: var(--na-on-accent);
  font-family: var(--na-font);
  font-size: 14px;
  line-height: 1.3;
}

.na-imp__who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.na-imp form {
  flex: none;
  margin: 0;
}

.na-imp__exit {
  min-height: 28px;
  padding: 0 var(--na-space-3);
  border: 0;
  border-radius: var(--na-radius-control);
  background: var(--na-on-accent);
  color: var(--na-mint);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.na-imp__exit:hover {
  background: color-mix(in srgb, var(--na-on-accent) 85%, var(--na-mint));
}

.na-imp__exit:focus-visible {
  outline: 2px solid var(--na-on-accent);
  outline-offset: 2px;
}

body:has(.na-imp) {
  padding-top: var(--na-imp-h);
}

body:has(.na-imp) .na-side {
  top: var(--na-imp-h);
  height: calc(100vh - var(--na-imp-h));
  height: calc(100dvh - var(--na-imp-h));
}

@media (max-width: 768px) {
  body:has(.na-imp) .na-topbar {
    top: var(--na-imp-h);
  }

  body:has(.na-imp) .na-side {
    bottom: 0;
    height: auto;
  }
}