:host {
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .captcha,
  .captcha * {
    transition: none !important;
    animation: none !important;
  }

  .label {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  .label:not(.active) {
    display: none !important;
  }

  .label.exit {
    display: none !important;
  }
}

.captcha,
.captcha * {
  box-sizing: border-box;
}

.captcha {
  position: relative;
  display: inline-block;
  width: var(--cap-widget-width, 260px);
  height: var(--cap-widget-height, 58px);
  background-color: var(--cap-background, #fdfdfd);
  border: 1px solid var(--cap-border-color, #dddddd8f);
  border-radius: var(--cap-border-radius, 14px);
  user-select: none;
  cursor: pointer;
  transition:
    filter 0.2s,
    transform 0.2s,
    height 0.2s;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  overflow: hidden;
  color: var(--cap-color, #212121);
  font-family: var(
    --cap-font,
    system,
    -apple-system,
    "BlinkMacSystemFont",
    ".SFNSText-Regular",
    "San Francisco",
    "Roboto",
    "Segoe UI",
    "Helvetica Neue",
    "Lucida Grande",
    "Ubuntu",
    "arial",
    sans-serif
  );
}

.captcha.has-troubleshoot {
  height: calc(var(--cap-widget-height, 58px) + 26px);
}

.captcha.has-troubleshoot .captcha-trigger {
  inset-block-end: 26px;
}

.captcha:not([data-state]):active {
  transform: scale(0.97);
}

.captcha:hover {
  filter: brightness(98%);
}

.captcha-trigger {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: var(--cap-widget-padding, 14px);
  gap: var(--cap-gap, 15px);
  border-radius: inherit;
  transition: inset 0.2s;
}

.captcha-trigger:focus-visible {
  outline: 2px solid var(--cap-focus-ring, #0066cc);
  outline-offset: -3px;
}

.checkbox {
  width: var(--cap-checkbox-size, 25px);
  height: var(--cap-checkbox-size, 25px);
  border: var(--cap-checkbox-border, 1px solid #aaaaaad1);
  border-radius: var(--cap-checkbox-border-radius, 6px);
  background-color: var(--cap-checkbox-background, #fafafa91);
  transition: opacity 0.2s;
  margin-top: var(--cap-checkbox-margin, 2px);
  margin-bottom: var(--cap-checkbox-margin, 2px);
  flex-shrink: 0;
}

.captcha p {
  margin: 0;
  font-weight: 500;
  font-size: 15px;
  user-select: none;
}

.label-wrapper {
  position: relative;
  height: 2em;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.label-wrapper::before,
.label-wrapper::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 0;
  width: 100%;
  height: 0.6em;
  z-index: 1;
}

.label-wrapper::before {
  top: 0;
  background: linear-gradient(
    to bottom,
    var(--cap-background, #fdfdfd),
    transparent
  );
}

.label-wrapper::after {
  bottom: 0;
  background: linear-gradient(
    to top,
    var(--cap-background, #fdfdfd),
    transparent
  );
}

.label {
  position: absolute;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.5s ease,
    filter 0.5s ease;
  filter: blur(2px);
}

.label.active {
  opacity: 1;
  transform: translateY(0);
  filter: none;
}

.label.exit {
  opacity: 0;
  transform: translateY(-100%);
  filter: blur(2px);
}

.checkbox .progress-ring {
  display: none;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.checkbox .progress-ring-bg {
  fill: none;
  stroke: var(--cap-spinner-background-color, #eee);
  stroke-width: var(--cap-spinner-thickness, 3);
}

.checkbox .progress-ring-circle {
  fill: none;
  stroke: var(--cap-spinner-color, #000);
  stroke-width: var(--cap-spinner-thickness, 3);
  stroke-linecap: round;
  stroke-dasharray: 87.96;
  stroke-dashoffset: 87.96;
  transition: stroke-dashoffset 0.3s ease;
}

.captcha[data-state="verifying"] .checkbox {
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(1.1);
  border: none;
  border-radius: 50%;
  background-color: transparent;
}

.captcha[data-state="verifying"] .checkbox .progress-ring {
  display: block;
}

.captcha[data-state="done"] .checkbox {
  border: 1px solid transparent;
  background-image: var(
    --cap-checkmark,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cstyle%3E%40keyframes%20anim%7B0%25%7Bstroke-dashoffset%3A23.21320343017578px%7Dto%7Bstroke-dashoffset%3A0%7D%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%2300a67d%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m5%2012%205%205L20%207%22%20style%3D%22stroke-dashoffset%3A0%3Bstroke-dasharray%3A23.21320343017578px%3Banimation%3Aanim%20.5s%20ease%22%2F%3E%3C%2Fsvg%3E")
  );
  background-size: cover;
}

.captcha[data-state="done"] .checkbox .progress-ring {
  display: none;
}

.captcha[data-state="error"] .checkbox {
  border: 1px solid transparent;
  background-image: var(
    --cap-error-cross,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24'%3E%3Cpath fill='%23f55b50' d='M11 15h2v2h-2zm0-8h2v6h-2zm1-5C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18a8 8 0 0 1-8-8a8 8 0 0 1 8-8a8 8 0 0 1 8 8a8 8 0 0 1-8 8'/%3E%3C%2Fsvg%3E")
  );
  background-size: cover;
}

.captcha[data-state="error"] .checkbox .progress-ring {
  display: none;
}

.captcha.invalid {
  animation: cap-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  border-color: var(--cap-invalid-border-color, #f55b50);
  box-shadow: 0 0 0 3px var(--cap-invalid-ring-color, rgba(245, 91, 80, 0.2));
}

@keyframes cap-shake {
  10%,
  90% {
    transform: translateX(-1px);
  }
  20%,
  80% {
    transform: translateX(2px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-4px);
  }
  40%,
  60% {
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .captcha.invalid {
    animation: none !important;
  }
}

.captcha-trigger[disabled] {
  cursor: not-allowed;
}

.captcha[data-state="verifying"] .captcha-trigger {
  cursor: progress;
}

.captcha[data-state="done"] .captcha-trigger {
  cursor: default;
}

.credits {
  position: absolute;
  inset-block-end: 4px;
  inset-inline-end: 4px;
  font-size: 12px !important;
  color: var(--cap-color, #212121);
  opacity: 0.8 !important;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
  z-index: 2;
  min-width: 24px;
  min-height: 24px;
  padding: 4px 6px;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  border-radius: 4px;
}

.captcha .credits {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: all !important;
}

.credits:focus-visible {
  outline: 2px solid var(--cap-focus-ring, #0066cc);
  outline-offset: 2px;
  opacity: 1 !important;
}

.cap-troubleshoot-link {
  position: absolute;
  inset-block-end: 4px;
  inset-inline-start: 14px;
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  min-width: 24px;
  min-height: 24px;
  color: var(--cap-troubleshoot-color, #0050a0);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.08em;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  border-radius: 4px;
  z-index: 2;
}

.cap-troubleshoot-link[hidden] {
  display: none;
}

.cap-troubleshoot-link:hover {
  opacity: 0.85;
}

.cap-troubleshoot-link:focus-visible {
  outline: 2px solid var(--cap-focus-ring, #0066cc);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  .captcha {
    border-color: CanvasText;
  }
  .checkbox {
    border-color: CanvasText;
  }
  .captcha-trigger:focus-visible,
  .credits:focus-visible,
  .cap-troubleshoot-link:focus-visible {
    outline-color: Highlight;
  }
  .progress-ring-bg {
    stroke: GrayText;
  }
  .progress-ring-circle {
    stroke: CanvasText;
  }
  .captcha.invalid {
    border-color: Mark;
    box-shadow: none;
  }
  .credits {
    opacity: 1 !important;
  }
}