.root {
  --poll-option-media-width: 0;
  --percent-column-width: 2rem;
  --ui-border-color: var(--secondary-color);
  --ui-accent-color: var(--accent-color);

  display: grid;
  grid-template-columns:
    minmax(var(--percent-column-width), auto)
    minmax(0, 1fr)
    minmax(2.5rem, auto)
    var(--poll-option-media-width);
  grid-template-rows: auto auto;
  column-gap: 0.375rem;
  align-items: start;

  :global(.theme-dark .Message.own) & {
    --ui-check-color: var(--color-primary);
  }

  :global(body.is-macos) & {
    --percent-column-width: 2.25rem;
  }
}

.hasResults {
  .selector {
    justify-content: flex-end;
  }
}

.clickable {
  cursor: var(--custom-cursor, pointer);
}

.hasMediaColumn {
  --poll-option-media-width: 3rem;
}

.selector {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  justify-content: flex-start;

  min-height: 1.5rem;
}

.selectorSlide {
  display: flex;
  align-items: center;
}

.addAnswerIcon {
  font-size: 1.5rem;
  color: var(--color-text-secondary);
}

.addAnswerInput {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;

  font: inherit;
  line-height: inherit;
  color: inherit;

  background: transparent;
  outline: 0;

  &:focus-visible {
    border-radius: 0.25rem;
    outline: 0.125rem solid var(--accent-color);
    outline-offset: 0.125rem;
  }
}

.spinner {
  --spinner-size: 1.25rem;
}

.percentage {
  margin-inline-start: auto;

  font-size: 0.9375rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5rem;
  white-space: nowrap;
}

.fullPercent {
  font-size: 0.8125rem;
  :global(body.is-macos) & {
    font-size: 0.75rem;
  }
}

.answer {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: flex-start;

  min-width: 0;

  overflow-wrap: anywhere;
}

.addAnswer {
  cursor: text;
}

.addAnswerContent {
  grid-column: 2 / 4;
  justify-self: stretch;
}

.sideMeta {
  display: flex;
  grid-column: 3;
  grid-row: 1;
  gap: 0.25rem;
  align-items: center;
  align-self: center;
  justify-content: flex-end;

  min-height: 1.5rem;
}

.votersCount {
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
}

.avatarList {
  flex-shrink: 0;
}

.media {
  display: flex;
  grid-column: 4;
  grid-row: 1 / 3;
  align-self: flex-start;
  justify-self: end;

  width: var(--poll-option-media-width);
}

.mediaPreview {
  overflow: hidden;
  border-radius: 0.5rem;
}

.stickerPreview {
  position: relative;
  width: 3rem;
  height: 3rem;
}

.chosenMarker {
  display: flex;
  grid-column: 1;
  grid-row: 2;
  align-items: center;
  align-self: center;
  justify-content: flex-end;

  min-height: 1rem;
}

.chosenMarkerIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 1rem;
  height: 1rem;
  border-radius: 0.5rem;

  font-size: 0.875rem;
  color: var(--ui-check-color, var(--color-white));

  background-color: var(--ui-accent-color);
}

.square {
  border-radius: 0.25rem;
}

.incorrect {
  .chosenMarkerIcon, .progressFill {
    background-color: var(--color-error);
  }
}

.progress {
  grid-column: 2 / 4;
  grid-row: 2;
  align-self: center;

  min-height: 0.25rem;
  border-radius: 0.125rem;

  background-color: var(--accent-background-color);
}

.progressTrack {
  overflow: hidden;
  width: 100%;
  height: 0.25rem;
  border-radius: 0.125rem;
}

.progressFill {
  transform-origin: left center;
  transform: scaleX(var(--_progress));

  width: 100%;
  height: 100%;
  border-radius: inherit;

  background-color: var(--color-accent, var(--accent-color));
}

.animated {
  transition: transform 500ms ease-out;
}
