/*
 * Slide-out preview drawer skeleton (overlay + right-hand sliding panel + close
 * button). The markup for every drawer built on this (templates/includes/
 * cv-preview-drawer.html.twig, templates/includes/candidate-preview-drawer.html.twig)
 * is included globally from layout.html.twig, on every page - so these rules must be
 * global too. They used to live in css/pages/style_myjobs.css, which is only
 * auto-loaded on the myjobs page (config/headers.php loads css/pages/style_<page
 * id>.css), which left the drawer showing as an unstyled block at the top of every
 * other page.
 */
.cv-preview-drawer,
.preview-drawer {
  position: fixed;
  inset: 0;
  z-index: 1050;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.cv-preview-drawer.is-open,
.preview-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
}
.cv-preview-drawer-overlay,
.preview-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.cv-preview-drawer-panel,
.preview-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(1100px, 90vw);
  background: #FFFFFF;
  box-shadow: -0.5rem 0 2rem 0 rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
}
.cv-preview-drawer.is-open .cv-preview-drawer-panel,
.preview-drawer.is-open .preview-drawer-panel {
  transform: translateX(0);
}
/*
 * Flush against the panel's own left edge (like a tab/label sticking out of it), same
 * white background as the panel so it reads as part of it rather than a separate
 * floating element. The shadow's blur radius must stay smaller than its (negative)
 * horizontal offset - blur spreads the shadow shape in every direction regardless of
 * offset, so a blur bigger than the offset still bleeds back past the button's own
 * right edge onto the panel, which is exactly the faint line that was showing at the
 * seam between them.
 */
.cv-preview-drawer-close,
.preview-drawer-close {
  position: absolute;
  top: 1rem;
  right: 100%;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 0.15rem;
  border-radius: 0.5rem 0 0 0.5rem;
  background: #FFFFFF;
  border: none;
  box-shadow: -0.4rem 0 0.3rem 0 rgba(0, 0, 0, 0.15);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: #7E8299;
}
.cv-preview-drawer-close:hover,
.preview-drawer-close:hover {
  color: #3F4254;
}
.preview-drawer-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 1.5rem;
}