@layer components {
  .poll-index {
    font-size: 0.667em;

    .panel {
      --panel-padding: clamp(1rem, 3vw, 2rem);
    }
  }

  .poll-panel {
    --panel-padding: 8cqi;
    position: relative;
  }

  .poll-status {
    display: block;
    font-size: var(--txt-medium);
    margin: 0;
    position: absolute;
    inset: 0 auto auto 50%;
    translate: -50% -50%;
  }

  .poll--answers {
    .timeline &,
    .tool-stack & {
      margin-block-start: var(--block-space-half);
    }
  }

  .poll-answer {
    display: block;
    position: relative;

    input[type=checkbox],
    input[type=radio] {
      position: absolute;
      visibility: hidden;
      z-index: -1;

      &:disabled {
        + .poll-answer__button { pointer-events: none; }
      }
    }

    + .poll-answer {
      margin-block-start: 1ch;
    }
  }

  /* Make the text the inverse of whatever background color it's on */
  .poll-answer__percentage,
  .poll-answer__label {
    color: var(--color-ink-inverted);
    mix-blend-mode: difference;

    @media (prefers-color-scheme: dark) {
      color: var(--color-ink);
    }
  }

  .poll-answer__label {
    flex: 1;
    text-align: start;
  }

  .poll-answer__mine,
  .poll-answer__percentage,
  .poll-answer__meter {
    display: none;
  }

  .poll-answer__mine {
    animation: pop-visible 0.3s ease both;
    animation-delay: 0.45s;
  }

  .poll-answer__button {
    &:has([role=meter]) {
      --btn-border-radius: 0.3em;
      overflow: hidden;
      position: relative;
    }

    .tool-stack & {
      --btn-padding: 0.3em 1.1em;
      margin-block: calc(0.5 * var(--block-space-half));
    }
  }

  .poll-answer__meter {
    animation: poll 0.4s ease both;
    animation-delay: 0.1s;
    background: var(--color-ink-lighter);
    inset: 0;
    inset-block: -1px;
    position: absolute;

    + span {
      z-index: 1;
    }
  }

  .poll-answer:has(input:checked) {
    .poll-answer__mine,
    .poll-answer__percentage,
    .poll-answer__meter {
      display: inherit;
    }
  }

  .poll-answer:has(input[type=radio]:checked),
  .poll-answer--winner:has(input[type=checkbox]:checked) {
    .poll-answer__meter {
      background-color: var(--color-ink);
    }
  }

  .poll-answer--mine {
    .poll-answer__mine { display: inherit; }
  }
}