html:has(web-candidate-assistant) body {
  transition: margin-left 250ms ease-in-out;
}

html {
  --candidate-assistant-width: 22vw;
  --candidate-assistant-surface: #f5f5f5;
  --candidate-assistant-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
}

html.candidate-assistant-open {
  --candidate-assistant-launcher-display: none;
  --candidate-assistant-panel-transform: none;
}

html:has(web-candidate-assistant) {
  --candidate-assistant-panel-transition: transform 250ms ease-in-out, width 250ms ease-in-out, top 250ms ease-in-out;
}

html.candidate-assistant-full {
  --candidate-assistant-panel-top: 64px;
  --candidate-assistant-panel-width: 100%;
  --candidate-assistant-expand-icon-display: none;
  --candidate-assistant-contract-icon-display: inline;
  overflow: hidden;
}

html.candidate-assistant-open body {
  margin-left: var(--candidate-assistant-width);
}

html.candidate-assistant-open:not(:has(web-candidate-assistant))::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--candidate-assistant-width);
  background-color: var(--candidate-assistant-surface);
  box-shadow: var(--candidate-assistant-shadow);
  z-index: 1029;
}