/* Plan locks outside the sidebar: a question type, or a question already in a quiz, that the organization's plan leaves
   out (src/server/plans.service.js). The lock itself is QuizPulse.lockIcon; the sidebar's locks live in
   quizpulse_sidebar.css. Change the tokens to restyle every lock here at once. */

:root {
  --qp-plan-lock-color: #7c7890;
  --qp-plan-lock-surface: color-mix(in srgb, var(--qp-plan-lock-color) 16%, #ffffff);
  --qp-plan-lock-size: 20px;
  --qp-plan-lock-glyph: 12px;
}

/* A question type in the creator's type menu */
.qp-control-option.is-plan-locked {
  position: relative;
  opacity: .74;
  cursor: pointer;
}

.qp-control-option.is-plan-locked:hover,
.qp-control-option.is-plan-locked:focus-visible {
  opacity: 1;
}

.qp-plan-lock {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  display: grid;
  place-items: center;
  width: var(--qp-plan-lock-size);
  height: var(--qp-plan-lock-size);
  border-radius: 50%;
  background: var(--qp-plan-lock-surface);
  color: var(--qp-plan-lock-color);
  font-style: normal;
}

/* A question in the creator's question list whose type the plan leaves out */
.qp-compact-plan-lock {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--qp-plan-lock-size);
  height: var(--qp-plan-lock-size);
  border-radius: 50%;
  background: var(--qp-plan-lock-surface);
  color: var(--qp-plan-lock-color);
}

.qp-plan-lock svg,
.qp-compact-plan-lock svg {
  display: block;
  width: var(--qp-plan-lock-glyph);
  height: var(--qp-plan-lock-glyph);
}