/* One approved silhouette, shared by every color and control. */
.opaya-icon,
.opaya-check {
  --opaya-filter: none;
  --opaya-accent: #00865e;
}
[data-opaya-color="emerald"] { --opaya-filter: none; --opaya-accent: #00865e; }
[data-opaya-color="blue"] { --opaya-filter: hue-rotate(65deg); --opaya-accent: #1664c0; }
[data-opaya-color="cyan"] { --opaya-filter: hue-rotate(30deg); --opaya-accent: #007f99; }
[data-opaya-color="violet"] { --opaya-filter: hue-rotate(115deg); --opaya-accent: #7043bd; }
[data-opaya-color="pink"] { --opaya-filter: hue-rotate(160deg); --opaya-accent: #b82f87; }
[data-opaya-color="coral"] { --opaya-filter: hue-rotate(205deg); --opaya-accent: #bb443b; }
[data-opaya-color="orange"] { --opaya-filter: hue-rotate(230deg); --opaya-accent: #ab5700; }
[data-opaya-color="amber"] { --opaya-filter: hue-rotate(250deg); --opaya-accent: #8c6800; }
[data-opaya-color="lime"] { --opaya-filter: hue-rotate(290deg); --opaya-accent: #507c00; }
[data-opaya-color="charcoal"] { --opaya-filter: grayscale(1) brightness(.32); --opaya-accent: #303733; }
[data-opaya-color="gray"] { --opaya-filter: grayscale(1); --opaya-accent: #666d68; }
[data-opaya-color="white"] { --opaya-filter: brightness(0) invert(1); --opaya-accent: #ffffff; }
.opaya-icon {
  display: inline-block;
  width: var(--opaya-size, 24px);
  height: var(--opaya-size, 24px);
  flex: none;
  vertical-align: middle;
  background: url('./icons/opaya-interlock.png') center / contain no-repeat;
  filter: var(--opaya-filter);
}
.opaya-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  cursor: pointer;
  font: inherit;
}
.opaya-check input {
  position: absolute;
  width: 24px;
  height: 24px;
  inset-inline-start: 0;
  margin: 0;
  opacity: 0;
}
.opaya-check .check-mark {
  pointer-events: none;
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: none;
  border: 1px solid #a9b2ad;
  border-radius: 5px;
}
.opaya-check input:checked + .check-mark {
  border-color: transparent;
  background: url('./icons/opaya-interlock.png') center / 30px 30px no-repeat;
  filter: var(--opaya-filter);
}
/* The check lives inside the O, so state never depends on color alone. */
.opaya-check input:checked + .check-mark::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 8px;
  width: 5px;
  height: 8px;
  border: solid #202923;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.opaya-check input:indeterminate + .check-mark {
  background: var(--opaya-accent);
  border-color: transparent;
  filter: none;
}
.opaya-check input:indeterminate + .check-mark::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 2px;
  left: 6px;
  top: 10px;
  background: #fff;
  border: 0;
  transform: none;
}
.opaya-check input:focus-visible + .check-mark {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.opaya-check input:disabled ~ * { opacity: .4; }
.opaya-check:has(input:disabled) { cursor: not-allowed; }
@media (forced-colors: active) {
  .opaya-check input { position: static; opacity: 1; appearance: auto; }
  .opaya-check .check-mark { display: none; }
  .opaya-icon { filter: grayscale(1); }
}